/* Mira · page sections */

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

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

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">Product Designer · Always on</div>
            <h1 className="hero-headline">
              Mocks, iterations, <em>handoffs.</em>
            </h1>
            <p className="hero-lede">
              She spins up UI mocks, iterates on feedback, and hands off clean specs to engineering. Figma-native, always on-brand.
            </p>
            <div className="hero-cta-row">
              <a href={DASH_URL} className="btn btn-primary btn-lg">
                Hire Mira <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 on-brand sidekick.</em>
          </h2>
          <p className="lede lede-center">
            Mira handles the design work that piles up, so your team ships faster, without dropping quality.
          </p>
        </div>

        {/* Row 1 · Mocks from a brief */}
        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">01</span>She drafts mocks from a brief</div>
            <h3 className="feat-title">Three variants, <em>ready before lunch</em>.</h3>
            <p>
              Drop a one-line ask in Slack or paste a competitor screenshot. Mira reads
              your design system, your past work, your brand, and comes back with three
              real options, not a generic template.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Uses your Figma library and your brand tokens</li>
              <li><span className="ic"><IconCheck/></span>Always three variants, with a clear trade-off note</li>
              <li><span className="ic"><IconCheck/></span>Drops the file in your project, ready to open</li>
            </ul>
          </div>
          <div className="feat-visual">
            <LinkedInPostMock/>
          </div>
        </div>

        {/* Row 2 · Iterate on feedback */}
        <div className="feat-row reverse">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">02</span>She iterates on feedback</div>
            <h3 className="feat-title">From a Slack comment to <em>a new version</em>.</h3>
            <p>
              Your PM drops a sticky note on the prototype. Mira reads it, asks one good
              clarification if needed, and posts a revised mock with the diff highlighted.
              No 'what did you mean?' loop.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Reads Figma comments, Slack threads and Linear tickets</li>
              <li><span className="ic"><IconCheck/></span>Asks one targeted question only if she really needs it</li>
              <li><span className="ic"><IconCheck/></span>Shows the diff side by side, with a short rationale</li>
            </ul>
          </div>
          <div className="feat-visual alt">
            <CalendarMock/>
          </div>
        </div>

        {/* Row 3 · Handoff to engineering */}
        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">03</span>She hands off to engineering</div>
            <h3 className="feat-title">Clean specs, <em>no back and forth</em>.</h3>
            <p>
              Mira writes the spec sheet your engineers actually want: states, edge cases,
              tokens, accessibility notes. She links it from the Linear ticket and pings
              the right engineer in Slack when it is ready.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>States, empty states, error states, all covered</li>
              <li><span className="ic"><IconCheck/></span>Tokens and component names match your codebase</li>
              <li><span className="ic"><IconCheck/></span>Accessibility checklist included by default</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>Keeps your design system tidy</h4>
                <p>Spots inconsistent components and proposes a single source of truth.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconChart/></span>
              <div>
                <h4>Reviews what shipped</h4>
                <p>Compares the implementation to the design, opens a polish ticket if needed.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconMail/></span>
              <div>
                <h4>Generates assets on demand</h4>
                <p>Icons, illustrations, social images, screenshots, all on-brand.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* MISSIONS */
const MISSIONS = [
  { I: IconPen,      t: "Drafts UI mocks from a brief",   p: "Three variants from a Slack message, a Linear ticket or a screenshot. Always on brand.", tags: ["Figma", "Variants"] },
  { I: IconChat,     t: "Iterates on feedback",            p: "Reads your comments and posts a revised mock with a clean diff. No back and forth.",         tags: ["Comments", "Diff"] },
  { I: IconArrow,    t: "Writes handoff specs",            p: "States, edge cases, tokens, accessibility. The spec your engineers actually want.",            tags: ["Specs", "A11y"] },
  { I: IconChart,    t: "Reviews what shipped",            p: "Compares the implementation to the design, opens a polish ticket if anything drifted.",         tags: ["QA", "Polish"] },
  { I: IconCalendar, t: "Keeps your design system tidy",   p: "Spots inconsistent components, proposes one source of truth, updates the library.",             tags: ["DS", "Tokens"] },
  { I: IconMail,     t: "Generates assets on demand",      p: "Icons, illustrations, social images and screenshots. All on brand, all the right format.",      tags: ["Icons", "Social"] },
];

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>design sheet.</em>
          </h2>
          <p className="lede lede-center">
            Everything Mira 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 design work that costs you a $90K product designer, for the price of a coffee subscription.
          </p>
        </div>

        <div className="stat-strip">
          <div className="stat-strip-cell">
            <div className="v"><em>$7.5K</em></div>
            <div className="l">Saved per month</div>
            <div className="s">vs a junior product designer</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">30<span className="unit">min</span></div>
            <div className="l">From brief to 3 mocks</div>
            <div className="s">No more 'I will get to it Friday'</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">5<span className="unit">×</span></div>
            <div className="l">Faster iterations</div>
            <div className="s">Same day feedback loops</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">0<span className="unit">×</span></div>
            <div className="l">Design debt</div>
            <div className="s">She keeps the system clean</div>
          </div>
        </div>

        <div className="compare">
          <div className="cmp-row head">
            <div className="cmp-cell">Capability</div>
            <div className="cmp-cell col-aria">Mira</div>
            <div className="cmp-cell">Junior designer</div>
            <div className="cmp-cell">Agency</div>
          </div>
          {[
            ["Monthly cost",         "from $49 /mo",                                                                       "$7,500 loaded",                                                "$3K to $10K 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 mock in",        "30 minutes",                                                                          "2 to 5 days",                                                  "1 to 2 weeks kickoff"],
            ["Knows your design system",<span className="cmp-mark yes"><IconCheck/> Trained on your library</span>,         "Re-learns after every churn",                                  "Generic playbook"],
            ["Handoff specs included",<span className="cmp-mark yes"><IconCheck/> Every mock</span>,                        "When asked",                                                   "Extra scope"],
            ["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: "Friday · 17:42",
    title: "Surprise feature briefed for Monday.",
    trigger: "Slack DM: 'Sales wants a quick spec for the new export modal. Demo Monday 10 am.'",
    outcome: "Three mocks in your Figma file by Saturday morning. Engineering picks one Sunday night.",
    actions: [
      "Reads the request, the last call transcript and the existing export flow",
      "Pulls the relevant components from your design system",
      "Drafts three variants (compact, with preview, with steps), each with a trade-off note",
      "Posts the file in #design with a one paragraph rationale per option",
      "Once you pick, writes the handoff spec and links it to the Linear ticket",
    ],
    mockKind: "slack",
  },
  {
    when: "Monday · 09:14",
    title: "Engineering shipped, but it does not feel right.",
    trigger: "Mira spots the difference between the design and the production version.",
    outcome: "Polish ticket opened in 5 minutes. Fixed before the customer demo.",
    actions: [
      "Compares the production build to the original Figma frame",
      "Lists the drifts: spacing, type scale, missing empty state, focus ring",
      "Opens a single Linear ticket with screenshots, severity and the exact fixes",
      "Pings the engineer in Slack with the link and the priority",
    ],
    mockKind: "alert",
  },
  {
    when: "Wednesday · 11:08",
    title: "Your design system is starting to drift.",
    trigger: "Mira finds three almost-identical button components across the codebase.",
    outcome: "One canonical Button. 14 instances updated. Library doc refreshed.",
    actions: [
      "Audits the library and the actual usage in your repo",
      "Proposes one canonical Button with all the variants documented",
      "Opens a PR with the migration plan and a codemod for engineering",
      "Updates the design system doc and posts a short Loom walkthrough",
    ],
    mockKind: "case",
  },
  {
    when: "Continuous",
    title: "On-brand assets, on demand.",
    trigger: "Marketing needs a hero image for a launch. Sales needs a slide template. Support needs an empty-state illustration.",
    outcome: "Each request answered same day, in your brand. Brand consistency stays at 100%.",
    actions: [
      "Reads the brand guide and your past assets",
      "Generates the asset (icon, illustration, social image, slide template)",
      "Exports in the right format and naming convention",
      "Drops it in the right shared drive folder, with a tagged version",
    ],
    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>design-mira</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)' }}>Mira</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 Mira 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 = ["Figma", "Linear", "Slack", "Notion", "Loom", "Miro", "GitHub", "Gmail"];

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 Slack as a real teammate. 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: "Async feedback handled",   c: "Figma" },
  { t: "10:00", a: "3 mocks for new feature",  c: "Linear" },
  { t: "13:00", a: "DS audit + 2 PRs",         c: "GitHub" },
  { t: "15:30", a: "Design review with eng",   c: "Loom" },
  { t: "18:00", a: "Handoff specs ready",      c: "Notion" },
];

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>three features shipped on-brand.</em>
          </h2>
          <p className="lede lede-center">Five moments. Twelve mocks delivered.</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 sounds <em>like you.</em>
          </h2>
          <p className="lede lede-center">
            She learns your voice from your existing content. You stay in control of every guardrail.
          </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>Use your design system as the source of truth</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Propose three variants with clear trade-offs</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Write handoff specs your engineers can read</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Include states, edge cases and accessibility notes</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Document her choices with a short rationale</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>Ship a new component outside the design system</li>
              <li className="no"><span className="ic"><IconX/></span>Skip accessibility or invent contrast values</li>
              <li className="no"><span className="ic"><IconX/></span>Push to your main Figma file without a branch</li>
              <li className="no"><span className="ic"><IconX/></span>Use stock images that contradict your brand</li>
              <li className="no"><span className="ic"><IconX/></span>Hand off a mock without specs</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. Mira ships Mira drafts her first mock before you finish your coffee.
          </p>
        </div>
        <a href={DASH_URL} className="btn btn-on-cyan">
          Hire Mira · 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">
            Mira starts in <em>4 minutes.</em>
          </h2>
          <p className="lede lede-center">
            Connect your channels, upload 5 sample posts, set guardrails. She writes Mira drafts her first mock before you finish your coffee.
          </p>
        </div>

        <div className="price-card">
          <div>
            <div className="price-tier">SaaS · Entry tier</div>
            <h3 className="price-name">Mira · Product Designer</h3>
            <p className="price-sub">Less than a single Figma seat. Replaces a junior product designer.</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 integration with Figma, Linear, Notion, Slack</li>
              <li><span className="ic"><IconCheck/></span>Trained on your design system and past files</li>
              <li><span className="ic"><IconCheck/></span>Three variants per brief, always with a rationale</li>
              <li><span className="ic"><IconCheck/></span>Full handoff specs, states and accessibility</li>
              <li><span className="ic"><IconCheck/></span>Daily progress digest in Slack</li>
            </ul>
            <a href={DASH_URL} className="btn btn-primary btn-lg">
              Hire Mira now <IconArrow size={15} className="arrow"/>
            </a>
          </div>

          <div className="price-side">
            <h4>What you save</h4>
            <ul>
              <li><span>Junior product designer (loaded)</span><b>$7,500/mo</b></li>
              <li><span>Freelance design agency</span><b>$2K to $8K/mo</b></li>
              <li><span>Stock asset subscriptions</span><b>$99/mo</b></li>
              <li><span>Async tools (Loom, Miro)</span><b>$60/seat</b></li>
              <li className="total"><span>Net annual saving</span><b>$110K</b></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ */
const FAQS = [
  { q: "Will her designs look like generic AI mockups?",
    a: "No. She uses your Figma library, your tokens and your past work as the source of truth. After a week she draws like your senior designer would, with your spacing, your type scale and your component patterns." },
  { q: "Will she ship anything without my approval?",
    a: "Your choice. From setup you pick: full autonomy, review required, or a mix. She always branches your Figma file, never touches main, and asks before publishing a new component to the library." },
  { q: "How does she connect to Figma?",
    a: "Native integration. She reads your files, comments on frames, branches your library and opens pull requests. For developer handoff she also writes to Linear and Notion. Your design data stays in the tools you already pay for." },
  { q: "What if she misses an edge case?",
    a: "Every mock comes with a handoff spec covering states, empty states, error states and accessibility. If she is not sure, she asks one targeted question rather than guessing. You can also flag any mock and she learns permanently." },
  { q: "Can she work alongside my human designers?",
    a: "Yes. Mira has her own Figma seat and Slack handle. Your team can @-mention her in a frame for an iteration. She handles the volume work; your designers keep the strategic and brand decisions." },
  { 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.MiraSections = {
  Nav, Hero, FeatureRows, Missions, ROI, UseCases, Integrations, DayInLife,
  Personality, MidCTA, Pricing, FAQ, Footer,
};