/* global React, AGENTS, AxanaMark, AxanaLogo */
const { useState: useStateH, useEffect: useEffectH } = React;

const FLOW_EVENTS = [
  {
    id: "INV-4821",
    kind: "Invoice",
    glyph: "INV",
    agentIdx: 0,
    inbound: { title: "Vendor invoice",  source: "AP Email · PDF",   detail: "Steelhaus Mfg.",   amount: "$ 12,480.00" },
    outbound:{ title: "Bill posted",     source: "QBO · attachment", detail: "Save & New",        amount: "$ 12,480.00" },
  },
  {
    id: "BILL-302",
    kind: "Matter",
    glyph: "MTR",
    agentIdx: 1,
    inbound: { title: "Bill matter",     source: "Approval · API",   detail: "Customer added",    amount: "$ 4,250.00" },
    outbound:{ title: "Invoice drafted", source: "QBO · review",     detail: "→ Finance manager", amount: "$ 4,250.00" },
  },
  {
    id: "TIME-W18",
    kind: "Timesheet",
    glyph: "TSH",
    agentIdx: 2,
    inbound: { title: "Timesheets",      source: "Signature · approved", detail: "Wk 18 · 127 staff", amount: "Approved" },
    outbound:{ title: "Payroll run",     source: "QBO · cheques",    detail: "Paystubs sent",     amount: "Filed" },
  },
  {
    id: "STMT-04",
    kind: "Bank",
    glyph: "STM",
    agentIdx: 3,
    inbound: { title: "Bank feed",       source: "QBO · linked",     detail: "Apr · 412 lines",   amount: "$ 86,402.13" },
    outbound:{ title: "Match · Apr",     source: "Ledger · green",   detail: "Statement balanced",amount: "Reconciled" },
  },
];

function HeroWorkflow() {
  const [auto, setAuto] = useStateH(true);
  const [pinned, setPinned] = useStateH(null);
  const [tick, setTick] = useStateH(0);

  useEffectH(() => {
    if (!auto) return;
    const t = setInterval(() => setTick((x) => (x + 1) % FLOW_EVENTS.length), 2600);
    return () => clearInterval(t);
  }, [auto]);

  const idx = pinned != null ? FLOW_EVENTS.findIndex((e) => e.id === pinned) : tick;
  const ev = FLOW_EVENTS[idx];
  const handlePin = (id) => {
    if (pinned === id) { setPinned(null); setAuto(true); }
    else { setPinned(id); setAuto(false); }
  };

  return (
    <div className="pipeline">
      {/* Toolbar */}
      <div className="pipe-toolbar">
        <div className="pipe-toolbar-l">
          <span className="pipe-status-dot"></span>
          <span className="pipe-toolbar-title">Live workflow</span>
          <span className="pipe-toolbar-meta">Cycle 04/26</span>
        </div>
        <div className="pipe-toolbar-r">
          <button
            className={`pipe-btn ${auto ? "on" : ""}`}
            onClick={() => { setAuto(!auto); setPinned(null); }}
          >
            {auto ? "■ Pause" : "▶ Play"}
          </button>
        </div>
      </div>

      {/* Three-stage architecture diagram */}
      <div className="pipe-stage-grid">
        <div className="pipe-stage">
          <div className="pipe-stage-label">
            <span className="pipe-stage-num">01</span>
            <span className="pipe-stage-name">Inbound</span>
          </div>
          <div className="pipe-stage-sub">Documents &amp; events</div>
        </div>
        <div className="pipe-stage center">
          <div className="pipe-stage-label">
            <span className="pipe-stage-num">02</span>
            <span className="pipe-stage-name">Orchestrator</span>
          </div>
          <div className="pipe-stage-sub">Axana finance team routes the work</div>
        </div>
        <div className="pipe-stage right">
          <div className="pipe-stage-label">
            <span className="pipe-stage-num">03</span>
            <span className="pipe-stage-name">Outbound</span>
          </div>
          <div className="pipe-stage-sub">Posted &amp; resolved</div>
        </div>
      </div>

      {/* Connector arrows */}
      <div className="pipe-connectors">
        <svg width="100%" height="60" viewBox="0 0 1200 60" preserveAspectRatio="none">
          <defs>
            <linearGradient id="cgrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stopColor="oklch(0.78 0.18 320)" stopOpacity="0.0"/>
              <stop offset="0.2" stopColor="oklch(0.78 0.18 320)" stopOpacity="0.6"/>
              <stop offset="0.5" stopColor="oklch(0.68 0.18 295)" stopOpacity="1"/>
              <stop offset="0.8" stopColor="oklch(0.78 0.18 320)" stopOpacity="0.6"/>
              <stop offset="1" stopColor="oklch(0.78 0.18 320)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <line x1="20" y1="30" x2="1180" y2="30" stroke="url(#cgrad)" strokeWidth="1" strokeDasharray="4 4"/>
          <circle className="pipe-pulse" cx="0" cy="30" r="4" fill="oklch(0.85 0.16 320)">
            <animate attributeName="cx" values="20;1180" dur="2.6s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="0;1;1;0" dur="2.6s" repeatCount="indefinite"/>
          </circle>
        </svg>
      </div>

      {/* Active focused card row */}
      <div className="pipe-row">
        {/* IN */}
        <div className="pipe-card pipe-card-in">
          <div className="pipe-card-head">
            <div className="pipe-card-glyph">{ev.glyph}</div>
            <div className="pipe-card-tag">{ev.kind}</div>
            <div className="pipe-card-id">{ev.id}</div>
          </div>
          <div className="pipe-card-title">{ev.inbound.title}</div>
          <div className="pipe-card-meta">{ev.inbound.source}</div>
          <div className="pipe-card-detail">{ev.inbound.detail}</div>
          <div className="pipe-card-amt">{ev.inbound.amount}</div>
        </div>

        {/* AGENT */}
        <div className="pipe-card pipe-card-agent">
          <div className="pipe-card-head">
            <div className="pipe-card-glyph violet">{AGENTS[ev.agentIdx].callsign.slice(0, 2)}</div>
            <div className="pipe-card-tag violet">Working</div>
            <div className="pipe-card-id">{AGENTS[ev.agentIdx].code}</div>
          </div>
          <div className="pipe-card-title">{AGENTS[ev.agentIdx].callsign}</div>
          <div className="pipe-card-meta">{AGENTS[ev.agentIdx].role}</div>
          <div className="pipe-card-detail">{AGENTS[ev.agentIdx].summary.split(",")[0]}.</div>
          <div className="pipe-card-status">
            <span className="pipe-card-pulse"></span>
            <span>Routing in progress</span>
          </div>
        </div>

        {/* OUT */}
        <div className="pipe-card pipe-card-out">
          <div className="pipe-card-head">
            <div className="pipe-card-glyph done">✓</div>
            <div className="pipe-card-tag green">Posted</div>
            <div className="pipe-card-id">{ev.id}</div>
          </div>
          <div className="pipe-card-title">{ev.outbound.title}</div>
          <div className="pipe-card-meta">{ev.outbound.source}</div>
          <div className="pipe-card-detail">{ev.outbound.detail}</div>
          <div className="pipe-card-amt">{ev.outbound.amount}</div>
        </div>
      </div>

      {/* Event picker */}
      <div className="pipe-picker">
        <div className="pipe-picker-label">All events · click to inspect</div>
        <div className="pipe-picker-row">
          {FLOW_EVENTS.map((e, i) => (
            <button
              key={e.id}
              className={`pipe-pill ${i === idx ? "active" : ""}`}
              onClick={() => handlePin(e.id)}
            >
              <span className="pipe-pill-glyph">{e.glyph}</span>
              <span className="pipe-pill-id">{e.id}</span>
              <span className="pipe-pill-amt">{e.inbound.amount}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function HeroSection({ headline, onOpenForm }) {
  const HEADLINES = {
    a: <>The first <em>trained</em> AI finance team.</>,
    b: <>Hire your finance <em>department</em> in a day.</>,
    c: <>Agentic finance, <em>ready</em> for your industry.</>,
  };
  const openForm = () => onOpenForm && onOpenForm();
  return (
    <section className="dark-section">
      <div className="container-wide">
        <nav className="nav">
          <a href="#" className="nav-logo">
            <span className="brand-img-wrap">
              <img src="logo.png" alt="Axana AI" className="brand-img" />
            </span>
          </a>
          <div className="nav-links">
            <a href="#agents">Team</a>
            <a href="#how">How it works</a>
            <a href="#pricing">Pricing</a>
          </div>
          <button className="nav-cta" onClick={openForm}>Start an implementation →</button>
        </nav>

        <div className="hero">
          <h1 className="hero-headline">{HEADLINES[headline] || HEADLINES.a}</h1>
          <p className="hero-sub">
            Five trained AI Employees — Accounts Payable Analyst, Accounts
            Receivable Analyst, Payroll Administrator, Bookkeeper and
            Executive Financial Assistant ready to plug into your accounting
            system. Built for legal, hospitality, construction and
            manufacturing industries. The finance back office that doesn't
            take vacations.
          </p>
          <div className="hero-actions">
            <button className="btn-primary" onClick={openForm}>Start an implementation<span className="arrow">→</span></button>
          </div>

          <div className="hero-workflow-eyebrow">The team in action</div>

          <HeroWorkflow />
        </div>
      </div>

      <div className="container-wide">
        <div className="logo-strip">
          <div className="logo-strip-label">Our agents are trained to use the same tools you do</div>
          <div className="logo-strip-row">
            <div className="logo-item">QuickBooks<span className="sup">Online</span></div>
            <div className="logo-item"><em>Clio</em></div>
            <div className="logo-item">Restaurant<span className="sup">365</span></div>
            <div className="logo-item"><em>Signature Approval</em></div>
            <div className="logo-item">Email / SMTP</div>
            <div className="logo-item"><em>Your Orchestrator</em></div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection });