// Caliber — /migration page composite.
// Destination for every "Switch to Caliber" / "We'll buy out your contract" CTA
// across the site (homepage BuyoutSection, compare pages, CTA bands).
//
// Expands the homepage buyout section's 4-step 9-day sweep into a full
// migration page with:
//   1. Hero — "Switch to Caliber in nine days"
//   2. The offer — what we cover, what we don't
//   3. The 9-day timeline — 6 nodes, Day -1 through Day 9
//   4. What we import — honest matrix across 6 ATS competitors + CSV
//   5. What usually goes wrong — 4-cell stat wall with cited sources
//   6. Who owns this at Caliber — Martin's team, commitment
//   7. Contract buyout math — clean visual formula, 24-month term cap
//   8. FAQ — 8 migration-specific questions
//   9. Final CTA + Footer
//
// Honest constraints per CALIBER-CANONICAL.md §2:
//   - 9-day cutover is "typical, not yet validated at scale"
//   - 24 months max overlap, no hard cash cap
//   - Data imported from Bullhorn, JobAdder, Vincere, Loxo, Recruit CRM,
//     TeamTailor, CSV — "candidates, notes, pipelines, contracts"
//
// Exports: <MigrationPage />

const MG_MONO  = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';
const MG_SERIF = '"Fraunces", "Times New Roman", serif';
const MG_INK   = '#06082C';

/* =========================================================
   DATA
   ========================================================= */

const BUYOUT_COVERS = [
  { k: 'We cover', items: [
    'White-glove migration. Our team does the exports, mapping and imports.',
    'Up to 24 months of overlap with your current ATS contract — zero-invoice Caliber while it runs out.',
    'Two training sessions for your team, live. Recorded so latecomers catch up.',
    'A real human on Slack, email and phone through cutover week. NZ business hours.',
  ] },
  { k: "We don't cover", items: [
    "Your current ATS's cancellation paperwork — that's between you and them.",
    'Custom API integrations you built on top of your old ATS (we rebuild the common ones on request).',
    'Data quality in your source system. Garbage in, garbage out — we flag it, you decide.',
    'Historical email thread bodies where your old ATS never stored them.',
  ] },
];

// Day -1 through Day 9. Each day: what Caliber does + what you do.
const TIMELINE = [
  {
    day: 'Day −1',
    title: 'Discovery call',
    caliber: 'Walk your current setup on a 45-min call. Scope your exports, seats, renewal date, custom fields.',
    you: 'Send the latest invoice from your current ATS and a list of fields you care about keeping.',
    tag: 'No commitment',
  },
  {
    day: 'Day 0',
    title: 'Trial + data handover',
    caliber: 'Spin up your Caliber workspace. Send you an export checklist for your current ATS.',
    you: 'Run the export from your current ATS (or give us read-only access). Invite your team to Caliber.',
    tag: 'No card, no contract',
  },
  {
    day: 'Day 3',
    title: 'Data import + field mapping',
    caliber: 'Candidates, jobs, pipelines, notes, tags, attachments imported. Custom fields mapped against your schema.',
    you: 'Eyeball a sample of 50 imported records and flag anything we mapped wrong. We re-import same day.',
    tag: 'Full audit log',
  },
  {
    day: 'Day 5',
    title: 'Workflows + templates rebuilt',
    caliber: 'Your email templates, pipeline stages and saved filters rebuilt in Caliber. Outlook / M365 connected.',
    you: 'Tell us which automations you actually use. The rest stay off.',
    tag: 'Honest rebuild',
  },
  {
    day: 'Day 7',
    title: 'Team training',
    caliber: 'Two live 60-min sessions for your recruiters. Recorded. Q&A doc delivered same week.',
    you: 'Get the team in a room. Ideally morning, not 4pm Friday.',
    tag: '60 min × 2',
  },
  {
    day: 'Day 8',
    title: 'First Scout shortlist',
    caliber: 'Brief Scout in plain English on a real open role. A shortlist lands the same day.',
    you: 'Pick a live role — not a dummy one. You want real proof.',
    tag: 'First value',
    highlight: true,
  },
  {
    day: 'Day 9',
    title: 'Cutover — Caliber becomes the system of record',
    caliber: 'Final delta import. Your old ATS goes read-only. Caliber is live.',
    you: 'Stop logging into your old tool. Point your team at Caliber for everything new.',
    tag: 'Old ATS runs read-only until renewal',
  },
];

// Import matrix — honest partial-credit grid.
// ✓ = clean, ~ = partial (requires manual mapping or some fidelity loss), ✗ = not available.
// Based on what each source ATS exposes in its export API + 3rd-party
// migration-tool docs (Bullhorn CSV/API, JobAdder DB backup, Vincere CRM
// data migration, Loxo guided import, Recruit CRM exports, TeamTailor CSV).
const IMPORT_COMPETITORS = ['Bullhorn', 'JobAdder', 'Vincere', 'Loxo', 'Recruit CRM', 'TeamTailor', 'CSV / spreadsheet'];

const IMPORT_ROWS = [
  { row: 'Candidates — name, contact, CV',  cells: ['✓','✓','✓','✓','✓','✓','✓'] },
  { row: 'Jobs / roles',                     cells: ['✓','✓','✓','✓','✓','✓','✓'] },
  { row: 'Pipeline stages',                  cells: ['✓','✓','✓','✓','✓','~','~'] },
  { row: 'Candidate notes',                  cells: ['✓','✓','✓','✓','✓','✓','~'] },
  { row: 'Tags / labels',                    cells: ['✓','✓','✓','✓','✓','✓','✓'] },
  { row: 'Attachments (CVs, docs)',          cells: ['✓','✓','✓','✓','✓','✓','✓'] },
  { row: 'Contacts + Companies CRM',         cells: ['✓','✓','✓','✓','✓','~','✓'] },
  { row: 'Custom fields',                    cells: ['~','~','~','~','~','~','~'] },
  { row: 'Activities / call logs',           cells: ['~','~','✓','~','~','~','~'] },
  { row: 'Email threads (full body)',        cells: ['~','~','~','✗','~','✗','✗'] },
  { row: 'Email templates',                  cells: ['~','~','~','~','~','~','~'] },
  { row: 'In-flight candidates (state)',     cells: ['✓','✓','✓','✓','✓','✓','✓'] },
];

const IMPORT_LEGEND = [
  { sym: '✓', label: 'Imports cleanly' },
  { sym: '~', label: 'Partial — needs mapping or rebuild (we do it with you)' },
  { sym: '✗', label: 'Not exposed by the source ATS. No one can migrate this.' },
];

// "What usually goes wrong elsewhere" — 4-cell stat wall with real sources.
const MIGRATION_MATH = [
  {
    n: '60 days',
    label: 'AUTO-RENEWAL NOTICE',
    body: "Most ATS contracts auto-renew unless you cancel 60 days before your term ends. Miss the window and you're locked in for another year. One Bullhorn customer: \"I got suckered into another year because of their 60 day cancellation requirement.\"",
    cite: { label: 'Bullhorn · Capterra review (Jarit W., 2018)', href: 'https://www.capterra.com/p/140531/Bullhorn-Recruiting-Software/reviews/' },
  },
  {
    n: '37%',
    label: 'SATISFIED WITH CURRENT CRM',
    body: "Resco.net CRM Users Survey. Two-thirds of agencies are in a tool they'd leave today if cutover didn't scare them. The fear does more lock-in than the contract.",
    cite: { label: 'Resco.net survey via Atlas', href: 'https://recruitwithatlas.com/blog/ats-migrations/' },
  },
  {
    n: '2–6 wks',
    label: 'TYPICAL MIGRATION',
    body: "Industry benchmark for an ATS cutover. Bullhorn inbounds stretch 8–16+ weeks. Our 9-day target is the fast end of the spectrum — honest about that, and honest if yours takes longer.",
    cite: { label: 'Atlas ATS migration benchmarks', href: 'https://recruitwithatlas.com/blog/ats-migration-mistakes/' },
  },
  {
    n: 'Field map',
    label: '#1 FAILURE MODE',
    body: "\"Candidate notes might end up as unreadable attachments, or phone numbers might all funnel into a single field.\" The most common way migrations quietly break — and the reason we map every field with you on a call, not a script.",
    cite: { label: 'Atlas · ATS migration mistakes', href: 'https://recruitwithatlas.com/blog/ats-migration-mistakes/' },
  },
];

// FAQ — 8 questions specific to migration.
const MIGRATION_FAQ = [
  {
    q: "What if my contract doesn't end for 10 months?",
    a: "Start Caliber today. We'll run in parallel with your old ATS — you don't pay Caliber until your current contract expires. We absorb up to 24 months of overlap, so a 10-month remainder is well inside the coverage window. Your old tool keeps running read-only; Caliber becomes the system of record on cutover day.",
  },
  {
    q: "Will I lose data?",
    a: "Core data — candidates, jobs, notes, tags, attachments, pipelines — imports cleanly from every major ATS. Partial fidelity on custom fields (we map every one with you on a call) and email thread bodies (most ATSes never stored the full body to begin with). See the import matrix above — we don't pretend fields import that don't.",
  },
  {
    q: "What about my custom fields?",
    a: "Custom fields are the single place migrations quietly break. We map every one of yours against Caliber's schema on the kickoff call, import a sample, you eyeball it, and we re-import the same day if anything's wrong. Nothing gets imported blind.",
  },
  {
    q: "Can I keep my existing email templates?",
    a: "Your templates come across as text. Rich-text formatting, merge fields and signature blocks get rebuilt in Caliber's template library during Day 5 — we do the rebuild with you, not for you, so you decide what stays and what gets retired.",
  },
  {
    q: "What happens to in-flight candidates?",
    a: "Candidates at every pipeline stage migrate with their state intact. A candidate mid-process on Day 8 is in the same stage, with the same notes and attachments, on Day 9. We don't ask you to 'finish out' anyone in the old tool.",
  },
  {
    q: "Is there a migration fee?",
    a: "No. Migration is included in Caliber Pro, same as training, same as support. We don't charge implementation fees, and we don't charge an exit fee if you ever leave us.",
  },
  {
    q: "What if we decide not to switch after discovery?",
    a: "Walk away. The discovery call and the 14-day trial are free. We'd rather you say no in week one than feel trapped six months in — that's the opposite of how we want to sell recruitment software.",
  },
  {
    q: "Do you migrate from spreadsheets?",
    a: "Yes. CSV and XLSX imports are bread and butter — candidates, jobs, contacts, companies. If your 'ATS' is a shared Google Sheet, we'll probably have you live in a day, not nine.",
  },
];

/* =========================================================
   MAIN COMPOSITE
   ========================================================= */
function MigrationPage() {
  return (
    <div className="cal-page">
      <Nav ctaLabel="Book a demo" />
      <MigrationHero />
      <TheOfferSection />
      <TimelineSection />
      <ImportMatrixSection />
      <WhatGoesWrongSection />
      <WhoRunsThisSection />
      <BuyoutMathSection />
      <MigrationFAQSection />
      <section className="cal-section" style={{ paddingTop: 40, paddingBottom: 120 }}>
        <div className="cal-container">
          <CTABand
            title="Book your migration call with Martin."
            sub="45 minutes on a video call. We look at your current setup, your renewal date, and what the cutover actually costs you. No pitch deck."
            primary="Book a migration call"
            secondary="Email Martin directly"
          />
        </div>
      </section>
      <Footer />
    </div>
  );
}

/* =========================================================
   1. HERO — "Switch to Caliber in nine days"
   ========================================================= */
function MigrationHero() {
  return (
    <section style={{ marginTop: -128, padding: '224px 72px 72px', background: '#fff' }}>
      <div className="cal-container" style={{ maxWidth: 1120 }}>
        <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
          <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
          Migration · on your timeline
        </div>
        <h1 style={{
          margin: '0 0 22px',
          fontSize: 'clamp(44px, 5.4vw, 88px)',
          fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02,
          color: 'var(--cal-ink)', maxWidth: 1040, textWrap: 'balance',
        }}>
          Days if you're in a hurry. Months if you'd rather plan it{' '}
          <span style={{
            fontFamily: MG_SERIF,
            fontWeight: 700,
            fontVariationSettings: '"opsz" 14, "SOFT" 100, "WONK" 0, "wght" 700',
            color: 'var(--cal-blue-ink)',
            letterSpacing: '-0.02em',
          }}>over coffee.</span>
          {' '}Either way, we'll do the move.
        </h1>
        <p style={{
          margin: '0 0 14px', fontSize: 'clamp(17px, 1.3vw, 21px)',
          lineHeight: 1.55, color: 'var(--cal-body)', maxWidth: 720, textWrap: 'pretty',
        }}>
          You'll know the name of the person doing it, and have their cell. Not a queue, not a ticket, not a bot.
        </p>
        <div style={{
          fontSize: 12, color: 'var(--cal-muted)',
          fontFamily: MG_MONO, lineHeight: 1.55, maxWidth: 720, marginBottom: 28,
        }}>
          Candidates, notes, pipelines, contracts — we move them. Your old ATS runs read-only through the rest of its term. You pay Caliber from renewal day, not cutover day. If it runs past what we scoped together, we eat the overlap month.
        </div>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          <a href="mailto:hello@caliberjobs.com?subject=Migration%20call" className="cal-btn cal-btn--blue"
             style={{ padding: '14px 24px', fontSize: 15, textDecoration: 'none' }}>
            Book a migration call {Icon.arrowR({ size: 14, color: '#fff' })}
          </a>
          <a href="#import-matrix" className="cal-btn cal-btn--ghost"
             style={{ padding: '14px 22px', fontSize: 15, textDecoration: 'none' }}>
            See what we import
          </a>
        </div>

        {/* Sourcebar: the 7 competitors we import from */}
        <div style={{
          marginTop: 56, paddingTop: 22,
          borderTop: '1px solid var(--cal-line-2)',
          display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--cal-muted)', fontFamily: MG_MONO, fontWeight: 600,
          }}>
            We import from
          </div>
          {IMPORT_COMPETITORS.map((name, i) => (
            <span key={name} style={{
              fontSize: 14, fontWeight: 500, color: 'var(--cal-body)',
              padding: '6px 12px', borderRadius: 999,
              background: 'var(--cal-bg-soft)', border: '1px solid var(--cal-line-2)',
            }}>{name}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   2. THE OFFER — what we cover / what we don't
   ========================================================= */
function TheOfferSection() {
  return (
    <section className="cal-section" style={{
      background: 'var(--cal-bg-warm)', padding: '100px 72px',
    }}>
      <div className="cal-container">
        <div style={{ marginBottom: 48, maxWidth: 780 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 20 }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
            The offer
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 500,
            letterSpacing: '-0.03em', lineHeight: 1.04, color: 'var(--cal-ink)',
            textWrap: 'balance',
          }}>
            We pay for the overlap, not for your cancellation.
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: 'var(--cal-body)',
            margin: 0, maxWidth: 660, textWrap: 'pretty',
          }}>
            You start Caliber today. We run in parallel with your current ATS
            until its term runs out — and you pay zero Caliber invoices for
            up to 24 months while it does. No hidden cap, no paperwork drama.
            Specifics walked through on the call.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
        }}>
          {BUYOUT_COVERS.map((col, i) => (
            <div key={col.k} className="cal-card" style={{
              padding: '28px 28px 24px',
              borderColor: i === 0 ? 'rgba(0,9,182,0.15)' : 'var(--cal-line)',
            }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '5px 10px', borderRadius: 999,
                background: i === 0 ? 'var(--cal-blue-50)' : '#F3F4F6',
                color: i === 0 ? 'var(--cal-blue-ink)' : '#4B5563',
                fontSize: 11.5, fontWeight: 600,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                fontFamily: MG_MONO, marginBottom: 18,
              }}>
                {i === 0 ? '✓' : '—'} {col.k}
              </div>
              <ul style={{
                listStyle: 'none', margin: 0, padding: 0,
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                {col.items.map(it => (
                  <li key={it} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 12,
                    fontSize: 15, lineHeight: 1.5,
                    color: 'var(--cal-body)', textWrap: 'pretty',
                  }}>
                    <span style={{
                      width: 20, height: 20, borderRadius: 999, flexShrink: 0,
                      marginTop: 2,
                      background: i === 0 ? 'var(--cal-blue-50)' : '#F3F4F6',
                      color: i === 0 ? 'var(--cal-blue-ink)' : '#6B7280',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 12, fontWeight: 700,
                    }}>{i === 0 ? '✓' : '×'}</span>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   3. TIMELINE — vertical, 7 nodes (Day −1 through Day 9)
   ========================================================= */
function TimelineSection() {
  return (
    <section
      className="cal-section"
      id="timeline"
      style={{
        background: MG_INK, color: '#fff',
        padding: '100px 72px 120px',
        position: 'relative', overflow: 'hidden',
      }}
    >
      <TimelineBackground />
      <div className="cal-container" style={{ position: 'relative' }}>
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <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,
          }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-accent)' }} />
            A sample 9-day timeline
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 500,
            letterSpacing: '-0.03em', lineHeight: 1.04, color: '#fff',
            textWrap: 'balance',
          }}>
            Nine days. Every day accounted for.
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.72)', margin: 0,
            maxWidth: 640, textWrap: 'pretty',
          }}>
            This is what the cutover actually looks like.
            {' '}<span style={{ color: '#fff' }}>You do the bits only you can do</span>{' '}
            — everything else is on us. Most teams hit every milestone.
            If yours doesn't, we eat the overlap month.
          </p>
        </div>

        <div style={{ position: 'relative' }}>
          {/* Vertical rail */}
          <div style={{
            position: 'absolute', left: 28, top: 12, bottom: 12,
            width: 1, background: 'rgba(255,255,255,0.12)',
          }} />

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {TIMELINE.map((s, i) => (
              <TimelineNode key={s.day} node={s} index={i + 1} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function TimelineNode({ node, index }) {
  const highlight = !!node.highlight;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '58px 1fr', gap: 24,
      alignItems: 'start', position: 'relative',
    }}>
      {/* Node dot */}
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'flex-start' }}>
        <div style={{
          width: 58, height: 58, borderRadius: 999,
          background: highlight ? 'var(--cal-accent)' : '#fff',
          color: highlight ? '#fff' : MG_INK,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 15, fontWeight: 700,
          border: `5px solid ${MG_INK}`,
          boxShadow: `0 0 0 1px ${highlight ? 'var(--cal-accent)' : 'rgba(255,255,255,0.22)'}`,
          fontFeatureSettings: '"tnum"',
          position: 'relative', zIndex: 1,
        }}>
          {index}
        </div>
      </div>

      {/* Card */}
      <div style={{
        background: highlight ? 'rgba(255,106,61,0.06)' : 'rgba(255,255,255,0.04)',
        border: highlight
          ? '1px solid rgba(255,106,61,0.35)'
          : '1px solid rgba(255,255,255,0.1)',
        borderRadius: 18,
        padding: '22px 28px 24px',
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap', marginBottom: 6 }}>
          <div style={{
            fontSize: 11, fontWeight: 700,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: highlight ? 'var(--cal-accent)' : 'rgba(255,255,255,0.6)',
            fontFamily: MG_MONO,
          }}>
            {node.day}
          </div>
          {node.tag && (
            <div style={{
              fontSize: 10.5, fontWeight: 500,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.45)',
              fontFamily: MG_MONO,
            }}>· {node.tag}</div>
          )}
        </div>
        <div style={{
          fontSize: 22, fontWeight: 500,
          letterSpacing: '-0.02em', lineHeight: 1.2,
          marginBottom: 16, color: '#fff',
          textWrap: 'balance',
        }}>
          {node.title}
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 20, marginTop: 2,
        }}>
          <TimelineHalf label="WE DO" body={node.caliber} tone="us" />
          <TimelineHalf label="YOU DO" body={node.you} tone="you" />
        </div>
      </div>
    </div>
  );
}

function TimelineHalf({ label, body, tone }) {
  return (
    <div>
      <div style={{
        fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: tone === 'us' ? 'rgba(0,132,255,0.85)' : 'rgba(255,255,255,0.45)',
        fontFamily: MG_MONO, fontWeight: 600, marginBottom: 6,
      }}>{label}</div>
      <div style={{
        fontSize: 13.5, lineHeight: 1.55,
        color: 'rgba(255,255,255,0.75)', textWrap: 'pretty',
      }}>{body}</div>
    </div>
  );
}

function TimelineBackground() {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `
        radial-gradient(1100px 600px at 85% -5%, rgba(255,106,61,0.1), transparent 60%),
        radial-gradient(900px 600px at 5% 110%, rgba(0,82,255,0.16), transparent 65%),
        linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px)
      `,
      backgroundSize: '100% 100%, 100% 100%, 90px 90px, 90px 90px',
    }} />
  );
}

/* =========================================================
   4. IMPORT MATRIX — honest per-competitor per-data-type grid
   ========================================================= */
function ImportMatrixSection() {
  return (
    <section
      className="cal-section"
      id="import-matrix"
      style={{ background: 'var(--cal-bg-soft)', padding: '100px 72px' }}
    >
      <div className="cal-container">
        <div style={{ marginBottom: 36, maxWidth: 780 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 20 }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
            What we import
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 500,
            letterSpacing: '-0.03em', lineHeight: 1.04, color: 'var(--cal-ink)',
            textWrap: 'balance',
          }}>
            The honest import matrix.
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: 'var(--cal-body)',
            margin: 0, maxWidth: 680, textWrap: 'pretty',
          }}>
            One row per data type, one column per source ATS. Where fields
            don't come across cleanly — custom fields, email threads — we say
            so. We'd rather tell you now than explain it on Day 10.
          </p>
        </div>

        {/* Legend */}
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 18,
          fontSize: 12, color: 'var(--cal-muted)', marginBottom: 20,
          fontFamily: MG_MONO,
        }}>
          {IMPORT_LEGEND.map(l => (
            <span key={l.sym} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <ImportSymbol sym={l.sym} size={22} />
              {l.label}
            </span>
          ))}
        </div>

        <div style={{
          background: '#fff',
          border: '1px solid var(--cal-line)',
          borderRadius: 18,
          overflow: 'hidden',
        }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{
              width: '100%', minWidth: 920, borderCollapse: 'collapse',
              fontFamily: 'inherit',
            }}>
              <thead>
                <tr>
                  <th style={matrixHeadLeft}>Data type</th>
                  {IMPORT_COMPETITORS.map((c, i) => (
                    <th key={c} style={{
                      ...matrixHead,
                      borderLeft: '1px solid var(--cal-line-2)',
                    }}>{c}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {IMPORT_ROWS.map((r, rowIdx) => (
                  <tr key={r.row} style={{
                    background: rowIdx % 2 === 0 ? '#fff' : 'var(--cal-bg-soft)',
                  }}>
                    <td style={matrixRowLabel}>{r.row}</td>
                    {r.cells.map((cell, ci) => (
                      <td key={ci} style={{
                        ...matrixCell,
                        borderLeft: '1px solid var(--cal-line-2)',
                      }}>
                        <ImportSymbol sym={cell} size={24} />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div style={{
          marginTop: 18, fontSize: 12, lineHeight: 1.6,
          color: 'var(--cal-muted)', fontFamily: MG_MONO,
          maxWidth: 860,
        }}>
          Matrix reflects what each source ATS exposes via its export / API.
          {' '}Custom fields and email templates always need manual mapping —
          we do them with you on the kickoff call, not from a script.
          {' '}If your source ATS isn't listed, ask — if it has an export, we can migrate it.
        </div>
      </div>
    </section>
  );
}

const matrixHead = {
  padding: '16px 14px', textAlign: 'center',
  fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
  color: 'var(--cal-muted)', fontWeight: 600, fontFamily: MG_MONO,
  background: 'var(--cal-bg-soft)',
  borderBottom: '1px solid var(--cal-line)',
  whiteSpace: 'nowrap',
};
const matrixHeadLeft = {
  ...matrixHead, textAlign: 'left',
  padding: '16px 20px',
};
const matrixRowLabel = {
  padding: '16px 20px', fontSize: 14, color: 'var(--cal-ink)',
  fontWeight: 500, textAlign: 'left',
  borderBottom: '1px solid var(--cal-line-2)',
};
const matrixCell = {
  padding: '12px 14px', textAlign: 'center',
  borderBottom: '1px solid var(--cal-line-2)',
};

function ImportSymbol({ sym, size = 24 }) {
  const config =
    sym === '✓' ? { bg: 'var(--cal-green-soft)', fg: '#166534', label: '✓' } :
    sym === '~' ? { bg: '#FEF3C7', fg: '#92400E', label: '~' } :
                  { bg: '#FEE2E2', fg: '#991B1B', label: '×' };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: size, height: size, borderRadius: 999,
      background: config.bg, color: config.fg,
      fontSize: size * 0.5, fontWeight: 700,
      fontFamily: MG_MONO, lineHeight: 1,
    }}>{config.label}</span>
  );
}

/* =========================================================
   5. WHAT USUALLY GOES WRONG — 4-cell math wall with citations
   ========================================================= */
function WhatGoesWrongSection() {
  return (
    <section className="cal-section" style={{
      background: '#fff', padding: '100px 72px',
    }}>
      <div className="cal-container">
        <div style={{ marginBottom: 32, maxWidth: 780 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 20 }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
            What usually goes wrong
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 500,
            letterSpacing: '-0.03em', lineHeight: 1.04, color: 'var(--cal-ink)',
            textWrap: 'balance',
          }}>
            The four reasons agencies don't switch.
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: 'var(--cal-body)',
            margin: 0, maxWidth: 680, textWrap: 'pretty',
          }}>
            Every one of these is real, cited, and something we've designed
            the cutover around. If your reason isn't here, ask on the call.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          border: '1px solid var(--cal-line)', borderRadius: 18,
          overflow: 'hidden', background: '#fff',
        }}>
          {MIGRATION_MATH.map((m, i) => (
            <div key={m.label} style={{
              padding: '28px 22px 24px',
              borderRight: i < 3 ? '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: MG_MONO, fontWeight: 500,
              }}>0{i + 1}</div>
              <div style={{
                fontFamily: MG_MONO, fontSize: 'clamp(28px, 3.2vw, 46px)',
                fontWeight: 500, letterSpacing: '-0.04em',
                lineHeight: 0.98, color: 'var(--cal-ink)',
                fontFeatureSettings: '"tnum"',
              }}>
                {m.n}
              </div>
              <div style={{
                fontSize: 10.5, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--cal-muted)',
                fontFamily: MG_MONO, fontWeight: 600,
              }}>{m.label}</div>
              <div style={{
                fontSize: 13, lineHeight: 1.5, color: 'var(--cal-body)',
                flex: 1, textWrap: 'pretty',
              }}>{m.body}</div>
              <a
                href={m.cite.href}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  fontSize: 10, letterSpacing: '0.04em',
                  color: 'var(--cal-muted-2)', fontFamily: MG_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: {m.cite.label} ↗
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   6. WHO RUNS THIS AT CALIBER — commitment + serif pull quote
   ========================================================= */
function WhoRunsThisSection() {
  return (
    <section className="cal-section" style={{
      background: 'var(--cal-bg-cool)', padding: '100px 72px',
    }}>
      <div className="cal-container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64,
          alignItems: 'center',
        }}>
          <div>
            <div className="cal-eyebrow" style={{ marginBottom: 20 }}>
              <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
              Who runs this
            </div>
            <h2 style={{
              margin: '0 0 22px',
              fontSize: 'clamp(36px, 4vw, 56px)', fontWeight: 500,
              letterSpacing: '-0.025em', lineHeight: 1.08, color: 'var(--cal-ink)',
              textWrap: 'balance',
            }}>
              Every migration is run by our team.
              {' '}<span style={{ color: 'var(--cal-blue-ink)' }}>Not a partner network.</span>
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.6, color: 'var(--cal-body)',
              margin: '0 0 18px', maxWidth: 520, textWrap: 'pretty',
            }}>
              Eight of us in Auckland, Hamilton and Christchurch. The person who
              runs your cutover is on the same Slack as the person who writes
              Caliber's import tooling. When something goes wrong at 10pm Day 6,
              that's not two hops away.
            </p>
            <p style={{
              fontSize: 15, lineHeight: 1.6, color: 'var(--cal-body)',
              margin: '0 0 26px', maxWidth: 520, textWrap: 'pretty',
            }}>
              Bullhorn's own implementation is run through a partner network,
              with engagements quoted between US$1k and US$50k+. Our migration
              is on us, and it's on us to get right.
            </p>
            <a
              href="mailto:hello@caliberjobs.com?subject=Migration%20call"
              className="cal-btn cal-btn--primary"
              style={{ padding: '13px 22px', fontSize: 14, textDecoration: 'none' }}
            >
              Book a migration call {Icon.arrowR({ size: 13, color: '#fff' })}
            </a>
          </div>

          <div style={{
            background: '#fff', border: '1px solid var(--cal-line)',
            borderRadius: 24, padding: '40px 40px 36px',
            boxShadow: 'var(--shadow-md)', position: 'relative',
          }}>
            <div style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--cal-accent)', fontFamily: MG_MONO, fontWeight: 700,
              marginBottom: 18,
            }}>Our commitment</div>
            <div style={{
              fontFamily: MG_SERIF, fontStyle: 'italic',
              fontVariationSettings: '"opsz" 72, "SOFT" 100, "WONK" 0, "wght" 400',
              fontSize: 'clamp(22px, 2vw, 30px)',
              lineHeight: 1.3, color: 'var(--cal-ink)',
              letterSpacing: '-0.015em', marginBottom: 22,
              textWrap: 'balance',
            }}>
              "If your cutover runs past what we scoped together, we eat the overlap month.
              If a field comes across wrong, we re-import same day.
              If you decide we're not the tool — walk away. No exit fee."
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 14,
              paddingTop: 22, borderTop: '1px solid var(--cal-line-2)',
            }}>
              <Avatar name="Martin van Blerk" size={40} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--cal-ink)' }}>
                  Martin van Blerk
                </div>
                <div style={{ fontSize: 12, color: 'var(--cal-muted)' }}>
                  Founder, Caliber · Auckland
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   7. CONTRACT BUYOUT MATH — clean visual formula
   ========================================================= */
function BuyoutMathSection() {
  return (
    <section className="cal-section" style={{
      background: MG_INK, color: '#fff',
      padding: '100px 72px',
      position: 'relative', overflow: 'hidden',
    }}>
      <TimelineBackground />
      <div className="cal-container" style={{ position: 'relative' }}>
        <div style={{ marginBottom: 56, maxWidth: 780 }}>
          <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,
          }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-accent)' }} />
            The buyout math
          </div>
          <h2 style={{
            margin: '0 0 18px',
            fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 500,
            letterSpacing: '-0.03em', lineHeight: 1.04, color: '#fff',
            textWrap: 'balance',
          }}>
            What "we'll buy out your contract" actually means.
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.72)', margin: 0,
            maxWidth: 640, textWrap: 'pretty',
          }}>
            We don't send you a reimbursement cheque. We give you Caliber
            free for the remaining months of your current ATS contract —
            up to 24 months. Same outcome, cleaner paperwork.
          </p>
        </div>

        {/* The formula */}
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 24, padding: '40px 44px 44px',
          marginBottom: 40,
        }}>
          <div style={{
            fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.6)', fontFamily: MG_MONO, fontWeight: 700,
            marginBottom: 24,
          }}>The formula</div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr auto 1fr auto 1fr',
            alignItems: 'stretch', gap: 20,
          }}>
            <FormulaCell label="Your seat count" value="× seats" note="on Caliber Pro" />
            <FormulaOp>×</FormulaOp>
            <FormulaCell label="Months left on your current ATS" value="up to 24" note="anything beyond that, we scope" />
            <FormulaOp>=</FormulaOp>
            <FormulaCell
              label="Zero-invoice Caliber Pro"
              value="free"
              note="until your old contract runs out"
              accent
            />
          </div>

          <div style={{
            marginTop: 32, paddingTop: 24,
            borderTop: '1px solid rgba(255,255,255,0.12)',
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
          }}>
            <BuyoutExample
              label="Worked example · 10-seat agency"
              line1="10 seats × NZ$299/mo × 12 months remaining"
              line2="= NZ$35,880 of zero-invoice Caliber Pro while Bullhorn runs out"
              tone="accent"
            />
            <BuyoutExample
              label="Worked example · 3-seat boutique"
              line1="3 seats × NZ$299/mo × 8 months remaining"
              line2="= NZ$7,176 of zero-invoice Caliber Pro while JobAdder runs out"
            />
          </div>
        </div>

        <div style={{
          fontSize: 13.5, lineHeight: 1.6,
          color: 'rgba(255,255,255,0.6)', fontFamily: MG_MONO,
          maxWidth: 880,
        }}>
          No hard dollar cap. Specifics — your seat count, your renewal date,
          your exact remaining months — walked through on a 45-minute call.
          No chat widget, no lead-qualification bot.
        </div>
      </div>
    </section>
  );
}

function FormulaCell({ label, value, note, accent }) {
  return (
    <div style={{
      background: accent ? 'rgba(255,106,61,0.1)' : 'rgba(255,255,255,0.04)',
      border: accent
        ? '1px solid rgba(255,106,61,0.4)'
        : '1px solid rgba(255,255,255,0.1)',
      borderRadius: 14, padding: '22px 22px 20px',
      display: 'flex', flexDirection: 'column', gap: 10,
      minHeight: 168,
    }}>
      <div style={{
        fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase',
        color: accent ? 'var(--cal-accent)' : 'rgba(255,255,255,0.55)',
        fontFamily: MG_MONO, fontWeight: 600,
      }}>{label}</div>
      <div style={{
        fontFamily: MG_MONO, fontSize: 'clamp(28px, 3vw, 42px)',
        fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1,
        color: accent ? 'var(--cal-accent)' : '#fff',
        fontFeatureSettings: '"tnum"',
      }}>
        {value}
      </div>
      <div style={{
        fontSize: 12.5, lineHeight: 1.5,
        color: 'rgba(255,255,255,0.6)', marginTop: 4,
      }}>
        {note}
      </div>
    </div>
  );
}

function FormulaOp({ children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 32, fontWeight: 300, color: 'rgba(255,255,255,0.4)',
      fontFamily: MG_MONO,
    }}>{children}</div>
  );
}

function BuyoutExample({ label, line1, line2, tone }) {
  return (
    <div>
      <div style={{
        fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: tone === 'accent' ? 'var(--cal-accent)' : 'rgba(255,255,255,0.5)',
        fontFamily: MG_MONO, fontWeight: 700, marginBottom: 10,
      }}>{label}</div>
      <div style={{
        fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)',
        fontFamily: MG_MONO, marginBottom: 6,
      }}>{line1}</div>
      <div style={{
        fontSize: 14, lineHeight: 1.55, color: '#fff',
        fontFamily: MG_MONO, fontWeight: 600,
      }}>{line2}</div>
    </div>
  );
}

/* =========================================================
   8. FAQ — migration specific
   ========================================================= */
function MigrationFAQSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="cal-section" style={{
      background: '#fff', padding: '100px 72px',
    }}>
      <div className="cal-container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64,
        }}>
          <div>
            <div className="cal-eyebrow" style={{ marginBottom: 20 }}>
              <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
              Migration FAQ
            </div>
            <h2 style={{
              margin: '0 0 16px',
              fontSize: 'clamp(36px, 3.6vw, 48px)', fontWeight: 500,
              letterSpacing: '-0.03em', lineHeight: 1.05, color: 'var(--cal-ink)',
            }}>
              The questions agencies actually ask.
            </h2>
            <p style={{
              fontSize: 16, color: 'var(--cal-body)', lineHeight: 1.55,
              maxWidth: 360,
            }}>
              Missing one?{' '}
              <a href="mailto:hello@caliberjobs.com?subject=Migration%20call" style={{ color: 'var(--cal-blue-ink)' }}>
                Book a migration call
              </a>{' '}
              and we'll answer it in person.
            </p>
          </div>
          <div style={{ borderTop: '1px solid var(--cal-line)' }}>
            {MIGRATION_FAQ.map((f, i) => (
              <div key={i} style={{ borderBottom: '1px solid var(--cal-line)' }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left',
                    padding: '22px 4px', cursor: 'pointer',
                    background: 'transparent', border: 'none',
                    fontFamily: 'inherit',
                    display: 'flex', alignItems: 'center', gap: 16,
                  }}
                >
                  <span style={{
                    fontSize: 17, fontWeight: 500,
                    color: 'var(--cal-ink)', flex: 1, textAlign: 'left',
                  }}>
                    {f.q}
                  </span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 999,
                    border: '1px solid var(--cal-line)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform .2s', flexShrink: 0,
                  }}>
                    {Icon.plus({ size: 14 })}
                  </span>
                </button>
                <div style={{
                  maxHeight: open === i ? 300 : 0, overflow: 'hidden',
                  transition: 'max-height .3s ease',
                }}>
                  <p style={{
                    margin: '0 4px 22px', fontSize: 15,
                    color: 'var(--cal-body)', lineHeight: 1.6,
                    maxWidth: 720, textWrap: 'pretty',
                  }}>
                    {f.a}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MigrationPage });