/* global React */
const { useState, useEffect, useRef } = React;

// === Brand wordmark ===
function AxanaMark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style={{display: "block"}}>
      <defs>
        <linearGradient id="ax-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="oklch(0.82 0.16 320)" />
          <stop offset="100%" stopColor="oklch(0.55 0.20 295)" />
        </linearGradient>
      </defs>
      <path d="M16 3 L29 28 L23 28 L20.5 22.5 L11.5 22.5 L9 28 L3 28 Z M13.6 18 L18.4 18 L16 12.5 Z" fill="url(#ax-grad)" />
      <path d="M5 18 Q16 13 27 18 L25 20 Q16 16 7 20 Z" fill="url(#ax-grad)" opacity="0.92" />
    </svg>
  );
}

function AxanaWordmark({ size = 16 }) {
  return (
    <div style={{display: "flex", alignItems: "center", gap: 10}}>
      <AxanaMark size={size * 1.6} />
      <span style={{
        fontFamily: "var(--font-ui)",
        fontWeight: 600,
        fontSize: size,
        letterSpacing: "0.22em",
      }}>AXANA AI</span>
    </div>
  );
}

// === Agents — STRICTLY from the four job-description documents (APA / ARA / PA / BK) ===
const AGENTS = [
  {
    id: "apa",
    code: "AGT · 001",
    callsign: "JULIA",
    role: "Accounts Payable Analyst",
    tag: "Bills",
    summary: "Receives invoices, routes them through a signature approval flow, posts the bill in QBO, and ships the AP Aging report.",
    workflows: [
      {
        title: "External — invoice approval",
        steps: [
          "AP Email receives the invoice",
          "Invoice gets downloaded",
          "Invoice gets saved in AP folder for approval",
          "Invoice gets sent for signature approval",
          "Click sender (project manager)",
          "Enter email approver",
          "Select signature (OCR / template)",
          "Add the signature",
          "Add the date",
          "Click send",
          "AP email gets the approved invoice",
        ],
      },
      {
        title: "QBO — enter the bill",
        steps: [
          "Log in", "New", "Bill",
          "Supplier name (data set up in system)",
          "Terms (data set up in system)",
          "Bill date", "Due date", "Bill number",
          "Category (data set up in system)",
          "Description (options)", "Amount",
          "Sales tax (data set up in system)",
          "Attachment (must have)",
          "Save and new",
        ],
      },
      {
        title: "Reporting — AP Aging",
        steps: [
          "QBO log in", "Click Reports",
          "Accounts Payable Aging detail",
          "Report period stays", "As of date stays",
          "Customize (add memo / description and logo — saved as customized report)",
          "Email icon",
          "Email to accounting / finance manager",
          "Select PDF", "Send",
        ],
      },
    ],
  },
  {
    id: "ara",
    code: "AGT · 002",
    callsign: "KEVIN",
    role: "Accounts Receivable Analyst",
    tag: "Billing",
    summary: "On approval, drafts the invoice in QBO, sends it to the finance manager for review, and ships the AR Aging report.",
    workflows: [
      {
        title: "Billing — based on approval",
        steps: [
          "Human instruction to AI to bill certain matter",
          "QBO log in", "New", "Invoice (API)",
          "Add customer (API)",
          "Invoice number (customized)",
          "Terms (data set up in system)",
          "Invoice date", "Service date",
          "Product / service (numbers added at the beginning)",
          "Description (customized)",
          "Quantity", "Rate", "Amount", "Sales tax",
          "Review & send",
          "Send to finance manager (never to customer)",
        ],
      },
      {
        title: "Reporting — AR Aging",
        steps: [
          "Click Reports",
          "Accounts Receivable Aging detail",
          "Email icon",
          "Email to accounting / finance manager",
          "Select PDF", "Send email",
        ],
      },
    ],
  },
  {
    id: "pa",
    code: "AGT · 003",
    callsign: "MICHAEL",
    role: "Payroll Administrator",
    tag: "Biweekly",
    summary: "Collects approved timesheets, enters two weeks of hours in QBO, runs payroll, prints cheques, files paystubs.",
    workflows: [
      {
        title: "External — timesheet approval",
        steps: [
          "Timesheets received by email",
          "Timesheet submitted for signature approval to the corresponding manager",
          "Signed approved timesheet returned to Finance Manager",
          "Timesheet is saved in the approved timesheet folder",
        ],
      },
      {
        title: "QBO — enter hours (biweekly)",
        steps: [
          "QBO log in", "New", "Weekly timesheet",
          "Name employee",
          "Week 1 of payroll selection",
          "Enter total hours per day",
          "Save and new",
          "Name employee",
          "Week 2 of payroll selection",
          "Enter total hours per day",
          "Save and new",
          "Next employee",
        ],
      },
      {
        title: "QBO — run payroll (biweekly)",
        steps: [
          "QBO log in", "Click on payroll", "Employees",
          "Run payroll", "Preview payroll",
          "Select bank account", "Run payroll",
          "Print cheques",
          "Save them in accounting payroll folder",
          "Send them to finance manager",
          "Employees receive their paystub automatically",
        ],
      },
    ],
  },
  {
    id: "bk",
    code: "AGT · 004",
    callsign: "SOFIA",
    role: "Bookkeeper",
    tag: "Reconciliation",
    summary: "Matches every bank transaction against QBO, working through greens and the multi-line matches until the statement balances.",
    workflows: [
      {
        title: "QBO — bank reconciliation",
        steps: [
          "QBO log in",
          "Bank and QBO are linked",
          "Click on transactions",
          "Match what is already in green — click on \"match\" green",
          "The remaining transactions, click on Match",
          "Second screen will appear",
          "Select the ones that add up to the transaction we are looking to match",
          "Click on them",
          "Then click on Match",
          "Repeat",
        ],
      },
    ],
  },
  {
    id: "ea",
    code: "AGT · 005",
    callsign: "STEWARD",
    role: "Customized Orchestrator Assistant",
    tag: "Tailored to you",
    summary: "The most efficient assistant for your orchestrator. Configured to your team, your stack and your cadence — STEWARD routes the work, prepares the packs, and keeps every other agent on rails.",
    workflows: [
      { title: "Custom-trained on your operating cadence" },
      { title: "Built around your finance leader's preferences" },
      { title: "Routes work between your orchestrator and the team" },
    ],
  },
];

const INDUSTRIES = [
  {
    id: "legal", name: "Legal",
    headline: "A finance team that already speaks Clio.",
    desc: "AP, AR, payroll and bookkeeping wired to your existing QBO + Clio workflow — the same bills, invoices and reconciliations, run by trained agents.",
    stack: ["QuickBooks Online", "Clio", "Signature Approval"],
  },
  {
    id: "hospitality", name: "Hospitality",
    headline: "Operators sleep, the books still close.",
    desc: "Receive vendor invoices, approve, post to QBO, run biweekly payroll, reconcile bank — every step from the SOPs, automated end-to-end.",
    stack: ["QuickBooks Online", "Restaurant365", "Signature Approval"],
  },
  {
    id: "construction", name: "Construction",
    headline: "Bills, payroll and recon — without an office hire.",
    desc: "Subcontractor bills routed through a signature approval flow for PM sign-off, AR drafted from the matter, payroll cut on schedule, ledger matched.",
    stack: ["QuickBooks Online", "Signature Approval"],
  },
  {
    id: "manufacturing", name: "Manufacturing",
    headline: "An AP & AR back office at machine speed.",
    desc: "Vendor invoices intake, attachment-on-bill enforced, AR generated on instruction, AP and AR aging reports shipped to the finance manager.",
    stack: ["QuickBooks Online", "Signature Approval"],
  },
  {
    id: "wellness", name: "Wellness",
    headline: "Spend less time on books, more on members.",
    desc: "Member billing posted, vendor invoices approved and filed, biweekly payroll cut for trainers and front desk, books reconciled — so the studio runs on cadence.",
    stack: ["QuickBooks Online", "Signature Approval"],
  },
];

const INTEGRATIONS = [
  { name: "QuickBooks Online", logo: "QBO" },
  { name: "Clio", logo: "Clio", italic: true },
  { name: "Restaurant365", logo: "R365" },
  { name: "Signature Approval", logo: "Sign", italic: true },
  { name: "Email / SMTP", logo: "Mail" },
  { name: "Your AI Orchestrator", logo: "API", italic: true },
];

Object.assign(window, { AxanaMark, AxanaWordmark, AGENTS, INDUSTRIES, INTEGRATIONS });
