/* global React, AGENTS, INDUSTRIES, INTEGRATIONS, AxanaMark, AxanaLogo */
const { useState: useStateS } = React;

function AgentsSection() {
  const [activeId, setActiveId] = useStateS(AGENTS[0].id);
  const active = AGENTS.find((a) => a.id === activeId) || AGENTS[0];
  return (
    <section className="agents-section" id="agents">
      <div className="container-wide">
        {/* Trained-by credibility band — appears once, above the section header */}
        <div id="ana" className="trained-by-band trained-by-band--top">
          <div className="trained-by-portrait">
            <img src="ana.png" alt="Ana Morales, Finance &amp; Corporate Operations Expert" />
          </div>
          <div className="trained-by-body">
            <div className="trained-by-eyebrow">Built by operators · Trained by Ana Morales</div>
            <p className="trained-by-quote">
              <em>Trained by Ana Morales — ten years running finance and
              corporate operations across legal practices, hospitality,
              construction, manufacturing and wellness industries. Every
              procedure on this page is one she's run by hand, refined
              through real month-ends, and translated into something an AI
              employee can execute on day one.</em>
            </p>
            <p className="trained-by-quote trained-by-quote--secondary">
              <em>Ana is a Finance Administration and Corporate Operations
              expert with a Bachelor’s degree in Accounting and Finance. As
              an AI Agentic Trainer &amp; Orchestrator, she is driven by one
              core belief — time is the most valuable asset we never get
              back. This vision led her to create Axana AI, her first
              human-free finance team powered entirely by AI.</em>
            </p>
            <div className="trained-by-attr">
              <span className="trained-by-name">Ana Morales</span>
            </div>
            <div className="trained-by-creds">
              <div className="trained-by-cred">
                <div className="v"><em>10+ yrs</em></div>
                <div className="k">Finance &amp; ops</div>
              </div>
              <div className="trained-by-cred">
                <div className="v"><em>2+ yrs</em></div>
                <div className="k">AI enablement</div>
              </div>
              <div className="trained-by-cred">
                <div className="v"><em>5</em></div>
                <div className="k">Trained agents</div>
              </div>
            </div>
          </div>
        </div>

        <div className="section-header">
          <div className="section-eyebrow">The roster · Five trained agents</div>
          <h2 className="section-title">The team that <em>runs the back office</em>.</h2>
          <p className="section-sub">
            Each agent trained on the actual SOP — step by step. Click any badge to inspect.
          </p>
        </div>

        {/* Position roster — depth chart */}
        <div className="roster-board">
          {AGENTS.map((a, i) => (
            <button
              key={a.id}
              className={`roster-badge ${activeId === a.id ? "active" : ""}`}
              onClick={() => setActiveId(a.id)}
            >
              <div className="roster-badge-num">{String(i + 1).padStart(2, "0")} / {String(AGENTS.length).padStart(2, "0")}</div>
              <div className="roster-badge-callsign">{a.callsign}</div>
              <div className="roster-badge-role">{a.role}</div>
              <div className="roster-badge-tag">{a.tag}</div>
              <div className="roster-badge-status">
                <span className="dot"></span>
                <span>{activeId === a.id ? "Selected" : "On shift"}</span>
              </div>
            </button>
          ))}
        </div>

        {/* Detail dossier */}
        <div className="agent-detail">
          <div className="agent-procedures-diagram">
            {active.workflows.map((wf, wi) => (
              <div key={wi} className="proc-diagram proc-diagram--lite">
                <div className="proc-diagram-head">
                  <div className="proc-diagram-num">PROC · {String(wi + 1).padStart(2, "0")}</div>
                  <div className="proc-diagram-title">{wf.title}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function IndustriesSection({ active, onChange }) {
  const ind = INDUSTRIES.find((i) => i.id === active) || INDUSTRIES[0];
  return (
    <section className="light-section surface" id="industries">
      <div className="container-wide">
        <div className="section-header">
          <div className="section-eyebrow">Trained for your industry</div>
          <h2 className="section-title">Same team. <em>Different</em> playbook.</h2>
          <p className="section-sub">
            Same five agents, retrained for the way your industry actually
            books, bills and pays. Pick yours below to see the playbook in
            place.
          </p>
        </div>

        <div className="industries-tabs">
          {INDUSTRIES.map((i) => (
            <button
              key={i.id}
              className={`industries-tab ${active === i.id ? "active" : ""}`}
              onClick={() => onChange(i.id)}
            >
              {i.name}
            </button>
          ))}
        </div>

        <div className="industry-panel" style={{gridTemplateColumns: "1fr"}}>
          <div>
            <h3>{ind.headline}</h3>
            <p>{ind.desc}</p>
            <div style={{display: "flex", gap: 8, flexWrap: "wrap"}}>
              {ind.stack.map((s) => (
                <span key={s} style={{
                  padding: "8px 14px",
                  background: "var(--l-surface-2)",
                  borderRadius: 999,
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  letterSpacing: "0.06em",
                  textTransform: "uppercase",
                  color: "var(--l-fg-muted)",
                }}>↳ {s}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ROISection() {
  return (
    <section className="light-section">
      <div className="container-wide">
        <div className="section-header">
          <div className="section-eyebrow">The math</div>
          <h2 className="section-title">An entire finance role, <em>off your payroll</em>.</h2>
        </div>

        <div className="roi-grid">
          <div>
            <div className="roi-bignum">
              <span className="currency">$</span>
              <em>65K</em>
              <span className="unit">saved per role,<br/>per year</span>
            </div>
            <p style={{
              fontSize: 16,
              lineHeight: 1.55,
              color: "var(--l-fg-muted)",
              maxWidth: "48ch",
              marginTop: 24,
            }}>
              The fully-loaded cost of an AP Analyst, AR Analyst, Payroll Administrator,
              Bookkeeper, or Executive Admin Assistant — covered by an agent trained on
              your exact procedures, working alongside your AI Agentic Orchestrator.
            </p>
          </div>

          <div className="roi-stats">
            <div className="roi-stat">
              <div className="v"><em>10x</em></div>
              <div className="k">Throughput</div>
              <div className="desc">Accounting processes at the highest level of efficiency vs. a human equivalent.</div>
            </div>
            <div className="roi-stat">
              <div className="v"><em>0.1%</em></div>
              <div className="k">Error rate</div>
              <div className="desc">Audited across posted transactions in our implementation cohort.</div>
            </div>
            <div className="roi-stat">
              <div className="v"><em>24 h</em></div>
              <div className="k">Time to deploy</div>
              <div className="desc">Your Axana AI team is up and working in 24 hours. That's it.</div>
            </div>
            <div className="roi-stat">
              <div className="v"><em>3 days</em></div>
              <div className="k">Orchestrator training</div>
              <div className="desc">Three days of guided training on your in-house AI Human Orchestrator — your team owns the loop on day four.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorksSection() {
  const steps = [
    {
      n: "01",
      t: "Connect your stack",
      p: "Read-only OAuth into QBO, Clio, R365, Bill.com, Ramp, your bank — whatever you already run.",
      visual: <ConnectVisual />,
    },
    {
      n: "02",
      t: "Train the orchestrator",
      p: "Your existing AI orchestrator (or ours) ingests our agents as named roles with documented APIs and SOPs.",
      visual: <OrchestrateVisual />,
    },
    {
      n: "03",
      t: "Implement one workflow",
      p: "We start where the pain is loudest — usually AP or month-end close. Side-by-side with your team for 14 days.",
      visual: <PilotVisual />,
    },
    {
      n: "04",
      t: "Scale the team",
      p: "Hand off the next role. Then the next. Your humans keep judgment work; the agents keep the lights on.",
      visual: <ScaleVisual />,
    },
  ];
  return (
    <section className="light-section surface" id="how">
      <div className="container-wide">
        <div className="section-header">
          <div className="section-eyebrow">How it works</div>
          <h2 className="section-title">Plug a finance team into <em>your</em> accounting system.</h2>
          <p className="section-sub">
            Axana AI agents are designed to be hired by any company to work
            with your in-house orchestrator.
          </p>
        </div>

        <div className="howit-grid">
          {steps.map((s) => (
            <div key={s.n} className="howit-step">
              <div className="num">{s.n}</div>
              <h4>{s.t}</h4>
              <div className="visual">{s.visual}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Tiny in-card SVG visualizations (geometry only — no decorative illustration)
function ConnectVisual() {
  return (
    <svg width="100%" height="80" viewBox="0 0 240 80" fill="none">
      <line x1="20" y1="40" x2="220" y2="40" stroke="var(--l-hairline-strong)" strokeDasharray="2 4" />
      {[20, 80, 140, 200].map((x) => (
        <g key={x}>
          <circle cx={x} cy="40" r="6" fill="var(--l-surface)" stroke="var(--violet-deep)" />
          <circle cx={x} cy="40" r="2" fill="var(--violet-deep)" />
        </g>
      ))}
      <text x="20" y="64" fontFamily="var(--font-mono)" fontSize="9" fill="var(--l-fg-dim)" letterSpacing="0.06em">QBO</text>
      <text x="68" y="64" fontFamily="var(--font-mono)" fontSize="9" fill="var(--l-fg-dim)" letterSpacing="0.06em">CLIO</text>
      <text x="125" y="64" fontFamily="var(--font-mono)" fontSize="9" fill="var(--l-fg-dim)" letterSpacing="0.06em">R365</text>
      <text x="190" y="64" fontFamily="var(--font-mono)" fontSize="9" fill="var(--l-fg-dim)" letterSpacing="0.06em">BANK</text>
    </svg>
  );
}
function OrchestrateVisual() {
  return (
    <svg width="100%" height="80" viewBox="0 0 240 80" fill="none">
      <rect x="100" y="20" width="40" height="40" rx="8" fill="var(--violet-deep)" />
      <text x="120" y="44" textAnchor="middle" fontFamily="var(--font-display)" fontStyle="italic" fontSize="14" fill="white">A</text>
      {[
        [40, 20], [40, 60], [200, 20], [200, 60], [120, 4],
      ].map(([x, y], i) => (
        <g key={i}>
          <line x1={x} y1={y + 8} x2="120" y2="40" stroke="var(--l-hairline-strong)" />
          <circle cx={x} cy={y + 8} r="6" fill="var(--l-surface-2)" stroke="var(--l-hairline-strong)" />
        </g>
      ))}
    </svg>
  );
}
function PilotVisual() {
  return (
    <svg width="100%" height="80" viewBox="0 0 240 80" fill="none">
      {[0, 1, 2, 3, 4].map((i) => (
        <rect key={i} x={20 + i * 42} y="20" width="32" height="40" rx="4"
          fill={i < 3 ? "var(--violet-deep)" : "var(--l-surface-2)"}
          stroke={i < 3 ? "var(--violet-deep)" : "var(--l-hairline-strong)"}
        />
      ))}
      <text x="20" y="74" fontFamily="var(--font-mono)" fontSize="9" fill="var(--l-fg-dim)" letterSpacing="0.06em">DAY 01 → 14</text>
    </svg>
  );
}
function ScaleVisual() {
  return (
    <svg width="100%" height="80" viewBox="0 0 240 80" fill="none">
      {[0, 1, 2, 3, 4].map((i) => (
        <circle key={i} cx={30 + i * 45} cy="40" r={10 + i * 2}
          fill="var(--violet-deep)" opacity={0.3 + i * 0.15} />
      ))}
    </svg>
  );
}

function IntegrationsSection() {
  return (
    <section className="light-section">
      <div className="container-wide">
        <div className="section-header">
          <div className="section-eyebrow">Integrations</div>
          <h2 className="section-title">Already speaks your <em>stack's</em> language.</h2>
        </div>
        <div className="integrations-grid">
          {INTEGRATIONS.map((i) => (
            <div key={i.name} className="integration">
              <div className={`ilogo ${i.italic ? "italic" : ""}`}>{i.logo}</div>
              <div className="iname">{i.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FounderSection() {
  return (
    <section className="light-section surface">
      <div className="container-wide">
        <div className="section-header">
          <div className="section-eyebrow">Built by operators</div>
          <h2 className="section-title">Trained by someone who's <em>actually</em> closed the books.</h2>
        </div>
        <div className="founder-card">
          <div className="founder-portrait">
            ANA · 4×5
          </div>
          <div>
            <p className="founder-quote">
              I trained these agents on the exact procedures I've run for a
              decade — step by step, the way a real finance team works.
            </p>
            <div className="founder-name">Ana Morales</div>
            <div className="founder-title">
              Finance Administration & Corporate Operations Expert ·
              Agentic AI Trainer & Orchestrator · Emotional Intelligence &
              Human Performance · AI for your Operations · EQ for your
              Leadership · Finance as your Foundation.
            </div>
            <div className="founder-creds">
              <div className="founder-cred">
                <div className="v"><em>10+ yrs</em></div>
                <div className="k">Finance & ops</div>
              </div>
              <div className="founder-cred">
                <div className="v"><em>10+ yrs</em></div>
                <div className="k">AI engineering</div>
              </div>
              <div className="founder-cred">
                <div className="v"><em>5</em></div>
                <div className="k">Trained agents</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PricingSection({ onOpenForm }) {
  const openForm = () => onOpenForm && onOpenForm();
  return (
    <section className="light-section" id="pricing">
      <div className="container-wide">
        <div className="section-header">
          <div className="section-eyebrow">Pricing</div>
          <h2 className="section-title">Hire one agent, or the <em>whole</em> roster.</h2>
          <p className="section-sub">
            Every engagement is one fixed implementation fee plus a monthly maintenance fee.
            Both are scoped to your industry and the size of your company &mdash; we'll quote
            the exact numbers after your initial consultation.
          </p>
        </div>

        <div className="pricing-grid pricing-grid--two">
          <div className="price-card">
            <div className="price-tier">Single agent</div>
            <p className="price-desc">One trained role, deployed into your stack.</p>
            <div className="price-structure">
              <div className="price-line">
                <div className="price-line-k">Implementation</div>
                <div className="price-line-v"><em>One-time</em></div>
                <div className="price-line-note">Scoped to your industry &amp; company size</div>
              </div>
              <div className="price-line">
                <div className="price-line-k">Maintenance</div>
                <div className="price-line-v"><em>Monthly</em></div>
                <div className="price-line-note">Includes hosting, training updates &amp; support</div>
              </div>
            </div>
            <ul className="price-features">
              <li>Replaces a junior AP clerk, AR clerk, payroll admin, or bookkeeper</li>
              <li>Trained on the exact SOP your role runs today</li>
              <li>Posts directly into your accounting system</li>
              <li>Handles inbound documents, approvals &amp; ledger entries</li>
              <li>Monthly business review with your finance lead</li>
            </ul>
            <button className="price-cta" onClick={openForm}>Request a quote</button>
          </div>

          <div className="price-card featured">
            <div className="price-tier">
              Full team
              <span className="badge">Most teams</span>
            </div>
            <p className="price-desc">All five agents, orchestrated. A finance back office that runs end to end.</p>
            <div className="price-structure">
              <div className="price-line">
                <div className="price-line-k">Implementation</div>
                <div className="price-line-v"><em>One-time</em></div>
                <div className="price-line-note">Scoped to your industry &amp; company size</div>
              </div>
              <div className="price-line">
                <div className="price-line-k">Maintenance</div>
                <div className="price-line-v"><em>Monthly</em></div>
                <div className="price-line-note">Includes hosting, training updates &amp; support</div>
              </div>
            </div>
            <ul className="price-features">
              <li>Five agents: AP · AR · Payroll · Bookkeeper · EFA</li>
              <li>Executes the full activities of every trained role, end to end</li>
              <li>Work routes between agents through your orchestrator</li>
              <li>Posts to your accounting system; closes the loop with vendors, customers &amp; employees</li>
              <li>Monthly business review with your finance lead</li>
            </ul>
            <button className="price-cta" onClick={openForm}>Request a quote</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTASection({ onOpenForm }) {
  const openForm = () => onOpenForm && onOpenForm();
  return (
    <section className="dark-section">
      <div className="container-wide">
        <div className="final-cta">
          <h2>Your finance team, <em>working tomorrow</em>.</h2>
          <p>14-day implementation. We set everything up with your accounting system and train your AI Finance Orchestrator.</p>
          <div className="final-cta-actions">
            <button className="btn-primary" onClick={openForm}>Start an implementation →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FooterSection() {
  return (
    <footer id="contact" className="dark-section footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{display: "flex", alignItems: "center"}}>
              <span className="brand-img-wrap brand-img-wrap--footer">
                <img src="logo.png" alt="Axana AI" className="brand-img" />
              </span>
            </div>
            <p>The first trained AI finance team. Built for AI Agentic operators in legal, hospitality, construction, and manufacturing.</p>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#agents">The team</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#pricing">Pricing</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#ana">Founder</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contact</h5>
            <ul className="footer-contact">
              <li>
                <a href="tel:+17787090837">+1 778 709 0837</a>
              </li>
              <li>
                <a href="mailto:info@axanaai.ca">info@axanaai.ca</a>
              </li>
            </ul>
            <div className="footer-social">
              <a href="https://www.instagram.com/axanaai?igsh=MTlkMnpwem13cTJ4NQ%3D%3D&utm_source=qr" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="5" />
                  <circle cx="12" cy="12" r="4" />
                  <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" />
                </svg>
              </a>
              <a href="https://www.linkedin.com/company/axanaai/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v14H.22V8zm7.5 0h4.37v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.47 3.04 5.47 7v7.44h-4.55V15.4c0-1.71-.03-3.92-2.39-3.92-2.39 0-2.76 1.87-2.76 3.79V22H7.72V8z" />
                </svg>
              </a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 AXANA AI · ALL RIGHTS RESERVED</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  AgentsSection, IndustriesSection, ROISection, HowItWorksSection,
  IntegrationsSection, FounderSection, PricingSection, FinalCTASection, FooterSection,
});