/* Iris · page sections */

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

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

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">Admin Assistant · Always on</div>
            <h1 className="hero-headline">
              Inbox to zero. Calendar <em>tidy.</em>
            </h1>
            <p className="hero-lede">
              She triages your inbox, schedules meetings, processes expense reports, and files documents. Quietly, every day.
            </p>
            <div className="hero-cta-row">
              <a href={DASH_URL} className="btn btn-primary btn-lg">
                Hire Iris <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 inbox at zero.</em>
          </h2>
          <p className="lede lede-center">
            Iris handles the inbox and calendar work that swallows your week, so you stay on what matters: building, selling, leading.
          </p>
        </div>

        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">01</span>She triages your inbox</div>
            <h3 className="feat-title">From 200 unread to <em>zero</em>.</h3>
            <p>Iris reads every email, sorts by urgency, replies to anything routine in your voice, flags only what needs you. Newsletters archived, calendar invites accepted, follow-ups scheduled.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Replies to routine emails in your tone</li>
              <li><span className="ic"><IconCheck/></span>Archives newsletters, automates filters</li>
              <li><span className="ic"><IconCheck/></span>Surfaces the 3 emails that actually need you</li>
            </ul>
          </div>
          <div className="feat-visual"><LinkedInPostMock/></div>
        </div>

        <div className="feat-row reverse">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">02</span>She owns your calendar</div>
            <h3 className="feat-title">No more <em>'find a time'</em> threads.</h3>
            <p>Iris reads your priorities, your meeting style, your travel days. Books across time zones, sends prep notes, reschedules without drama. Blocks deep work time so it actually happens.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Books across time zones, no double-booking</li>
              <li><span className="ic"><IconCheck/></span>Sends a one-line prep note before every meeting</li>
              <li><span className="ic"><IconCheck/></span>Protects your deep-work blocks</li>
            </ul>
          </div>
          <div className="feat-visual alt"><CalendarMock/></div>
        </div>

        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">03</span>She handles the admin glue</div>
            <h3 className="feat-title">Expenses, receipts, <em>logistics</em>.</h3>
            <p>Iris reads receipts, codes them, files them. Books travel within your policy. Tracks subscriptions, reminds you of contract renewals. The work that adds up to a full day per week, gone.</p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Expense reports filed, receipts coded</li>
              <li><span className="ic"><IconCheck/></span>Travel booked within your policy</li>
              <li><span className="ic"><IconCheck/></span>Subscriptions audited, renewals tracked</li>
            </ul>
          </div>
          <div className="feat-visual deep"><DMReplyMock/></div>
        </div>

        <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>Drafts thoughtful notes</h4>
                <p>Birthday cards, thank-you notes, references. Personal, never templated.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Researches and books</h4>
                <p>Restaurants, gifts, doctors, repairs. Within your taste.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Keeps your to-do list moving</h4>
                <p>Reminds you about what slipped, escalates what stalled.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* MISSIONS */
const MISSIONS = [
  { I: IconMail      , t: "Triages your inbox", p: "Replies to routine in your voice, archives noise, surfaces the 3 emails that need you.", tags: ['Email', 'Filters'] },
  { I: IconCalendar  , t: "Owns your calendar", p: "Books across time zones, sends prep notes, protects deep-work blocks.", tags: ['Calendar', 'TZ-aware'] },
  { I: IconChart     , t: "Handles expenses", p: "Reads receipts, codes them, files reports. No more shoebox at month-end.", tags: ['Expenses'] },
  { I: IconArrow     , t: "Books travel", p: "Flights, hotels, restaurants. Within your policy and your taste.", tags: ['Travel'] },
  { I: IconPen       , t: "Drafts notes", p: "Birthday cards, thank-yous, references. Personal, not templated.", tags: ['Cards'] },
  { I: IconChat      , t: "Tracks subscriptions", p: "Audits SaaS, cancels unused, flags price hikes before they renew.", tags: ['Subscriptions'] },
];

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>admin assistant sheet.</em>
          </h2>
          <p className="lede lede-center">
            Everything Iris 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 admin work of a $60K executive assistant, for the price of a coffee subscription.
          </p>
        </div>

        <div className="stat-strip">
          <div className="stat-strip-cell">
            <div className="v"><em>$5K</em></div>
            <div className="l">Saved per month</div>
            <div className="s">vs an executive assistant</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">8h</div>
            <div className="l">Reclaimed weekly</div>
            <div className="s">A full day back to building</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">0</div>
            <div className="l">Newsletters in your face</div>
            <div className="s">She archives the noise</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">100</div>
            <div className="l">Receipts filed monthly</div>
            <div className="s">No more shoebox</div>
          </div>
          </div>

        <div className="compare">
          <div className="cmp-row head">
            <div className="cmp-cell">Capability</div>
            <div className="cmp-cell col-aria">Iris</div>
            <div className="cmp-cell">Executive assistant</div>
            <div className="cmp-cell">Agency</div>
          </div>
          {[
            ["Monthly cost", "from $49 /mo", "$5,000 loaded", "$2K to $5K retainer"],
            ["Replies after hours", <span className="cmp-mark yes"><IconCheck/> Always</span>, <span className="cmp-mark no">Office hours</span>, <span className="cmp-mark no">Office hours</span>],
            ["First reply in", "60 seconds", "30 to 60 minutes", "next business day"],
            ["Books travel within policy", <span className="cmp-mark yes"><IconCheck/> Yes</span>, <span className="cmp-mark yes"><IconCheck/> Yes</span>, <span className="cmp-mark no">Out of scope</span>],
            ["Handles expense filing", <span className="cmp-mark yes"><IconCheck/> Every receipt</span>, <span className="cmp-mark yes"><IconCheck/> Most receipts</span>, <span className="cmp-mark no">Out of scope</span>],
            ["Scale 5× tomorrow", <span className="cmp-mark yes"><IconCheck/> Yes</span>, "Hire again", "Renegotiate"],
          ].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: "200 emails after a weekend off-grid.",
    trigger: "180 archived (newsletters, notifications), 17 replied in your tone (intros, FAQs), 3 surfaced with full context for your decision.",
    outcome: "Inbox at zero. 3 emails surfaced.",
    actions: [
      "Reads every email, classifies by sender and intent",
      "Archives newsletters and automated alerts",
      "Replies in your voice to intros and routine asks",
      "Surfaces the 3 emails that actually need a decision",
    ],
    mockKind: "slack",
  },
  {
    when: "Wednesday · 11:08",
    title: "You need to meet 4 people across 3 time zones this week.",
    trigger: "Reads everyone's calendar (Paris, NYC, Singapore), proposes slots that respect your deep-work blocks.",
    outcome: "All 4 booked in 8 minutes, briefs sent, deep-work blocks intact.",
    actions: [
      "Proposes 3 real slots per meeting across the right time zones",
      "Sends each invite with a one-line prep note",
      "Blocks 90 min deep-work before each meeting",
      "Reschedules in 2 clicks if anything moves",
    ],
    mockKind: "alert",
  },
  {
    when: "Friday · 14:30",
    title: "Quarterly expense report due Monday.",
    trigger: "Iris reads every receipt, matches to a calendar event or a project, files in the right account.",
    outcome: "47 receipts coded and filed in 12 min. Report draft ready for your sign-off.",
    actions: [
      "Reads PDF, JPEG and email receipts via OCR",
      "Codes each line to the right account",
      "Matches to a project or a calendar event when relevant",
      "Compiles the report from your template, ready to sign",
    ],
    mockKind: "case",
  },
  {
    when: "Continuous",
    title: "Subscriptions piling up, half of them unused.",
    trigger: "Iris audits every recurring charge against actual usage.",
    outcome: "$640/mo saved. Two duplicate tools cancelled. Three renewals renegotiated.",
    actions: [
      "Cross-references charges with logins, seats and active use",
      "Flags duplicates and unused subscriptions",
      "Drafts the cancellation or downgrade email",
      "Warns 14 days before any renewal with proposed action",
    ],
    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>admin-iris</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)' }}>Iris</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 Iris 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 = ["Gmail", "Calendar", "Brex", "Notion", "Slack", "Concur", "Airbnb", "Stripe"];

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 inbox, calendar and Slack as a real teammate. Reads from your travel tool, expense card and subscription tracker. 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: "07:30", a: "Overnight inbox triaged", c: "Gmail" },
  { t: "09:00", a: "Calendar lined up", c: "Calendar" },
  { t: "12:00", a: "Receipts coded", c: "Brex" },
  { t: "15:30", a: "Travel booked", c: "Airbnb" },
  { t: "18:00", a: "Tomorrow brief sent", 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>nothing on your plate but real work.</em>
          </h2>
          <p className="lede lede-center">Five moments. Eight hours back to you.</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 runs <em>your day like your best chief of staff.</em>
          </h2>
          <p className="lede lede-center">
            She learns from your sent folder, your past calendar and your standard answers. You stay in control of every send.
          </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>Reply to routine emails in your voice</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Protect your deep-work blocks</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Book travel within your policy</li>
              <li className="yes"><span className="ic"><IconCheck/></span>File every receipt, every month</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Track every subscription and renewal</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>Send anything that misrepresents you</li>
              <li className="no"><span className="ic"><IconX/></span>Move money or pay vendors without you</li>
              <li className="no"><span className="ic"><IconX/></span>Decline a high-priority meeting on her own</li>
              <li className="no"><span className="ic"><IconX/></span>Share personal details outside your circle</li>
              <li className="no"><span className="ic"><IconX/></span>Use a stiff "best regards" tone when you would not</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. Iris ships Iris hits inbox zero before you finish your coffee.
          </p>
        </div>
        <a href={DASH_URL} className="btn btn-on-cyan">
          Hire Iris · 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">
            Iris starts in <em>4 minutes.</em>
          </h2>
          <p className="lede lede-center">
            Connect your channels, upload 5 sample posts, set guardrails. She writes Iris hits inbox zero before you finish your coffee.
          </p>
        </div>

        <div className="price-card">
          <div>
            <div className="price-tier">SaaS · Entry tier</div>
            <h3 className="price-name">Iris · Admin Assistant</h3>
            <p className="price-sub">Less than a meal kit subscription. Replaces an executive assistant.</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 Gmail, Outlook, Google and Microsoft Calendar</li>
              <li><span className="ic"><IconCheck/></span>Reads receipts from Brex, Ramp, Stripe, email</li>
              <li><span className="ic"><IconCheck/></span>Books travel within your policy</li>
              <li><span className="ic"><IconCheck/></span>Audits and tracks every subscription</li>
              <li><span className="ic"><IconCheck/></span>Daily brief and weekly inbox digest</li>
            </ul>
            <a href={DASH_URL} className="btn btn-primary btn-lg">
              Hire Iris now <IconArrow size={15} className="arrow"/>
            </a>
          </div>

          <div className="price-side">
            <h4>What you save</h4>
            <ul>
              <li><span>Executive assistant (loaded)</span><b>$5,000/mo</b></li>
              <li><span>Subscription audit savings (avg)</span><b>$640/mo</b></li>
              <li><span>Expense filing software</span><b>$60/seat</b></li>
              <li><span>Concierge / travel service</span><b>$200/mo</b></li>
              <li className="total"><span>Net annual saving</span><b>$72K</b></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ */
const FAQS = [
  { q: "Does she reply on my behalf?",
    a: "Yes, for the routine ones (intros, FAQs, scheduling). For anything sensitive, she drafts and you approve. You can change the autonomy level per sender or topic at any time." },
  { q: "How does she know my tone?",
    a: "She reads your sent folder, your past replies and your voice guide. After a week she sounds like you. Every edit you make trains her permanently." },
  { q: "Can she move money or book travel?",
    a: "She books travel within the rules you set (max nightly rate, preferred airlines, no red-eyes). Payments go through your existing card or company travel tool. She never initiates a wire." },
  { q: "What about my personal life mixed with work?",
    a: "Two separate inboxes if you want, with separate rules. Personal stays personal: she will never share details from your personal calendar in a work brief." },
  { q: "Can she coordinate with my human EA?",
    a: "Yes. Iris handles the volume work (filtering, expense, routine replies) while your EA keeps the high-touch, sensitive items. Most teams use Iris to give their EA back 60% of their time." },
  { 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.IrisSections = {
  Nav, Hero, FeatureRows, Missions, ROI, UseCases, Integrations, DayInLife,
  Personality, MidCTA, Pricing, FAQ, Footer,
};