// Caliber — /ai-principles page body. V2.
// Philosophy page: what we believe about AI in recruiting, what AI does in
// Caliber, what AI never will. Grounded in the Honest AI position from the
// homepage (honest-ai-section.jsx).
//
// Accuracy enforced per HOMEPAGE-AUDIT-PLAN.md §S18 + the V2 research
// synthesis in AI-PRINCIPLES-V2-PLAN.md — only ships claims that are built
// today or explicitly marked "coming."
//
// Exports: <AIPrinciplesPage />

const AIP_MONO = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';

/* ──────────────────────────────────────────────────────────────
   THE RESEARCH — 5 stats, same as homepage Honest AI section.
   ────────────────────────────────────────────────────────────── */
const AIP_STATS = [
  {
    n: '66%',
    body: <>of candidates won't apply to jobs that use <b>AI in hiring decisions.</b></>,
    cite: { label: 'Pew Research, 2023', href: 'https://www.pewresearch.org/internet/2023/04/20/americans-views-on-use-of-ai-in-hiring/' },
  },
  {
    n: '71%',
    body: <>oppose AI making the <b>final hiring call.</b></>,
    cite: { label: 'Pew Research, 2023', href: 'https://www.pewresearch.org/internet/2023/04/20/americans-views-on-use-of-ai-in-hiring/' },
  },
  {
    n: '↑',
    body: <><b>Cost-per-hire and time-to-hire</b> are both up in the last three years. The same three years your competitors bought AI.</>,
    cite: { label: 'SHRM, 2025', href: 'https://www.shrm.org/topics-tools/news/hr-trends/recruitment-is-broken' },
  },
  {
    n: '78%',
    body: <>of recruiting execs expect candidates to increasingly <b>use AI to apply.</b> Bots applying to bots.</>,
    cite: { label: 'SHRM, 2025', href: 'https://www.shrm.org/topics-tools/news/hr-trends/recruitment-is-broken' },
  },
  {
    n: '45%',
    body: <>of recruiters blame <b>burnout on repetitive admin.</b> Not hard conversations. Admin.</>,
    cite: { label: 'Recruiterflow, 2026', href: 'https://recruiterflow.com/blog/future-of-ai-in-recruitment/' },
  },
];

/* ──────────────────────────────────────────────────────────────
   WHAT AI DOES — Scout-no-ranking leads. JD drafts added.
   ────────────────────────────────────────────────────────────── */
const AIP_DOES = [
  {
    t: 'Searches, it doesn\'t rank.',
    b: 'Scout turns your plain-English brief into a structured search across 2.4 billion public profiles and returns everyone who matches — sorted by profile completeness, not by a model\'s opinion. No "93% match" badges. No black-box ranking. You see exactly what Scout searched for, and you do the sorting.',
  },
  {
    t: 'Turns plain English into a search.',
    b: 'Type "senior accountant in Auckland with Xero experience." Scout breaks it into a structured brief across 7 dimensions — job title, skills, location, industry, current and previous employers, plus a LinkedIn toggle — and runs it. No boolean strings, no search syntax.',
  },
  {
    t: 'Reads CVs into records.',
    b: 'Drop a CV into Caliber. AI pulls out name, current role, employer, location, skills and work history, and builds the candidate record for you. You check the fields and save.',
  },
  {
    t: 'Drafts a job advert.',
    b: 'Give it a role name and a few must-haves. AI writes the first draft of the advert — structure, tone, bullet points. You edit everything before it goes anywhere near a job board.',
  },
  {
    t: 'Pulls structure from mess.',
    b: 'Candidate history, company names, dates and titles land as structured fields you can filter and sort. The mess of PDFs, email threads and LinkedIn exports becomes a database you can actually query.',
  },
];

/* ──────────────────────────────────────────────────────────────
   WHAT AI NEVER DOES — 6 items, consolidated from 8.
   Ranking / scoring / cultural-fit-prediction merged as one category.
   Screening / auto-rejection merged as one.
   ────────────────────────────────────────────────────────────── */
const AIP_NEVER = [
  {
    t: 'Ranks, scores, or predicts fit.',
    b: 'No "% match" badges, no fit scores, no cultural-fit prediction, no retention risk models. A ranking hides the reasoning, trains recruiters out of reading people, and buries the gem — the candidate a model thinks is "73% match" is often the best hire in the list. Brookings 2024 found race bias of 85% vs 8.6% in LLM-ranked hiring screens. Cultural-fit is candidate ranking in a trench coat; the EU AI Act classifies it as high-risk. We won\'t build any of it.',
    cite: { label: 'Brookings, 2024', href: 'https://www.brookings.edu/articles/gender-race-and-intersectional-bias-in-ai-resume-screening-via-language-model-retrieval/' },
  },
  {
    t: 'Screens candidates out before you see them.',
    b: '66% of candidates won\'t apply to roles that use AI in hiring decisions. The ones who apply know and disengage. We will not filter anyone out of your pipeline — not for generic bias reasons, and not because a model thinks their CV was written by AI. If we ever ship CV-authenticity signals, they\'ll be flags for a human to check, never auto-rejections.',
  },
  {
    t: 'Replies to candidates pretending to be you.',
    b: 'The best candidates can tell. The ones who can\'t tell feel worse when they find out later. Every outreach message in Caliber is read by a human before a human sends it. Autonomous AI-to-candidate chat is not on our roadmap at any point.',
  },
  {
    t: 'Decides a placement.',
    b: "A placement is a judgment call on someone's next decade. That judgment belongs to the recruiter and the hiring manager sitting across from each other — not to a model optimising for click-through on a resume.",
  },
  {
    t: 'Scores a video interview.',
    b: 'Reading faces to predict job performance is pseudoscience dressed as data. A recruiter can\'t audit what the model saw. A candidate can\'t know what was held against them. The bias research on video-AI vendors is damning and we\'ve read it.',
  },
  {
    t: 'Watches individuals for behavioural signals.',
    b: 'Tracking a person\'s calendar, LinkedIn activity or login patterns to predict when they\'ll quit crosses a line. Market-signal sourcing — that company laid off 200 people, probably a good time to reach out — is fine. Watching individuals is surveillance.',
  },
];

/* ──────────────────────────────────────────────────────────────
   COMING — 8 items, with category + icon for visual variety.
   Categories: admin (AI that types), sourcing (Scout extensions),
   business (agency ops), controls (user-facing toggles).
   ────────────────────────────────────────────────────────────── */
const AIP_COMING = [
  { t: 'Outreach drafting.',              icon: 'send',      cat: 'admin',     b: 'First draft written from the role and candidate. You edit and send.' },
  { t: 'Candidate history summaries.',    icon: 'doc',       cat: 'admin',     b: 'Three years of notes compressed to four lines. Every line links back to the source record.' },
  { t: 'JD drafts from kick-off calls.',  icon: 'mic',       cat: 'admin',     b: 'Built from the hiring-manager call transcript, not from scratch.' },
  { t: 'Pipeline metadata auto-fill.',    icon: 'filter',    cat: 'admin',     b: 'Source, seniority, salary band, visa status — pulled from the CV and call, confirmed by you.' },
  { t: 'Talent rediscovery.',             icon: 'sparkles',  cat: 'sourcing',  b: "Caliber notices when a past candidate changes jobs or picks up a skill that matches an open role, and pings you." },
  { t: 'Recruiter-voice outreach.',       icon: 'users',     cat: 'sourcing',  b: 'Drafts fine-tuned on your past sent messages — so AI-written sounds like you, not ChatGPT.' },
  { t: 'Desk forecasting.',               icon: 'zap',       cat: 'business',  b: 'Which deals close this quarter, based on pipeline velocity and historical patterns. Not a score — a view.' },
  { t: 'Right to turn it off.',           icon: 'lock',      cat: 'controls',  b: 'Per-user, per-feature AI controls in settings. Want Caliber with AI off? It will be a toggle.' },
];

/* ──────────────────────────────────────────────────────────────
   NOT COMING — strong-never commitments on the roadmap side.
   Each item has a short "why not" for variety.
   ────────────────────────────────────────────────────────────── */
const AIP_NOT_COMING = [
  { t: 'Automated candidate ranking / "% match" scores', why: 'Buries the gem. Bias on autopilot.' },
  { t: 'Video-interview scoring or facial analysis',     why: 'Pseudoscience, unauditable, bias-laden.' },
  { t: 'Autonomous outreach that sends without review',  why: 'Candidates can tell. A human sends.' },
  { t: 'AI-to-candidate chatbots in your voice',         why: "The moment they realise, you've lost." },
  { t: 'Cultural-fit or retention prediction models',    why: 'Ranking in a trench coat.' },
  { t: 'Behavioural surveillance of individual candidates', why: 'Crosses a line. Not sourcing.' },
  { t: 'Auto-rejection of "AI-generated" CVs',           why: 'False positives. First lawsuit, inevitable.' },
];

/* Category pill colors for the roadmap. */
const CAT_STYLES = {
  admin:    { label: 'Admin',    bg: 'var(--cal-blue-50)',       color: 'var(--cal-blue-ink)',   border: 'rgba(0,9,182,0.14)' },
  sourcing: { label: 'Sourcing', bg: '#FFF1E9',                  color: 'var(--cal-accent-ink)', border: 'rgba(255,106,61,0.22)' },
  business: { label: 'Business', bg: 'var(--cal-green-soft)',    color: '#166534',               border: '#BBF7D0' },
  controls: { label: 'Controls', bg: '#F3F4F6',                  color: 'var(--cal-muted)',      border: '#E5E7EB' },
};

/* ──────────────────────────────────────────────────────────────
   TRUST LAYER — "The fine print" commitments.
   ────────────────────────────────────────────────────────────── */
const AIP_TRUST = [
  {
    t: "Your data isn't training data.",
    b: <>OpenAI's API <b>has not used customer data to train models since March 2023</b>. We're applying for their Zero Data Retention tier on top — when that's approved, nothing we send is retained at all.</>,
    status: 'in progress',
  },
  {
    t: 'Who we use under the hood.',
    b: <>Caliber's AI runs on <b>OpenAI's API</b> today. We're evaluating Anthropic Claude for some features. We'll tell you here when that changes.</>,
    status: null,
  },
  {
    t: 'Where your data is processed.',
    b: <>US-region OpenAI endpoints today. We're working toward <b>region-matched processing</b> — UK for UK customers, Australia for AU and NZ customers. No specific timeline; we'll update this page when a region goes live.</>,
    status: 'direction',
  },
  {
    t: 'Why Scout matched who it did.',
    b: <>Scout shows the brief it ran: every dimension it searched on, in the order of the search. <b>No hidden score. No model-opinion step.</b> If a result surprises you, you can see exactly why it was there.</>,
    status: null,
  },
  {
    t: 'Audit trail.',
    b: <>Every Scout search and every AI action — CV parsed, summary written, JD drafted — is logged with who, when and what. Visible to the workspace owner. Exportable.</>,
    status: null,
  },
  {
    t: 'Right to turn it off.',
    b: <>Per-user, per-feature AI controls are on the roadmap. If you want Caliber today with AI off, <a href="mailto:martin@caliberjobs.com" style={{ color: 'var(--cal-blue-ink)', textDecoration: 'underline' }}>email Martin</a> — we'll turn everything except CV parsing off for your workspace by hand.</>,
    status: 'coming soon',
  },
  {
    t: 'One human owns this.',
    b: <>Martin Ryan, founder. <a href="mailto:martin@caliberjobs.com" style={{ color: 'var(--cal-blue-ink)', textDecoration: 'underline' }}>martin@caliberjobs.com</a>. If Scout surfaces a bad match, an AI drafts something wrong, or you spot anything that looks like bias in the product — email him. He reads every one.</>,
    status: null,
  },
];

/* ──────────────────────────────────────────────────────────────
   AOTEAROA — per-user-per-year trees model.
   ────────────────────────────────────────────────────────────── */
const AOTEAROA_STATS = [
  { n: '5',      label: 'native trees per user, per year' },
  { n: '0.44 t', label: 'CO2 sequestered per tree, over 50 years' },
  { n: '4.4×',   label: 'over the defensible per-user footprint' },
];

/* ──────────────────────────────────────────────────────────────
   Small atoms.
   ────────────────────────────────────────────────────────────── */
function DoesCheck() {
  return (
    <span aria-hidden style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 22, height: 22, borderRadius: 999,
      background: 'rgba(22,163,74,0.12)', color: '#16A34A',
      fontSize: 13, fontWeight: 700, flexShrink: 0,
    }}>✓</span>
  );
}
function NeverCross() {
  return (
    <span aria-hidden style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 22, height: 22, borderRadius: 999,
      background: 'rgba(255,106,61,0.14)', color: 'var(--cal-accent-ink)',
      fontSize: 13, fontWeight: 700, flexShrink: 0,
    }}>✕</span>
  );
}

/* Accordion row — title always visible, body collapses on click.
   Titles read as scannable headlines; body text is optional detail. */
function AccordionItem({ kind, title, body, cite, defaultOpen = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  const Icon = kind === 'does' ? DoesCheck : NeverCross;
  return (
    <div style={{
      borderBottom: '1px solid var(--cal-line-2)',
    }}>
      <button
        onClick={() => setOpen((v) => !v)}
        style={{
          width: '100%', textAlign: 'left',
          background: 'transparent', border: 'none',
          padding: '14px 0', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 14,
          fontFamily: 'inherit', color: 'inherit',
        }}
        aria-expanded={open}
      >
        <Icon />
        <span style={{
          flex: 1,
          fontSize: 15.5, fontWeight: 500, color: 'var(--cal-ink)',
          letterSpacing: '-0.01em', lineHeight: 1.3,
        }}>{title}</span>
        <span aria-hidden style={{
          fontSize: 14, color: 'var(--cal-muted-2)',
          transform: open ? 'rotate(180deg)' : 'rotate(0)',
          transition: 'transform .2s ease',
          flexShrink: 0,
        }}>⌄</span>
      </button>
      {open && (
        <div style={{
          padding: '0 0 16px 36px',
          fontSize: 14, lineHeight: 1.6, color: 'var(--cal-body)',
          textWrap: 'pretty',
          animation: 'cal-fade-up 0.2s ease',
        }}>
          {body}
          {cite && (
            <a href={cite.href} target="_blank" rel="noopener noreferrer" style={{
              display: 'inline-block', marginTop: 8,
              fontSize: 10.5, color: 'var(--cal-muted-2)', fontFamily: AIP_MONO,
              letterSpacing: '0.04em', textDecoration: 'underline',
              textDecorationColor: 'var(--cal-line)', textUnderlineOffset: 3,
            }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--cal-ink)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--cal-muted-2)'; }}>
              Source: {cite.label} ↗
            </a>
          )}
        </div>
      )}
    </div>
  );
}

/* ══════════════════════════════════════════════════════════════
   HERO — warm-cream.
   ══════════════════════════════════════════════════════════════ */
function AIPHero() {
  return (
    <section style={{
      background: 'var(--cal-bg-warm)',
      marginTop: -128,
      padding: '208px 72px 64px',
      borderBottom: '1px solid var(--cal-line-2)',
    }}>
      <div className="cal-container">
        <div style={{ maxWidth: 960 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
            The Honest AI Position
          </div>
          <h1 style={{
            margin: '0 0 22px',
            fontSize: 'clamp(44px, 5.2vw, 76px)',
            fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02,
            color: 'var(--cal-ink)',
          }}>
            AI does the admin.{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>You do the hiring.</span>
          </h1>
          <p style={{
            margin: 0, fontSize: 19, lineHeight: 1.55,
            color: 'var(--cal-body)', maxWidth: 900, textWrap: 'pretty',
          }}>
            This is our position on AI in recruiting. What Caliber's AI will do. What it won't. The research behind both, what you can see it doing inside the product, and the one story every agency owner should read before buying an AI screener.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   WHY — white. Editorial argument + Eubanks pull quote.
   ══════════════════════════════════════════════════════════════ */
function AIPWhy() {
  return (
    <section style={{ background: 'var(--cal-bg-warm)', padding: '88px 72px' }}>
      <div className="cal-container">
        <div style={{ maxWidth: 960, marginBottom: 40 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <span className="dot" /> Our argument
          </div>
          <h2 style={{
            margin: '0 0 24px',
            fontSize: 'clamp(40px, 4.5vw, 64px)',
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
          }}>
            The problem isn't AI.{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>
              It's where AI is pointed.
            </span>
          </h2>
          <div style={{
            fontSize: 18, lineHeight: 1.65, color: 'var(--cal-body)',
            display: 'flex', flexDirection: 'column', gap: 16, textWrap: 'pretty',
            maxWidth: 960,
          }}>
            <p style={{ margin: 0 }}>
              Almost every recruiting tool built in the last three years points AI at the candidate. At their CV. At their reply. At their face during a video interview. At the screening stage, deciding in silence whether they get through.
            </p>
            <p style={{ margin: 0 }}>
              Two-thirds of the people you want to hire have now decided they won't apply to jobs that do this. Cost-per-hire and time-to-hire are up in the same three years the industry spent buying these tools. The market ran the experiment. The result is in. Pointing AI at the candidate makes the funnel worse, not better.
            </p>
            <p style={{ margin: 0 }}>
              We think there's a better target. Every recruiter we know loses an hour a day to typing — re-keying CVs, building boolean strings, reformatting candidate histories, filling out pipeline metadata. That hour is what burns people out, and none of it is the part candidates came to you for. Point AI there. Leave the humans to the bit that is actually human.
            </p>
          </div>
        </div>

        <figure style={{
          margin: 0, padding: '32px 0 4px',
          borderTop: '1px solid var(--cal-line)',
          maxWidth: 1000,
        }}>
          <blockquote style={{
            margin: 0,
            fontFamily: '"Fraunces", "Times New Roman", serif',
            fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(24px, 2.4vw, 34px)',
            lineHeight: 1.3, color: 'var(--cal-ink)',
            letterSpacing: '-0.015em',
          }}>
            "There is no future where candidates using AI to beat AI creates a better outcome for hiring."
          </blockquote>
          <figcaption style={{
            marginTop: 18, fontSize: 13.5, color: 'var(--cal-muted)',
            letterSpacing: '0.01em',
          }}>
            — Ben Eubanks, Chief Research Officer, Lighthouse Research &amp; Advisory
          </figcaption>
        </figure>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   RESEARCH — soft-gray. 5-cell stat wall.
   ══════════════════════════════════════════════════════════════ */
function AIPResearch() {
  return (
    <section style={{ background: '#fff', padding: '88px 72px' }}>
      <div className="cal-container">
        <div style={{ maxWidth: 960, marginBottom: 36 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <span className="dot" /> The research
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)',
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
          }}>
            Five numbers every agency owner{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>should sit with.</span>
          </h2>
          <p style={{
            margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--cal-body)',
            maxWidth: 860, textWrap: 'pretty',
          }}>
            These five stats shaped the position on this page. Every source is linked — read them yourself, then decide whether you agree with the direction we've taken.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
          border: '1px solid var(--cal-line)', borderRadius: 18,
          overflow: 'hidden', background: '#fff',
        }}>
          {AIP_STATS.map((s, i) => (
            <div key={i} style={{
              padding: '28px 22px 24px',
              borderRight: i < 4 ? '1px solid var(--cal-line-2)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ fontSize: 10, color: 'var(--cal-muted-2)', letterSpacing: '0.12em', fontFamily: AIP_MONO, fontWeight: 500 }}>0{i + 1}</div>
              <div style={{ fontFamily: AIP_MONO, fontSize: 'clamp(32px, 3.5vw, 52px)', fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.95, color: 'var(--cal-ink)', fontFeatureSettings: '"tnum"' }}>{s.n}</div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--cal-body)', flex: 1, textWrap: 'pretty' }}>{s.body}</div>
              <a href={s.cite.href} target="_blank" rel="noopener noreferrer" style={{
                fontSize: 10, letterSpacing: '0.04em', color: 'var(--cal-muted-2)',
                fontFamily: AIP_MONO,
                borderTop: '1px solid var(--cal-line-2)', paddingTop: 8,
                textDecoration: 'underline', textDecorationColor: 'var(--cal-line)',
                textUnderlineOffset: 3,
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--cal-ink)'; e.currentTarget.style.textDecorationColor = 'var(--cal-ink)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--cal-muted-2)'; e.currentTarget.style.textDecorationColor = 'var(--cal-line)'; }}>
                Source: {s.cite.label} ↗
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   COMMITMENTS — soft-gray. Does / Never 2-col with collapsible items.
   Titles always visible for scannability; bodies expand on click.
   ══════════════════════════════════════════════════════════════ */
function AIPCommitments() {
  return (
    <section style={{ background: 'var(--cal-bg-soft)', padding: '88px 72px' }}>
      <div className="cal-container">
        <div style={{ maxWidth: 940, marginBottom: 40 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <span className="dot" /> The commitments
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)',
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
          }}>
            What AI does here.{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>What it doesn't.</span>
          </h2>
          <p style={{
            margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--cal-body)',
            maxWidth: 900, textWrap: 'pretty',
          }}>
            Two lists, both scannable. Tap any line to read why. The left column is what Caliber's AI does today. The right is what it won't do — not as "we haven't built that yet," but as products we won't ship at any point in the future.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {/* DOES — header outside the card */}
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              marginBottom: 12, paddingLeft: 4,
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: '#166534', fontWeight: 600, fontFamily: AIP_MONO,
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: 999, background: '#16A34A',
                boxShadow: '0 0 0 3px rgba(22,163,74,0.18)',
              }} />
              What AI does in Caliber
            </div>
            <div style={{
              background: '#fff',
              border: '1px solid var(--cal-line)', borderRadius: 18,
              padding: '8px 28px 10px',
              boxShadow: 'var(--shadow-sm)',
            }}>
              {AIP_DOES.map((c, i) => (
                <AccordionItem key={c.t} kind="does" title={c.t} body={c.b} defaultOpen={i === 0} />
              ))}
            </div>
          </div>

          {/* NEVER — header outside the card */}
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              marginBottom: 12, paddingLeft: 4,
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--cal-accent-ink)', fontWeight: 600, fontFamily: AIP_MONO,
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: 999, background: 'var(--cal-accent)',
                boxShadow: '0 0 0 3px rgba(255,106,61,0.22)',
              }} />
              What AI never does in Caliber
            </div>
            <div style={{
              background: '#fff',
              border: '1px solid var(--cal-line)', borderRadius: 18,
              padding: '8px 28px 10px',
              boxShadow: 'var(--shadow-sm)',
            }}>
              {AIP_NEVER.map((c, i) => (
                <AccordionItem key={c.t} kind="never" title={c.t} body={c.b} cite={c.cite} defaultOpen={i === 0} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   DEMOS — soft-gray. Show the AI-does list in action.
   ══════════════════════════════════════════════════════════════ */
function AIPDemoSection() {
  return (
    <section style={{ background: '#fff', padding: '88px 72px' }}>
      <div className="cal-container">
        <div style={{ maxWidth: 960, marginBottom: 36 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <span className="dot" /> See it yourself
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)',
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
          }}>
            What it actually{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>looks like.</span>
          </h2>
          <p style={{
            margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--cal-body)',
            maxWidth: 860, textWrap: 'pretty',
          }}>
            Three things AI does in Caliber, running right here. Click through them — Scout searching 2.4 billion profiles, AI drafting a job advert, AI parsing a CV into a candidate record. No ranking, no black box, no chatbot.
          </p>
        </div>

        <AIPDemos />
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   AMAZON — dark #06082C. Cautionary tale.
   ══════════════════════════════════════════════════════════════ */
function AIPAmazon() {
  return (
    <section style={{
      background: '#06082C', color: '#fff',
      padding: '88px 72px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="cal-noise" />
      <div className="cal-container" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 960, marginBottom: 32 }}>
          <div className="cal-eyebrow" style={{
            background: 'rgba(255,255,255,0.04)', color: 'rgba(255,255,255,0.85)',
            border: '1px solid rgba(255,255,255,0.12)', marginBottom: 22,
          }}>
            <span className="dot" style={{ background: 'var(--cal-accent)', boxShadow: '0 0 0 3px rgba(255,106,61,0.22)' }} />
            Cautionary tale
          </div>
          <h2 style={{
            margin: 0, color: '#fff',
            fontSize: 'clamp(36px, 4vw, 56px)',
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.06,
          }}>
            Amazon built an AI recruiter.{' '}
            <span style={{ color: 'var(--cal-accent)', fontWeight: 500 }}>
              It taught itself to reject women.
            </span>
          </h2>
        </div>

        <div style={{
          maxWidth: 960,
          display: 'flex', flexDirection: 'column', gap: 18,
          fontSize: 18, lineHeight: 1.65,
          color: 'rgba(255,255,255,0.82)', textWrap: 'pretty',
        }}>
          <p style={{ margin: 0 }}>
            In 2014, Amazon's engineering team in Edinburgh set out to automate resume screening. They trained a model on ten years of resumes submitted to Amazon, and asked it to rate new candidates from one to five stars. By the following year, the engineers noticed a pattern: the model was systematically downgrading women.
          </p>
          <p style={{ margin: 0 }}>
            The problem wasn't malice. The model had learned, correctly, that the historical set of hired candidates at Amazon was dominated by men. So it started penalising resumes that included the word
            <span style={{ color: '#fff', fontWeight: 500 }}> "women's"</span>{' '}
            — as in
            <span style={{ color: '#fff', fontWeight: 500 }}> "women's chess club captain."</span>{' '}
            It downgraded graduates of two all-women's colleges. Amazon's team tried to fix it. They edited out the obvious proxies, but could never guarantee the model wasn't finding subtler ones. In 2017, they shut it down.
          </p>
          <p style={{ margin: 0 }}>
            Every AI trained on historical hiring data inherits the biases in that data.{' '}
            <span style={{
              fontFamily: '"Fraunces", "Times New Roman", serif',
              fontStyle: 'italic', fontWeight: 500,
              color: 'var(--cal-accent)',
            }}>
              Yours is no exception.
            </span>
          </p>
        </div>

        <div style={{
          marginTop: 40, paddingTop: 20,
          borderTop: '1px solid rgba(255,255,255,0.12)',
          display: 'flex', gap: 24, flexWrap: 'wrap',
          fontSize: 12, color: 'rgba(255,255,255,0.5)',
          fontFamily: AIP_MONO, letterSpacing: '0.04em',
        }}>
          <a href="https://www.reuters.com/article/world/insight-amazon-scraps-secret-ai-recruiting-tool-that-showed-bias-against-women-idUSKCN1MK0AG/"
             target="_blank" rel="noopener noreferrer"
             style={{ color: 'rgba(255,255,255,0.65)', textDecoration: 'underline', textDecorationColor: 'rgba(255,255,255,0.2)', textUnderlineOffset: 3 }}>
            Source: Reuters, October 2018 ↗
          </a>
          <span>Why it matters: most recruiting AI still trains on your own hiring history. Same risk, smaller blast radius.</span>
        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   TRUST LAYER — "The fine print." Follows Amazon.
   ══════════════════════════════════════════════════════════════ */
function AIPTrust() {
  return (
    <section style={{ background: '#fff', padding: '88px 72px' }}>
      <div className="cal-container">
        <div style={{ maxWidth: 960, marginBottom: 36 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <span className="dot" /> The fine print
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)',
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
          }}>
            What we'll{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>put in writing.</span>
          </h2>
          <p style={{
            margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--cal-body)',
            maxWidth: 900, textWrap: 'pretty',
          }}>
            Philosophy is cheap. Contractual and technical commitments are not. Here's what Caliber is already doing, what's in progress, and who to email if any of it breaks.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {AIP_TRUST.map((item) => (
            <div key={item.t} style={{
              background: '#fff',
              border: '1px solid var(--cal-line)',
              borderRadius: 18,
              padding: '24px 26px 22px',
              boxShadow: 'var(--shadow-sm)',
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                justifyContent: 'space-between',
              }}>
                <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--cal-ink)', letterSpacing: '-0.01em' }}>
                  {item.t}
                </div>
                {item.status && (
                  <span style={{
                    fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
                    fontFamily: AIP_MONO, fontWeight: 600,
                    color: item.status === 'in progress' ? 'var(--cal-accent-ink)' :
                           item.status === 'coming soon' ? 'var(--cal-blue-ink)' :
                           'var(--cal-muted-2)',
                    background: item.status === 'in progress' ? 'rgba(255,106,61,0.08)' :
                                item.status === 'coming soon' ? 'var(--cal-blue-50)' :
                                'var(--cal-bg-soft)',
                    border: item.status === 'in progress' ? '1px solid rgba(255,106,61,0.22)' :
                            item.status === 'coming soon' ? '1px solid rgba(0,9,182,0.14)' :
                            '1px solid var(--cal-line-2)',
                    padding: '3px 8px', borderRadius: 999,
                    whiteSpace: 'nowrap', flexShrink: 0,
                  }}>{item.status}</span>
                )}
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--cal-body)', textWrap: 'pretty' }}>
                {item.b}
              </div>
            </div>
          ))}
        </div>

        {/* Regulatory footer */}
        <div style={{
          marginTop: 32,
          padding: '20px 24px',
          background: 'var(--cal-bg-soft)',
          border: '1px solid var(--cal-line-2)',
          borderRadius: 14,
          fontSize: 13.5, lineHeight: 1.6, color: 'var(--cal-body)',
          maxWidth: 900, textWrap: 'pretty',
        }}>
          <span style={{
            fontFamily: AIP_MONO, color: 'var(--cal-muted-2)',
            fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase',
            marginRight: 10, fontWeight: 600,
          }}>Regulatory</span>
          Recruitment AI is classified <b>high-risk</b> under the EU AI Act (Annex III). We already comply with <b>UK ICO's March 2026 guidance</b> on meaningful human involvement — because we don't rank, screen or score. We're reading the <b>Australian ADM transparency rules</b> that commence 10 December 2026, and we'll update this page as those take effect.
        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   ROADMAP — soft-gray. Coming / not coming.
   ══════════════════════════════════════════════════════════════ */
function AIPRoadmap() {
  return (
    <section style={{ background: 'var(--cal-bg-warm)', padding: '88px 72px' }}>
      <div className="cal-container">
        <div style={{ maxWidth: 960, marginBottom: 36 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <span className="dot" /> The roadmap
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)',
            fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05,
          }}>
            What's coming.{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>What isn't.</span>
          </h2>
          <p style={{
            margin: 0, fontSize: 17, lineHeight: 1.6, color: 'var(--cal-body)',
            maxWidth: 900, textWrap: 'pretty',
          }}>
            Eight things we're shipping. Seven things we won't — at any point, under any customer pressure.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 20 }}>

          {/* COMING — header outside the card */}
          <div>
            <div style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: '#166534', fontFamily: AIP_MONO, fontWeight: 600,
              marginBottom: 12, paddingLeft: 4,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: 999, background: '#16A34A',
                boxShadow: '0 0 0 3px rgba(22,163,74,0.18)',
              }} />
              Coming — AI admin, always human-sent
            </div>
            <div style={{
              background: '#fff',
              border: '1px solid var(--cal-line)',
              borderRadius: 18,
              padding: '8px 24px',
              boxShadow: 'var(--shadow-sm)',
            }}>
              {AIP_COMING.map((c, i) => {
                const style = CAT_STYLES[c.cat] || CAT_STYLES.admin;
                const iconFn = Icon[c.icon] || Icon.sparkles;
                return (
                  <div key={c.t} style={{
                    display: 'flex', gap: 14, alignItems: 'flex-start',
                    padding: '16px 0',
                    borderBottom: i < AIP_COMING.length - 1 ? '1px solid var(--cal-line-2)' : 'none',
                  }}>
                    <span aria-hidden style={{
                      flexShrink: 0,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      width: 34, height: 34, borderRadius: 10,
                      background: style.bg,
                      border: `1px solid ${style.border}`,
                      color: style.color,
                    }}>{iconFn({ size: 16, color: style.color })}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{
                        display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
                        marginBottom: 3,
                      }}>
                        <span style={{
                          fontSize: 14.5, fontWeight: 500, color: 'var(--cal-ink)',
                          letterSpacing: '-0.01em',
                        }}>{c.t}</span>
                        <span style={{
                          fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
                          fontFamily: AIP_MONO, fontWeight: 600,
                          color: style.color,
                          background: style.bg,
                          border: `1px solid ${style.border}`,
                          padding: '2px 8px', borderRadius: 999,
                        }}>{style.label}</span>
                      </div>
                      <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--cal-body)', textWrap: 'pretty' }}>
                        {c.b}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* NOT COMING — header outside the card, each item has a "why not" inline */}
          <div>
            <div style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--cal-accent-ink)', fontFamily: AIP_MONO, fontWeight: 600,
              marginBottom: 12, paddingLeft: 4,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: 999, background: 'var(--cal-accent)',
                boxShadow: '0 0 0 3px rgba(255,106,61,0.22)',
              }} />
              Not coming — at any point
            </div>
            <div style={{
              background: '#fff',
              border: '1px solid var(--cal-line)',
              borderRadius: 18,
              padding: '8px 24px',
              boxShadow: 'var(--shadow-sm)',
            }}>
              {AIP_NOT_COMING.map((c, i) => (
                <div key={c.t} style={{
                  display: 'flex', gap: 14, alignItems: 'flex-start',
                  padding: '16px 0',
                  borderBottom: i < AIP_NOT_COMING.length - 1 ? '1px solid var(--cal-line-2)' : 'none',
                }}>
                  <NeverCross />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{
                      fontSize: 14, fontWeight: 500, color: 'var(--cal-ink)',
                      letterSpacing: '-0.01em', lineHeight: 1.4,
                    }}>{c.t}</div>
                    <div style={{
                      marginTop: 2,
                      fontSize: 12, lineHeight: 1.5, color: 'var(--cal-muted)',
                      fontStyle: 'italic',
                    }}>{c.why}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   RESTORING AOTEAROA — warm-cream. Trees That Count feature.
   Forest SVG as a hero illustration at the bottom of the section.
   ══════════════════════════════════════════════════════════════ */
function AIPAotearoa() {
  return (
    <section style={{
      background: 'var(--cal-bg-cool)',
      padding: '72px 0 200px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{ position: 'relative', zIndex: 2, padding: '0 72px', maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ maxWidth: 1000, marginBottom: 32 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 18 }}>
            <span className="dot" /> Restoring Aotearoa
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(34px, 3.8vw, 54px)',
            fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.06,
          }}>
            For every Caliber user, every year, we plant{' '}
            <span style={{ color: 'var(--cal-blue-ink)', fontWeight: 600 }}>five native trees</span>{' '}
            <span style={{
              fontFamily: '"Fraunces", "Times New Roman", serif',
              fontStyle: 'italic', fontWeight: 500,
              color: 'var(--cal-accent)',
            }}>in Aotearoa.</span>
          </h2>
          <p style={{
            margin: 0, fontSize: 17, lineHeight: 1.55, color: 'var(--cal-body)',
            maxWidth: 900, textWrap: 'pretty',
          }}>
            AI has a carbon cost. So does cloud, so does a laptop, so does an office. The honest math says each Caliber user is about half a tonne of CO2 a year, all in. Five native rākau — planted through{' '}
            <a href="https://treesthatcount.co.nz/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--cal-blue-ink)', textDecoration: 'underline', fontWeight: 500 }}>Trees That Count</a>{' '}
            — offsets that four times over. We pay for it; it's included in your subscription.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 20,
          marginBottom: 24,
        }}>
          {/* LEFT — emotional */}
          <div style={{
            background: '#fff',
            border: '1px solid var(--cal-line)',
            borderRadius: 18,
            padding: '22px 26px 20px',
            boxShadow: 'var(--shadow-sm)',
          }}>
            <div style={{
              fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--cal-blue-ink)', fontFamily: AIP_MONO, fontWeight: 600,
              marginBottom: 12,
            }}>Why natives, why here</div>
            <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--cal-body)', textWrap: 'pretty', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <p style={{ margin: 0 }}>
                Tāne Mahuta — the largest living kauri — is roughly 2,000 years old. He's still standing because generations of Māori and Pākehā decided, over and over, that he mattered more than what could be made from him.
              </p>
              <p style={{ margin: 0 }}>
                Trees That Count partners with iwi, hapū, schools, landowners and community groups across Aotearoa to plant <b>native</b> trees — kauri, tōtara, rimu, pōhutukawa, kahikatea. Not pine monoculture. Native forest, the kind that sequesters carbon for centuries and shelters species that exist nowhere else on earth.
              </p>
              <p style={{ margin: 0 }}>
                Planting native forest is the least we can do — literally the minimum, once you look at the numbers — and it's the most tangible climate action available to a company our size.
              </p>
              <p style={{
                margin: '8px 0 0',
                fontSize: 12, lineHeight: 1.55, color: 'var(--cal-muted)',
                fontStyle: 'italic', textWrap: 'pretty',
              }}>
                Offsetting isn't removing. We're adding native forest to counter our weight on the earth. When direct air capture gets cheap enough to be honest about, we'll layer it on top.
              </p>
            </div>
          </div>

          {/* RIGHT — stats + methodology stacked tight */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{
              background: '#fff',
              border: '1px solid var(--cal-line)',
              borderRadius: 18,
              overflow: 'hidden',
              boxShadow: 'var(--shadow-sm)',
            }}>
              {AOTEAROA_STATS.map((s, i) => (
                <div key={i} style={{
                  padding: '14px 22px',
                  borderBottom: i < AOTEAROA_STATS.length - 1 ? '1px solid var(--cal-line-2)' : 'none',
                  display: 'flex', flexDirection: 'column', gap: 2,
                }}>
                  <div style={{
                    fontFamily: AIP_MONO, fontSize: 'clamp(26px, 2.4vw, 34px)',
                    fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1,
                    color: 'var(--cal-ink)',
                  }}>{s.n}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--cal-body)' }}>{s.label}</div>
                </div>
              ))}
            </div>

            <div style={{
              padding: '12px 16px',
              background: '#fff',
              border: '1px solid var(--cal-line-2)',
              borderRadius: 12,
              fontSize: 12, lineHeight: 1.55, color: 'var(--cal-body)',
              textWrap: 'pretty',
              boxShadow: 'var(--shadow-sm)',
            }}>
              <span style={{
                fontFamily: AIP_MONO, color: 'var(--cal-muted-2)',
                fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase',
                marginRight: 6, fontWeight: 600,
              }}>Methodology</span>
              Trees That Count publishes per-species sequestration data (mortality-adjusted). Five native trees = ~2.2 t CO2 over 50 years — 4.4× the per-user digital footprint of a typical Caliber seat. Full workings:{' '}
              <a href="https://toolkit.tanestrees.org.nz/carbon-calculator/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--cal-blue-ink)', textDecoration: 'underline' }}>Tāne's Tree Trust models</a>.
            </div>
          </div>
        </div>
      </div>

      {/* Forest illustration — transparent SVG (bg rectangle stripped).
          viewBox cropped to drop empty-sky area so tree tops aren't
          cut off by the section. max-width caps forest height on
          ultra-wide monitors. Content above sits at z-index 2. */}
      <div aria-hidden style={{
        position: 'absolute',
        bottom: 0, left: 0, right: 0,
        width: '100vw',
        pointerEvents: 'none',
        zIndex: 0,
      }}>
        <img
          src="assets/restoring-aotearoa-forest.svg"
          alt=""
          loading="lazy"
          decoding="async"
          fetchpriority="low"
          style={{
            display: 'block',
            width: '100%',
            height: 'auto',
            userSelect: 'none',
          }}
        />
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   CLOSING CTA — white with blue gradient band.
   ══════════════════════════════════════════════════════════════ */
function AIPCTA() {
  return (
    <section style={{ background: '#fff', padding: '72px 72px 96px' }}>
      <div className="cal-container">
        <div style={{
          position: 'relative', borderRadius: 28, overflow: 'hidden',
          background: 'linear-gradient(135deg, #0052FF 0%, #0009B6 60%, #060847 100%)',
          color: '#fff', padding: '72px 60px',
        }}>
          <div className="cal-noise" />
          <div style={{
            position: 'absolute', right: -40, top: -30, opacity: 0.22,
            transform: 'rotate(18deg)',
          }}>
            <CalStar size={280} grad={false} style={{ color: '#fff' }} />
          </div>
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <div className="cal-eyebrow" style={{
              background: 'rgba(255,255,255,0.12)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.22)', marginBottom: 20,
            }}>
              <CalStar size={11} grad={false} style={{ color: 'var(--cal-accent)' }} />
              See the position in practice
            </div>
            <h2 style={{
              margin: '0 0 16px',
              fontSize: 'clamp(34px, 3.8vw, 52px)', fontWeight: 500,
              letterSpacing: '-0.03em', lineHeight: 1.08,
            }}>
              Scout is the part of Caliber{' '}
              <span style={{
                fontFamily: '"Fraunces", "Times New Roman", serif',
                fontStyle: 'italic', fontWeight: 500, color: 'var(--cal-accent)',
              }}>where this philosophy lives.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.9, margin: '0 0 28px', maxWidth: 600 }}>
              Type a role in plain English. Get 1,025 matched candidates in under a minute. No ranking, no screening, no score. Just the people, in the order Scout found them.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="/#scout" className="cal-btn cal-btn--white" style={{ padding: '14px 24px', fontSize: 15, textDecoration: 'none' }}>
                Try Scout {Icon.arrowR({ size: 14 })}
              </a>
              <a href="/" className="cal-btn" style={{
                padding: '14px 22px', fontSize: 15,
                background: 'rgba(255,255,255,0.12)', color: '#fff',
                border: '1px solid rgba(255,255,255,0.3)', textDecoration: 'none',
              }}>← Back to the homepage</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ══════════════════════════════════════════════════════════════
   PAGE — composes sections.
   Order (V2.1): Amazon moved to #2 (right after hero). Aotearoa moved
   to the end — forest SVG bleeds full-width into the dark footer.
   Rhythm: warm → DARK → white → soft → white → soft → white → warm → white → cool(sky) → dark footer.
   ══════════════════════════════════════════════════════════════ */
function AIPrinciplesPage() {
  return (
    <div className="cal-page">
      <ScrollProgress />
      <Nav ctaLabel="See the live demo" />
      <AIPHero />
      <AIPAmazon />
      <AIPResearch />
      <AIPWhy />
      <AIPDemoSection />
      <AIPCommitments />
      <AIPTrust />
      <AIPRoadmap />
      <AIPCTA />
      <AIPAotearoa />
      <Footer />
    </div>
  );
}

Object.assign(window, { AIPrinciplesPage });
