/* Kai · page sections */

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

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

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">SEO Specialist · Always on</div>
            <h1 className="hero-headline">
              Outrank your <em>competition.</em>
            </h1>
            <p className="hero-lede">
              He researches intent, drafts briefs, audits your site, and fixes technical issues. SERP-aware, AI-overview ready.
            </p>
            <div className="hero-cta-row">
              <a href={DASH_URL} className="btn btn-primary btn-lg">
                Hire Kai <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 he does</div>
          <h2 className="display display-md">
            Six jobs.<br/><em>One growth teammate.</em>
          </h2>
          <p className="lede lede-center">
            Kai handles the SEO work that lives in the margins, so your blog ranks, your site stays clean and your AI overview citations grow week after week.
          </p>
        </div>

        {/* Row 1 · Content briefs */}
        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">01</span>He researches and briefs</div>
            <h3 className="feat-title">From keyword to <em>full content brief</em>.</h3>
            <p>
              Kai scans the SERP, reads the top 10 results, the People Also Ask, the reddit
              threads. Comes back with a brief that gives your writer a real chance to win
              the page, not just a list of keywords.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Reads the top 10 SERP results and PAA</li>
              <li><span className="ic"><IconCheck/></span>Maps search intent (info, compare, buy, navigate)</li>
              <li><span className="ic"><IconCheck/></span>Drafts outline, H2s, internal links, suggested word count</li>
            </ul>
          </div>
          <div className="feat-visual">
            <LinkedInPostMock/>
          </div>
        </div>

        {/* Row 2 · Tracks rankings */}
        <div className="feat-row reverse">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">02</span>He tracks every ranking</div>
            <h3 className="feat-title">A drop on Tuesday? <em>You know by Wednesday</em>.</h3>
            <p>
              Kai watches your keywords daily, spots the shifts, finds the cause: a Google
              update, a new competitor, a broken page, an AI overview that took your spot.
              You get the diagnosis, not just a red arrow.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Daily rank check across your top 200 keywords</li>
              <li><span className="ic"><IconCheck/></span>Diagnoses the cause: update, content, technical</li>
              <li><span className="ic"><IconCheck/></span>Tracks AI overview citations and zero-click impact</li>
            </ul>
          </div>
          <div className="feat-visual alt">
            <CalendarMock/>
          </div>
        </div>

        {/* Row 3 · Technical audits */}
        <div className="feat-row">
          <div className="feat-copy">
            <div className="feat-num"><span className="n">03</span>He fixes the site</div>
            <h3 className="feat-title">Crawl errors, <em>opened as tickets</em>.</h3>
            <p>
              Slow pages, broken canonicals, missing meta, orphan pages. Kai audits weekly,
              opens a Linear ticket per real issue with the exact fix and the priority,
              not a 300 page PDF nobody will read.
            </p>
            <ul className="feat-bullets">
              <li><span className="ic"><IconCheck/></span>Weekly crawl with Lighthouse and your favourite tools</li>
              <li><span className="ic"><IconCheck/></span>Linear ticket per real issue, ranked by impact</li>
              <li><span className="ic"><IconCheck/></span>Opens PRs for content changes (titles, meta, schema)</li>
            </ul>
          </div>
          <div className="feat-visual deep">
            <DMReplyMock/>
          </div>
        </div>

        {/* Plus strip */}
        <div className="feat-plus">
          <div className="feat-plus-label">Plus, he also</div>
          <div className="feat-plus-grid">
            <div className="feat-plus-item">
              <span className="ic"><IconPen/></span>
              <div>
                <h4>Builds internal links</h4>
                <p>Surfaces orphan pages, proposes links from related posts.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconChart/></span>
              <div>
                <h4>Optimizes for AI overviews</h4>
                <p>Spots which queries trigger AI overviews and how to be cited.</p>
              </div>
            </div>
            <div className="feat-plus-item">
              <span className="ic"><IconMail/></span>
              <div>
                <h4>Reaches out for backlinks</h4>
                <p>Finds linkable assets, drafts polite outreach, follows up.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* MISSIONS */
const MISSIONS = [
  { I: IconPen,      t: "Drafts content briefs",          p: "Reads the top 10 SERP, PAA, reddit. Outline, H2s, internal links, intent. Writer-ready.",         tags: ["Briefs", "Outline"] },
  { I: IconChart,    t: "Tracks ranks daily",              p: "Top 200 keywords, daily. Diagnoses every shift: algo update, competitor, technical, AI overview.", tags: ["GSC", "Ahrefs"] },
  { I: IconArrow,    t: "Runs technical audits",           p: "Weekly crawl. One Linear ticket per real issue, ranked by impact, with the exact fix.",            tags: ["Lighthouse", "Crawl"] },
  { I: IconChat,     t: "Builds internal linking",         p: "Spots orphan pages, surfaces missed linking opportunities, opens PRs to add them.",                tags: ["Links"] },
  { I: IconMail,     t: "Outreaches for backlinks",        p: "Finds linkable assets, drafts polite outreach, follows up. No spam, only relevant publishers.",   tags: ["Outreach"] },
  { I: IconCalendar, t: "Optimizes for AI overviews",      p: "Tracks which queries trigger AI overviews, how often you are cited, how to win more citations.",   tags: ["AI search"] },
];

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>SEO sheet.</em>
          </h2>
          <p className="lede lede-center">
            Everything Kai 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">
            He covers the SEO work of an $85K senior specialist, for the price of a coffee subscription.
          </p>
        </div>

        <div className="stat-strip">
          <div className="stat-strip-cell">
            <div className="v"><em>$7.1K</em></div>
            <div className="l">Saved per month</div>
            <div className="s">vs a senior SEO specialist</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">15<span className="unit">min</span></div>
            <div className="l">From keyword to brief</div>
            <div className="s">Down from 4 to 6 hours</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">200<span className="unit">×</span></div>
            <div className="l">Keywords tracked daily</div>
            <div className="s">Every shift diagnosed</div>
          </div>
          <div className="stat-strip-cell">
            <div className="v">0<span className="unit">×</span></div>
            <div className="l">PDF audits nobody reads</div>
            <div className="s">Tickets in Linear, not in your inbox</div>
          </div>
        </div>

        <div className="compare">
          <div className="cmp-row head">
            <div className="cmp-cell">Capability</div>
            <div className="cmp-cell col-aria">Kai</div>
            <div className="cmp-cell">SEO specialist</div>
            <div className="cmp-cell">Agency</div>
          </div>
          {[
            ["Monthly cost",          "from $49 /mo",                                                                       "$7,100 loaded",                                                "$3K to $10K retainer"],
            ["Drafts a brief in",     "15 minutes",                                                                          "4 to 6 hours",                                                 "2 to 5 days"],
            ["Tracks 200+ keywords",  <span className="cmp-mark yes"><IconCheck/> Daily</span>,                                <span className="cmp-mark no">Weekly review</span>,             <span className="cmp-mark no">Monthly report</span>],
            ["Opens tickets for fixes", <span className="cmp-mark yes"><IconCheck/> In Linear, ranked by impact</span>,        "300 page PDF",                                                 "Quarterly deck"],
            ["AI overview coverage",  <span className="cmp-mark yes"><IconCheck/> Tracks and optimizes</span>,                <span className="cmp-mark no">Learning</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: "A juicy keyword just opened up.",
    trigger: "GSC shows new impressions for 'AI sales agent for HubSpot', barely any clicks.",
    outcome: "Brief delivered in 15 min. Article ranking page 1 within 6 weeks.",
    actions: [
      "Pulls the top 10 SERP results, reads each one, summarises what works",
      "Maps the dominant intent (compare, in this case) and the PAA questions",
      "Drafts outline, H2s, suggested word count, target features (FAQ, comparison table)",
      "Lists the 8 internal links to add and the 3 external sources to cite",
      "Drops the brief in Notion, tagged 'high priority, ready for writer'",
    ],
    mockKind: "slack",
  },
  {
    when: "Wednesday · 09:00",
    title: "A money keyword just dropped from #2 to #7.",
    trigger: "Daily rank check fires: 'gat hr coordinator' lost 5 positions overnight.",
    outcome: "Diagnosis in 6 minutes. Fix shipped same day. Position recovered by Friday.",
    actions: [
      "Compares yesterday's SERP with today's, spots the new competitor in P1",
      "Crawls the new winner, finds the angle (better PAA coverage, fresher schema)",
      "Audits your page: missing FAQ schema, two broken internal links",
      "Opens a Linear ticket with the exact diff and an estimated impact",
      "Adds the AI overview citation strategy to the brief for the rewrite",
    ],
    mockKind: "alert",
  },
  {
    when: "Friday · 14:30",
    title: "Lighthouse score is sliding.",
    trigger: "Performance dropped from 92 to 78 on the pricing page after a marketing tag was added.",
    outcome: "Score back to 91 by Monday. PR opened with the exact CSP and image fixes.",
    actions: [
      "Runs the audit, identifies the heavy script and the unoptimised hero image",
      "Tests the impact of lazy-loading and image compression on a staging branch",
      "Opens a PR with the changes, requests a review from the frontend lead",
      "Updates the brief for the pricing page with new internal link recommendations",
    ],
    mockKind: "case",
  },
  {
    when: "Continuous",
    title: "AI overviews quietly taking your clicks.",
    trigger: "5 of your top 20 keywords now trigger an AI overview. Clicks down 12%.",
    outcome: "3 articles re-optimised. AI overview cites your domain on 4 of the 5.",
    actions: [
      "Tracks which queries trigger AI overviews and whether you are cited",
      "Identifies the citation patterns (structured answers, clear stats, definitions)",
      "Re-optimises the existing articles with answer-first structure",
      "Reports weekly on AI overview share of voice in your category",
    ],
    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>seo-kai</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)' }}>Kai</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 Kai 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 = ["Search Console", "Ahrefs", "Semrush", "Linear", "WordPress", "Slack", "Notion", "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">
            He works inside Slack and your CMS as a real teammate. Reads from Search Console, Ahrefs and your analytics, posts daily ranking updates and weekly SEO digests. 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: "Overnight ranks reviewed",   c: "Search Console" },
  { t: "10:00", a: "Brief delivered to writer",  c: "Notion" },
  { t: "13:00", a: "Technical fixes ticketed",   c: "Linear" },
  { t: "15:30", a: "Internal links updated",     c: "WordPress" },
  { t: "18:00", a: "Weekly SEO digest 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>three rankings recovered, two briefs delivered.</em>
          </h2>
          <p className="lede lede-center">Five moments. Two hundred keywords watched.</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">
            He optimizes <em>like a senior SEO.</em>
          </h2>
          <p className="lede lede-center">
            He learns from your past content, your brand voice and your ranking history. You stay in control of every page that ships.
          </p>
        </div>

        <div className="pers-grid">
          <div className="pers-card">
            <h3>What he'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>Read the SERP and write briefs your writer can use</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Track 200+ keywords daily and diagnose shifts</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Open Linear tickets ranked by real impact</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Optimize for AI overviews and zero-click queries</li>
              <li className="yes"><span className="ic"><IconCheck/></span>Outreach politely for relevant backlinks</li>
            </ul>
          </div>
          <div className="pers-card">
            <h3>What he'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>Build link farms, PBNs or any spammy outreach</li>
              <li className="no"><span className="ic"><IconX/></span>Stuff keywords or write for the bot, not the reader</li>
              <li className="no"><span className="ic"><IconX/></span>Use AI to mass-publish thin content</li>
              <li className="no"><span className="ic"><IconX/></span>Buy or trade links</li>
              <li className="no"><span className="ic"><IconX/></span>Promise rankings on a fixed date (it's still SEO)</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. Kai ships Kai delivers his first content brief before you finish your coffee.
          </p>
        </div>
        <a href={DASH_URL} className="btn btn-on-cyan">
          Hire Kai · 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">
            Kai starts in <em>4 minutes.</em>
          </h2>
          <p className="lede lede-center">
            Connect your channels, upload 5 sample posts, set guardrails. She writes Kai delivers his first content brief before you finish your coffee.
          </p>
        </div>

        <div className="price-card">
          <div>
            <div className="price-tier">SaaS · Entry tier</div>
            <h3 className="price-name">Kai · SEO Specialist</h3>
            <p className="price-sub">Less than your Ahrefs seat. Replaces a senior SEO.</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 Search Console, Ahrefs, Semrush</li>
              <li><span className="ic"><IconCheck/></span>Daily rank tracking on 200+ keywords</li>
              <li><span className="ic"><IconCheck/></span>Trained on your past content and ranking history</li>
              <li><span className="ic"><IconCheck/></span>Linear tickets per real issue, not PDF reports</li>
              <li><span className="ic"><IconCheck/></span>AI overview tracking and optimisation</li>
            </ul>
            <a href={DASH_URL} className="btn btn-primary btn-lg">
              Hire Kai now <IconArrow size={15} className="arrow"/>
            </a>
          </div>

          <div className="price-side">
            <h4>What you save</h4>
            <ul>
              <li><span>Senior SEO specialist (loaded)</span><b>$7,100/mo</b></li>
              <li><span>SEO agency retainer</span><b>$3K to $10K/mo</b></li>
              <li><span>Ahrefs / Semrush seat</span><b>$199/mo</b></li>
              <li><span>Content brief tool</span><b>$80/seat</b></li>
              <li className="total"><span>Net annual saving</span><b>$120K</b></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* FAQ */
const FAQS = [
  { q: "Will he just spam AI-generated articles?",
    a: "No. Kai writes briefs, not articles. Your writers (or your Aria) write the content from his briefs, in your voice, with your judgement. He flags thin content and refuses to publish for the sake of volume. Quality and search intent always win over wordcount." },
  { q: "Does he handle the link outreach himself?",
    a: "He drafts the outreach: finds relevant publishers, identifies a real reason to link, writes the email. You approve it before it goes out, or you can pre-approve a daily cap. He never buys, trades, or spams." },
  { q: "How does he track AI overviews?",
    a: "He runs daily checks on your top queries, captures the AI overview text and citations, and tracks whether your domain appears. He learns the patterns that get cited (structured answers, clear stats, definitions) and adjusts your content accordingly." },
  { q: "What SEO tools does he plug into?",
    a: "Native integration with Google Search Console, Ahrefs, Semrush, Screaming Frog, Lighthouse. For your CMS, he writes to WordPress, Webflow and Ghost. For tickets, Linear, Jira or Notion. Your data stays in your tools." },
  { q: "Can he work alongside my SEO agency?",
    a: "Yes. Kai handles the volume work (briefs, daily tracking, technical tickets) while your agency keeps the strategy and the high-touch outreach. Most teams use Kai to cut their agency retainer in half." },
  { 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 he 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.KaiSections = {
  Nav, Hero, FeatureRows, Missions, ROI, UseCases, Integrations, DayInLife,
  Personality, MidCTA, Pricing, FAQ, Footer,
};