/* Noa · page sections */

const {
  IconArrow, IconCheck, IconX, IconChevron, IconMenu, IconClose,
  IconPen, IconCalendar, IconChat, IconChart, IconMail, IconSend,
  IconLinkedinBrand, IconXBrand,
} = window.NoaIcons;

const {
  HeroComposition, LinkedInPostMock, CalendarMock, DMReplyMock, ScenarioMock, BrandLogo, PORTRAIT_SRC,
} = window.NoaMocks;

const DASH_URL = "https://dash.geta.team/";
const LOGO_SRC = "../images/logo.png";

/* NAV (with mobile drawer) */
function Nav() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <React.Fragment>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="../" className="nav-brand">
            <img src={LOGO_SRC} alt=""/>
            <span>Geta<span className="dot-cyan">.Team</span></span>
          </a>
          <div className="nav-links">
            <a href="../#solutions">Solutions</a>
            <a href="../pricing.html">Pricing</a>
            <a href="../#docs">Docs</a>
            <a href="../about.html">About</a>
          </div>
          <div className="nav-cta">
            <a href={DASH_URL} className="btn btn-ghost btn-sm">Log in</a>
            <a href={DASH_URL} className="btn btn-primary btn-sm">Start free trial</a>
            <button className="nav-burger" aria-label="Open menu" onClick={() => setOpen(true)}>
              <IconMenu/>
            </button>
          </div>
        </div>
      </nav>

      <div className={`mobile-scrim ${open ? 'open' : ''}`} onClick={() => setOpen(false)}/>
      <aside className={`mobile-drawer ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div className="mobile-drawer-head">
          <a href="../" className="nav-brand">
            <img src={LOGO_SRC} alt=""/>
            <span>Geta<span className="dot-cyan">.Team</span></span>
          </a>
          <button className="mobile-drawer-close" aria-label="Close menu" onClick={() => setOpen(false)}>
            <IconClose/>
          </button>
        </div>
        <nav>
          <a href="../#solutions" onClick={() => setOpen(false)}>Solutions</a>
          <a href="../pricing.html" onClick={() => setOpen(false)}>Pricing</a>
          <a href="../#docs" onClick={() => setOpen(false)}>Docs</a>
          <a href="../about.html" onClick={() => setOpen(false)}>About</a>
        </nav>
        <div className="mobile-drawer-cta">
          <a href={DASH_URL} className="btn btn-outline">Log in</a>
          <a href={DASH_URL} className="btn btn-primary">Start free trial</a>
        </div>
      </aside>
    </React.Fragment>
  );
}

/* HERO */
function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <a href="../#employees" className="hero-back">← All AI employees</a>
        <div className="hero-grid">
          <div>
            <div className="eyebrow dot">Financial Analyst · Always on</div>
            <h1 className="hero-headline">
              Books closed. Board pack <em>ready.</em>
            </h1>
            <p className="hero-lede">
              She reconciles invoices, chases AR, prepares your monthly board pack, and flags anomalies. Stripe, QuickBooks, Excel.
            </p>
            <div className="hero-cta-row">
              <a href={DASH_URL} className="btn btn-primary btn-lg">
                Hire Noa <IconArrow size={15} className="arrow"/>
              </a>
              <span className="hero-trust">
                <span className="dot"/> Ready in 4 minutes · 3-day free trial
              </span>
            </div>
          </div>
          <HeroComposition/>
        </div>
      </div>
    </section>
  );
}

/* FEATURE ROWS */
function FeatureRows() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">What she does</div>
          <h2 className="display display-md">
            Six jobs.<br/><em>One finance teammate.</em>
          </h2>
          <p className="lede lede-center">
            Noa handles the finance work that piles up before month-end, so your books close on time and your board pack ships before the weekend.
          </p>
        </div>

        {/* Row 1 · Reconcile */}
        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">01</span>She reconciles every transaction</div>
            <h3 className="feat-title">Books closed by <em>day three</em>.</h3>
            <p>
              Stripe payouts, bank deposits, invoices. Noa matches every line. When something
              doesn't tie out, she opens the receipt, finds the dispute or fee, and either
              fixes it or flags it with one paragraph of context.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Matches Stripe, bank and accounting line by line</li>
              <li><span className="ic"><IconCheck/></span>Handles fees, refunds, disputes automatically</li>
              <li><span className="ic"><IconCheck/></span>Flags only the cases that need your call</li>
            </ul>
          </div>
          <div className="feat-visual">
            <LinkedInPostMock/>
          </div>
        </div>

        {/* Row 2 · AR chase */}
        <div className="feat-row reverse">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">02</span>She chases every unpaid invoice</div>
            <h3 className="feat-title">DSO down, <em>without burning relationships</em>.</h3>
            <p>
              Polite reminders 3 days before due, 1 day after, 7 days after. Different tone
              for a customer you love versus one who is dodging. Noa knows the difference and
              never sends the same robotic template twice.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Different tone per customer based on history</li>
              <li><span className="ic"><IconCheck/></span>Escalates at 30, 60 and 90 days with a clear note</li>
              <li><span className="ic"><IconCheck/></span>Updates HubSpot and your CRM with payment status</li>
            </ul>
          </div>
          <div className="feat-visual alt">
            <CalendarMock/>
          </div>
        </div>

        {/* Row 3 · Board pack */}
        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">03</span>She builds your board pack</div>
            <h3 className="feat-title">Friday afternoon, <em>not Sunday night</em>.</h3>
            <p>
              Revenue, churn, CAC, runway, variance to plan. Noa pulls the numbers, writes
              the one page narrative, and flags the three things your board will ask about.
              You review and send.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>KPIs, variance and commentary in one page</li>
              <li><span className="ic"><IconCheck/></span>Highlights anomalies before the board does</li>
              <li><span className="ic"><IconCheck/></span>Drafts the email to your board, ready to send</li>
            </ul>
          </div>
          <div className="feat-visual deep">
            <DMReplyMock/>
          </div>
        </div>

        {/* Plus strip */}
        <div className="feat-plus">
          <div className="feat-plus-label">Plus, she also</div>
          <div className="feat-plus-grid">
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Codes vendor invoices</h4>
                <p>Reads the PDF, codes to the right account, routes for approval.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconChart/></span>
              <div>
                <h4>Spots anomalies first</h4>
                <p>Unusual spend, missing subscription, double charge. You hear about it from Noa.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconMail/></span>
              <div>
                <h4>Builds the cash flow forecast</h4>
                <p>13 week rolling forecast, refreshed every Monday morning.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* MISSIONS */
const MISSIONS = [
  { I: IconChart,    t: "Reconciles every transaction",   p: "Stripe, bank, accounting. Matches line by line. Flags only what truly needs your call.",         tags: ["Stripe", "Bank"] },
  { I: IconMail,     t: "Chases unpaid invoices",          p: "Polite reminders at 3 days before, 1 day after, 7 days after. Tone adapted to the customer.",   tags: ["AR", "Dunning"] },
  { I: IconPen,      t: "Codes vendor invoices",           p: "Reads the PDF, codes to the right account, routes to the right approver, files it cleanly.",     tags: ["AP", "Coding"] },
  { I: IconCalendar, t: "Builds your board pack",          p: "KPIs, variance, runway and commentary. One page, ready by Friday afternoon.",                    tags: ["Reports"] },
  { I: IconArrow,    t: "Spots anomalies first",           p: "Unusual spend, missing subscription, double charge, fraud signal. You hear about it from Noa.",  tags: ["Anomalies"] },
  { I: IconChat,     t: "Refreshes the cash forecast",     p: "13 week rolling forecast, refreshed Monday morning. Scenarios on demand.",                       tags: ["Forecast"] },
];

function Missions() {
  return (
    <section className="section bg-canvas">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Full scope</div>
          <h2 className="display display-md">
            The complete <em>finance sheet.</em>
          </h2>
          <p className="lede lede-center">
            Everything Noa handles, without supervision.
          </p>
        </div>

        <div className="miss-grid">
          {MISSIONS.map((m, i) => (
            <div className="miss-cell" key={i}>
              <div className="ic"><m.I/></div>
              <h3>{m.t}</h3>
              <p>{m.p}</p>
              <div className="miss-tags">{m.tags.map(t => <span className="miss-tag" key={t}>{t}</span>)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ROI */
function ROI() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">ROI</div>
          <h2 className="display display-md">
            The math is <em>uncomfortable.</em>
          </h2>
          <p className="lede lede-center">
            She covers the bookkeeping and analyst work of a $95K senior financial analyst, for the price of a coffee subscription.
          </p>
        </div>

        <div className="stat-strip">
          <div className="stat-strip-cell">
            <div className="v"><em>$7.9K</em></div>
            <div className="l">Saved per month</div>
            <div className="s">vs a senior financial analyst</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">3<span className="unit">d</span></div>
            <div className="l">Month-end close</div>
            <div className="s">Down from 8 to 12 days</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">22<span className="unit">%</span></div>
            <div className="l">DSO improvement</div>
            <div className="s">Polite, persistent, never robotic</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">0<span className="unit">×</span></div>
            <div className="l">Sunday night board packs</div>
            <div className="s">Ready by Friday afternoon</div>
          </div>
        </div>

        <div className="compare">
          <div className="cmp-row head">
            <div className="cmp-cell">Capability</div>
            <div className="cmp-cell col-aria">Noa</div>
            <div className="cmp-cell">Financial analyst</div>
            <div className="cmp-cell">Agency</div>
          </div>
          {[
            ["Monthly cost",           "from $49 /mo",                                                                       "$7,900 loaded",                                                "$5K to $15K retainer"],
            ["Closes books by day 3",  <span className="cmp-mark yes"><IconCheck/> Every month</span>,                       <span className="cmp-mark no">Day 8 to 12</span>,              <span className="cmp-mark no">Quarterly close</span>],
            ["Reconciliation in",      "minutes per batch",                                                                  "hours per batch",                                              "outsourced"],
            ["Knows your chart of accounts", <span className="cmp-mark yes"><IconCheck/> Trained on your history</span>,    "Re-learns each onboarding",                                    "Generic playbook"],
            ["AR chasing tone",        <span className="cmp-mark yes"><IconCheck/> Adapted per customer</span>,              "Same template for all",                                        "Outsourced collections"],
            ["Anomaly detection",      <span className="cmp-mark yes"><IconCheck/> Real-time</span>,                          "On the next review",                                          "Quarterly audit"],
          ].map((row, i) => (
            <div className="cmp-row" key={i}>
              <div className="cmp-cell">{row[0]}</div>
              <div className="cmp-cell col-aria">{row[1]}</div>
              <div className="cmp-cell">{row[2]}</div>
              <div className="cmp-cell">{row[3]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* USE CASES */
const USE_CASES = [
  {
    when: "Monday · 09:14",
    title: "A Stripe payout doesn't match the invoice.",
    trigger: "$48,250 expected, $47,180 landed. $1,070 unexplained.",
    outcome: "Reconciled in 11 minutes. Two refunds, one chargeback, all coded correctly.",
    actions: [
      "Pulls the Stripe payout details, line by line",
      "Matches each charge with the invoice in QuickBooks",
      "Spots two refunds (already approved) and a chargeback to investigate",
      "Codes refunds to the right account, opens a ticket for the chargeback",
      "Sends you a one paragraph summary of what was off and how it was fixed",
    ],
    mockKind: "slack",
  },
  {
    when: "Wednesday · 10:00",
    title: "Three invoices are 40 days overdue.",
    trigger: "$22K in AR aging into the 60 day bucket. Two enterprise, one SMB.",
    outcome: "Two paid within a week. One escalated with full context to your CSM.",
    actions: [
      "Reads the customer history: contract value, last touch, payment pattern",
      "Drafts three different reminders: warm for the long-time customer, firm for the dodger",
      "Schedules the second touch in 5 days, escalation to CSM at day 60",
      "Updates HubSpot deal records and your AR aging report in real time",
    ],
    mockKind: "alert",
  },
  {
    when: "Friday · 14:30",
    title: "Board pack due Monday morning.",
    trigger: "12 KPIs to refresh, variance to plan, one page narrative.",
    outcome: "Draft ready by Friday 6 pm. You review Saturday morning, send Sunday evening.",
    actions: [
      "Pulls revenue, churn, CAC, runway, net new ARR from Stripe and your accounting tool",
      "Compares actuals to your plan, highlights the variances over 5%",
      "Drafts the one page narrative with three things the board will likely ask about",
      "Builds the deck from your template, ready to skim and adjust",
    ],
    mockKind: "case",
  },
  {
    when: "Continuous",
    title: "Anomalies caught before you notice.",
    trigger: "A SaaS subscription doubled from $390 to $780. A vendor invoice arrived twice.",
    outcome: "Flagged in Slack within 10 minutes. Saved $1,170 in two clicks.",
    actions: [
      "Watches every recurring charge, every vendor invoice, every Stripe metric",
      "Detects unusual spend, missing payments, double charges, fraud signals",
      "Sends a short Slack note with the anomaly, the context and the suggested action",
      "Once you confirm, contacts the vendor or files the dispute on your behalf",
    ],
    mockKind: "dm",
  },
];

function UseCaseMock({ kind }) {
  if (kind === "dm") return <DMReplyMock/>;
  if (kind === "alert") {
    return (
      <ScenarioMock
        header={<React.Fragment>
          <div className="mock-title"><span className="channel-tag" style={{ background: 'var(--gt-fg-1)' }}>!</span>TechCrunch alert</div>
          <div className="mock-time">09:14</div>
        </React.Fragment>}
      >
        <div style={{ font: '600 14.5px/1.4 var(--gt-font)', color: 'var(--gt-fg-1)', marginBottom: 10 }}>
          Northstar AI raises $40M Series B
        </div>
        <div style={{ font: '400 13px/1.5 var(--gt-font)', color: 'var(--gt-fg-3)', marginBottom: 14 }}>
          The competitor in your space announced new funding led by a16z, valuing them at $300M.
        </div>
        <div style={{ background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, padding: 12, font: '400 12.5px/1.45 var(--gt-font)', color: 'var(--gt-fg-1)' }}>
          <div style={{ font: '600 10.5px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 6 }}>Aria · Response plan</div>
          Drafting 1 LinkedIn post, 1 customer email, 6 personalised CRM nudges. Ready for review in 22 min.
        </div>
      </ScenarioMock>
    );
  }
  if (kind === "case") {
    return (
      <ScenarioMock
        header={<React.Fragment>
          <div className="mock-title"><span className="channel-tag" style={{ background: '#ec4899' }}>S</span>Sephora · Case study</div>
          <div className="mock-time">Day 1 → Day 8</div>
        </React.Fragment>}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            ["Day 1", "Reply sent, interview booked"],
            ["Day 3", "30-min interview · auto-transcribed"],
            ["Day 5", "900-word draft · your review"],
            ["Day 7", "3 quote snippets · 60-sec social cut"],
            ["Day 8", <React.Fragment><b style={{ color: 'var(--gt-cyan)' }}>Live</b> · co-promoted with Sephora</React.Fragment>],
          ].map((row, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', alignItems: 'center', padding: '8px 12px', borderRadius: 8, background: i === 4 ? 'var(--gt-cyan-tint)' : '#f8fafb' }}>
              <span style={{ font: '600 11px/1 var(--gt-font-mono)', color: 'var(--gt-cyan)' }}>{row[0]}</span>
              <span style={{ font: '400 13px/1.4 var(--gt-font)', color: 'var(--gt-fg-1)' }}>{row[1]}</span>
            </div>
          ))}
        </div>
      </ScenarioMock>
    );
  }
  /* slack default */
  return (
    <ScenarioMock
      header={<React.Fragment>
        <div className="mock-title"><span className="channel-tag">#</span>finance-noa</div>
        <div className="mock-time">17:42</div>
      </React.Fragment>}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'flex', gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: 5, background: '#fde68a', color: '#92400e', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', font: '700 10px/1 var(--gt-font)' }}>L</div>
          <div>
            <div style={{ font: '600 11.5px/1 var(--gt-font)', marginBottom: 4 }}>Lena <span style={{ fontWeight: 400, color: 'var(--gt-fg-4)', fontSize: 10 }}>17:42</span></div>
            <div style={{ font: '400 13px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>Heads up, we're shipping v2 at 9am Saturday. Need a launch.</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <img src={PORTRAIT_SRC} alt="" style={{ width: 24, height: 24, borderRadius: 5 }}/>
          <div>
            <div style={{ font: '600 11.5px/1 var(--gt-font)', marginBottom: 4 }}><span style={{ color: 'var(--gt-cyan)' }}>Noa</span> <span style={{ fontWeight: 400, color: 'var(--gt-fg-4)', fontSize: 10 }}>17:43</span></div>
            <div style={{ font: '400 13px/1.5 var(--gt-font)', color: 'var(--gt-fg-1)' }}>On it. Pulling v2 notes from GitHub + 3 user interviews. Sequence ready by 20:30.</div>
            <div style={{ marginTop: 8, background: 'var(--gt-cyan-tint)', border: '1px solid rgba(8,145,176,0.18)', borderRadius: 10, padding: '10px 12px', font: '400 12px/1.5 var(--gt-font)' }}>
              <div style={{ font: '600 10px/1 var(--gt-font)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gt-cyan)', marginBottom: 5 }}>Plan</div>
              <div>• 18 posts across 3 platforms<br/>• 4-email waitlist sequence (2,400 ppl)<br/>• 40 pre-staged comment replies</div>
            </div>
          </div>
        </div>
      </div>
    </ScenarioMock>
  );
}

function UseCases() {
  const [open, setOpen] = React.useState(-1);
  return (
    <section className="section bg-canvas">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Use cases</div>
          <h2 className="display display-md">
            Four moments. <em>She handles them on her own.</em>
          </h2>
          <p className="lede lede-center">
            Not demos. The situations Noa handles every week, without you chasing her.
          </p>
        </div>

        <div className="uc-stack">
          {USE_CASES.map((u, i) => {
            const reverse = i % 2 === 1;
            const isOpen = open === i;
            return (
              <div className={`uc-row ${reverse ? 'reverse' : ''}`} key={i}>
                <div className="uc-copy">
                  <div className="uc-num-when">
                    <div className="uc-num">{String(i + 1).padStart(2, '0')}</div>
                    <div className="uc-when">{u.when}</div>
                  </div>
                  <h3 className="uc-title">{u.title}</h3>
                  <p className="uc-trigger">{u.trigger}</p>
                  <div className="uc-outcome">
                    <span className="ic"><IconCheck size={16}/></span>
                    <span>{u.outcome}</span>
                  </div>
                  <button
                    className="uc-actions-toggle"
                    aria-expanded={isOpen}
                    onClick={() => setOpen(isOpen ? -1 : i)}
                  >
                    {isOpen ? "Hide the play-by-play" : "See the play-by-play"}
                    <span className="chev"><IconChevron size={14}/></span>
                  </button>
                  {isOpen && (
                    <ol className="uc-actions">
                      {u.actions.map((a, k) => <li key={k}>{a}</li>)}
                    </ol>
                  )}
                </div>
                <div className="feat-visual" style={{ aspectRatio: '1 / 0.9' }}>
                  <UseCaseMock kind={u.mockKind}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* INTEGRATIONS */
const CHANNELS = ["Stripe", "QuickBooks", "Xero", "Brex", "Gmail", "Slack", "HubSpot", "Excel"];

function Integrations() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Integrations</div>
          <h2 className="display display-md">
            Plugs into the tools <em>you already use.</em>
          </h2>
          <p className="lede lede-center">
            She works inside your accounting tool and Slack as a real teammate. Reads from Stripe, your bank feed, your AP inbox and HubSpot, posts daily updates to the team. Posts directly to your social accounts.
            Reads from your CRM, calendar, and docs.
          </p>
        </div>
        <div className="int-grid">
          {CHANNELS.map(c => (
            <div className="int-tile" key={c}>
              <BrandLogo name={c}/>
              <div className="int-name">{c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* DAY IN LIFE */
const DAY = [
  { t: "08:30", a: "Stripe payouts reconciled",  c: "Stripe" },
  { t: "10:00", a: "AR reminders sent",          c: "Gmail" },
  { t: "13:00", a: "Vendor invoices coded",      c: "QuickBooks" },
  { t: "15:30", a: "Variance review done",       c: "Excel" },
  { t: "18:00", a: "Cash snapshot posted",       c: "Slack" },
];

function DayInLife() {
  return (
    <section className="section bg-canvas">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Day in the life</div>
          <h2 className="display display-md">
            A Tuesday, <em>books closed, board pack ready.</em>
          </h2>
          <p className="lede lede-center">Five moments. Three hundred lines reconciled.</p>
        </div>
        <div className="day-track">
          <div className="day-line"/>
          <div className="day-grid">
            {DAY.map((d, i) => (
              <div className="day-cell" key={i}>
                <div className="day-bullet">{String(i + 1).padStart(2, '0')}</div>
                <div style={{ font: '500 12px/1 var(--gt-font-mono)', color: 'var(--gt-cyan)', letterSpacing: '0.04em' }}>{d.t}</div>
                <h4>{d.a}</h4>
                <div className="day-channel">{d.c}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* PERSONALITY */
function Personality() {
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Personality</div>
          <h2 className="display display-md">
            She closes <em>like your senior analyst.</em>
          </h2>
          <p className="lede lede-center">
            She learns from your chart of accounts, your customer payment patterns and your past close cycles. You stay in control of every dollar.
          </p>
        </div>

        <div className="pers-grid">
          <div className="pers-card">
            <h3>What she'll do</h3>
            <div className="sub">Default behaviours · editable in 30 seconds</div>
            <ul className="pers-list">
              <li className="yes"><span className="ic"><IconCheck/></span>Reconcile every payout against the invoice</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Adapt AR chase tone to each customer</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Code vendor invoices to the right account</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Flag anomalies in real time, not at month-end</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Build the board pack with variance commentary</li>
            </ul>
          </div>
          <div className="pers-card">
            <h3>What she'll never do</h3>
            <div className="sub">Hard guardrails · refuses, even if you ask</div>
            <ul className="pers-list">
              <li className="no"><span className="ic"><IconX/></span>Move money without your explicit approval</li>
              <li className="no"><span className="ic"><IconX/></span>Replace your CFO or your external auditor</li>
              <li className="no"><span className="ic"><IconX/></span>Send anything that looks like a collection threat</li>
              <li className="no"><span className="ic"><IconX/></span>Share P&L numbers outside your finance channel</li>
              <li className="no"><span className="ic"><IconX/></span>Re-code historical periods without your sign-off</li>
            </ul>
          </div>
        </div>

      </div>
    </section>
  );
}

/* CTA band */
function MidCTA() {
  return (
    <section className="cta-band">
      <div className="container cta-inner">
        <div className="cta-text">
          <div className="cta-eyebrow">Start today</div>
          <h2 className="cta-title">Want this Tuesday <em>for your team?</em></h2>
          <p className="cta-sub">
            No 6-month onboarding. No quarterly KPIs. Noa ships Noa reconciles her first batch before you finish your coffee.
          </p>
        </div>
        <a href={DASH_URL} className="btn btn-on-cyan">
          Hire Noa · 3-day free trial <IconArrow size={15} className="arrow"/>
        </a>
      </div>
    </section>
  );
}

/* PRICING */
function Pricing() {
  return (
    <section className="section bg-canvas" id="hire">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">Start today</div>
          <h2 className="display display-md">
            Noa starts in <em>4 minutes.</em>
          </h2>
          <p className="lede lede-center">
            Connect your channels, upload 5 sample posts, set guardrails. She writes Noa reconciles her first batch before you finish your coffee.
          </p>
        </div>

        <div className="price-card">
          <div>
            <div className="price-tier">SaaS · Entry tier</div>
            <h3 className="price-name">Noa · Financial Analyst</h3>
            <p className="price-sub">Less than your bookkeeping subscription. Replaces a senior analyst.</p>
            <div className="price-amount-row">
              <div className="price-amount"><span className="currency">$</span>49</div>
              <div className="price-per">/ month</div>
            </div>
            <ul className="price-list">
              <li><span className="ic"><IconCheck/></span>20,000 credits / month, dedicated workspace</li>
              <li><span className="ic"><IconCheck/></span>Native sync with Stripe, QuickBooks, Xero, Brex</li>
              <li><span className="ic"><IconCheck/></span>Reads invoices, receipts and bank feeds</li>
              <li><span className="ic"><IconCheck/></span>AR chase sequences tuned per customer</li>
              <li><span className="ic"><IconCheck/></span>Board pack template ready to send</li>
              <li><span className="ic"><IconCheck/></span>Real-time anomaly alerts in Slack</li>
            </ul>
            <a href={DASH_URL} className="btn btn-primary btn-lg">
              Hire Noa now <IconArrow size={15} className="arrow"/>
            </a>
          </div>

          <div className="price-side">
            <h4>What you save</h4>
            <ul>
              <li><span>Financial analyst (loaded)</span><b>$7,900/mo</b></li>
              <li><span>Outsourced bookkeeping</span><b>$1,500/mo</b></li>
              <li><span>FP&amp;A tool</span><b>$300/seat</b></li>
              <li><span>Recovered DSO (avg)</span><b>$4,000/mo</b></li>
              <li className="total"><span>Net annual saving</span><b>$130K</b></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ */
const FAQS = [
  { q: "Does she replace my accountant or my CFO?",
    a: "No. Noa handles the volume work: reconciliation, AR chasing, vendor coding, board pack drafting. Your CFO keeps strategy and your accountant keeps the year-end and the tax filings. Most teams use Noa to cut their monthly bookkeeping bill by 50 to 70%." },
  { q: "Will she move money or pay vendors automatically?",
    a: "No. She drafts, schedules, codes and routes, but she never initiates a payment. Approvals always come through your bank, Stripe or Brex with a human signature. You can pre-approve recurring vendors with a cap, but she still queues each batch for your eyes." },
  { q: "How does she sync with my accounting tool?",
    a: "Native two-way sync with QuickBooks Online, Xero, NetSuite, and Stripe. For Sage and Microsoft Dynamics she reads and writes through the API. Your accounting data stays in your system of record." },
  { q: "What about audit trail and compliance?",
    a: "Every action she takes is logged with a timestamp, the source document and the rationale. The trail is exportable in your accountant's format and meets SOC 1 and SOC 2 evidence requirements. She refuses to delete or rewrite historical periods." },
  { q: "Can she handle multi-entity or multi-currency?",
    a: "Yes. She handles consolidated reporting across multiple entities, currencies and tax jurisdictions. She uses your FX rates and your intercompany rules. For complex group reorganizations she does the heavy lift and escalates the edge cases to your controller." },
  { q: "Do I have to deal with AI API keys?",
    a: "Two options. Cloud: credits included, no separate AI bill. Self-hosted: plug in your own keys (OpenAI, Anthropic, AWS Bedrock or on-prem). You keep full control of your data." },
  { q: "How much does she really cost when I scale?",
    a: "Entry $49/mo, Solo $99/mo, Starter $179/mo. Scale tiers up to $2,499/mo. Annual saves 24% from Solo upward. Custom volume, data residency, or isolated setup: talk to sales." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section bg-soft">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow centered">FAQ</div>
          <h2 className="display display-md">
            Everything else you <em>want to ask.</em>
          </h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className="faq-item" key={i}>
              <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="chev"><IconChevron/></span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* FOOTER */
function Footer() {
  const cols = [
    { h: "Product",      links: [["Pricing","../pricing.html"], ["Solutions","../#solutions"], ["Use Cases","../#use-cases"], ["Custom LLM","../#llm"]] },
    { h: "Integrations", links: [["Slack","../#integrations"], ["WhatsApp","../#integrations"], ["Microsoft Teams","../#integrations"], ["Gmail & Outlook","../#integrations"], ["MCP Connector","../#integrations"]] },
    { h: "Resources",    links: [["Documentation","../docs.html"], ["About","../about.html"], ["Security","../security.html"], ["Support","../support.html"], ["Contact","../contact.html"]] },
    { h: "Legal",        links: [["Terms of Service","../terms.html"], ["Privacy Policy","../privacy.html"]] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="../" className="brand">
              <img src={LOGO_SRC} alt=""/>
              <span>Geta<span className="dot-cyan">.Team</span></span>
            </a>
            <p className="footer-blurb">
              AI employees that work autonomously, remember everything, and integrate with the tools you already use.
            </p>
            <div className="footer-social">
              <a href="#linkedin" aria-label="LinkedIn"><IconLinkedinBrand size={18}/></a>
              <a href="#x" aria-label="X"><IconXBrand size={16}/></a>
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <h5>{c.h}</h5>
              <ul>{c.links.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>© 2026 Geta.Team. All rights reserved.</span>
          <span>A brand of Elestio Limited, Dublin, Ireland.</span>
        </div>
      </div>
    </footer>
  );
}

window.NoaSections = {
  Nav, Hero, FeatureRows, Missions, ROI, UseCases, Integrations, DayInLife,
  Personality, MidCTA, Pricing, FAQ, Footer,
};