// PricingPage.jsx — completion-focused pricing

/* ── Individual course catalogue (one licence = one named employee, one course) ──
   Grouped by `programme` into the sections rendered below.
   Pre-order pricing: `was` is the post-launch list price (+30%); `price` is the
   pre-order price (30% off the list). See OFFER in shared.jsx.
   `comingSoon: true` shows a "Coming soon" tag — remove it per course as each goes live. */
const SINGLE_COURSES = [
  // Health & Safety
  { id: 'ws-essentials',     programme: 'safety',       title: 'Workplace Safety Essentials',                       tag: 'Essential',        duration: '~20 min', icon: '🦺', iconKey: 'vest',         price: 17, was: 25, comingSoon: true },
  { id: 'fire',              programme: 'safety',       title: 'Fire Safety Awareness',                             tag: 'Fire Safety',      duration: '~20 min', icon: '🔥', iconKey: 'flame',        price: 17, was: 25, comingSoon: true },
  { id: 'fire-warden',       programme: 'safety',       title: 'Fire Warden Training',                              tag: 'Fire Safety',      duration: '~30 min', icon: '🧯', iconKey: 'extinguisher', price: 17, was: 25, comingSoon: true },
  { id: 'coshh',             programme: 'safety',       title: 'COSHH — Working Safely with Hazardous Substances',  tag: 'Hazardous',        duration: '~25 min', icon: '☣️', iconKey: 'hazard',        price: 17, was: 25, comingSoon: true },
  // First Aid & Incident
  { id: 'fa-appointed',      programme: 'firstaid',     title: 'First Aid — Appointed Person',                      tag: 'First Aid',        duration: '~25 min', icon: '⛑️', iconKey: 'firstaid',     price: 17, was: 25, comingSoon: true },
  { id: 'fa-refresher',      programme: 'firstaid',     title: 'First Aid at Work — Refresher',                     tag: 'First Aid',        duration: '~30 min', icon: '🩹', iconKey: 'plaster',      price: 17, was: 25, comingSoon: true },
  { id: 'fa-riddor',         programme: 'firstaid',     title: 'First Aid & Incident Reporting (RIDDOR)',           tag: 'Reporting',        duration: '~25 min', icon: '🚑', iconKey: 'ambulance',    price: 17, was: 25, comingSoon: true },
  { id: 'incident',          programme: 'firstaid',     title: 'Accident & Incident Reporting',                     tag: 'Reporting',        duration: '~20 min', icon: '📋', iconKey: 'clipboard',    price: 17, was: 25, comingSoon: true },
  // Food Safety
  { id: 'food1',             programme: 'food',         title: 'Food Safety & Hygiene — Level 1',                   tag: 'Foundation',       duration: '~30 min', icon: '🍽️', iconKey: 'plate',         price: 17, was: 25, comingSoon: true },
  { id: 'food2',             programme: 'food',         title: 'Food Safety & Hygiene — Level 2',                   tag: 'Level 2',          duration: '~45 min', icon: '👨‍🍳', iconKey: 'chefhat',      price: 26, was: 38, comingSoon: true },
  { id: 'food3',             programme: 'food',         title: 'Food Safety & Hygiene — Level 3 (Supervisors)',     tag: 'Supervisors',      duration: '~60 min', icon: '🧑‍🍳', iconKey: 'chefhat',      price: 26, was: 38, comingSoon: true },
  { id: 'allergy',           programme: 'food',         title: "Food Allergy Awareness (Natasha's Law)",            tag: "Natasha's Law",    duration: '~25 min', icon: '🥜', iconKey: 'allergen',     price: 17, was: 25, comingSoon: true },
  // People & Conduct
  { id: 'edi',               programme: 'people',       title: 'Equality, Diversity & Inclusion',                   tag: 'People',           duration: '~25 min', icon: '🤝', iconKey: 'handshake',    price: 17, was: 25, comingSoon: true },
  { id: 'bullying',          programme: 'people',       title: 'Bullying & Harassment Awareness',                   tag: 'People',           duration: '~20 min', icon: '🚫', iconKey: 'prohibition',  price: 17, was: 25, comingSoon: true },
  { id: 'sexual-harassment', programme: 'people',       title: 'Preventing Sexual Harassment at Work',              tag: 'People',           duration: '~25 min', icon: '⚖️', iconKey: 'scales',        price: 17, was: 25, comingSoon: true },
  // Safeguarding
  { id: 'sg-adults-2',       programme: 'safeguarding', title: 'Safeguarding Adults — Level 2',                     tag: 'Level 2',          duration: '~30 min', icon: '🛡️', iconKey: 'shield',        price: 26, was: 38, comingSoon: true },
  { id: 'sg-children-2',     programme: 'safeguarding', title: 'Safeguarding Children — Level 2',                   tag: 'Level 2',          duration: '~30 min', icon: '🧒', iconKey: 'child',         price: 26, was: 38, comingSoon: true },
  { id: 'sg-children-3',     programme: 'safeguarding', title: 'Safeguarding Children — Level 3 (Designated Leads)', tag: 'Designated Leads', duration: '~60 min', icon: '🧑‍🏫', iconKey: 'presenter',    price: 26, was: 38, comingSoon: true },
  // Regulatory & Compliance
  { id: 'gdpr',              programme: 'compliance',   title: 'Data Protection & UK GDPR Essentials',              tag: 'Data',             duration: '~25 min', icon: '🔒', iconKey: 'padlock',      price: 17, was: 25, comingSoon: true },
  { id: 'modern-slavery',    programme: 'compliance',   title: 'Modern Slavery Awareness',                          tag: 'Compliance',       duration: '~20 min', icon: '⛓️', iconKey: 'chain',         price: 17, was: 25, comingSoon: true },
  { id: 'prevent',           programme: 'compliance',   title: 'Prevent Duty Awareness',                            tag: 'Compliance',       duration: '~20 min', icon: '👁️', iconKey: 'eye',           price: 17, was: 25, comingSoon: true },
  { id: 'right-to-work',     programme: 'compliance',   title: 'Right to Work Checks',                              tag: 'HR',               duration: '~20 min', icon: '🛂', iconKey: 'idcheck',      price: 17, was: 25, comingSoon: true },
  // Dyslexia programme
  { id: 'dys-school',        programme: 'dyslexia',     title: 'Navigating School with Dyslexia',                   tag: 'Students',         duration: '~35 min', icon: '📘', iconKey: 'book',         price: 17, was: 25, comingSoon: true },
  { id: 'dys-uni',           programme: 'dyslexia',     title: 'Navigating University with Dyslexia',               tag: 'Higher Ed',        duration: '~40 min', icon: '🎓', iconKey: 'gradcap',      price: 17, was: 25, comingSoon: true },
  { id: 'dys-work',          programme: 'dyslexia',     title: 'Navigating the Workplace with Dyslexia',            tag: 'Workplace',        duration: '~45 min', icon: '💼', iconKey: 'briefcase',    price: 17, was: 25, comingSoon: true },
];

/* ── Course icon registry + component ──────────────────────────────────────
   Each entry is the inner SVG path(s) for a 24×24 viewBox.
   All icons render stroke-only (fill="none"), strokeWidth 1.8, round caps/joins.
   Color is inherited via currentColor so the parent span sets the tint. */
const COURSE_ICONS = {
  // PPE / safety vest: two shoulder straps forming a V-shape, plus a horizontal band
  vest: '<path d="M5 3 L12 9 L19 3 M5 3 L3 10 L7 10 M19 3 L21 10 L17 10 M7 10 L7 21 L17 21 L17 10 M3 10 L7 10 M17 10 L21 10"/>',
  // Flame: teardrop with inner curl
  flame: '<path d="M12 22 C7 22 4 18.5 4 14.5 C4 10 8 7 9 4 C9 8 11 9.5 12 9.5 C11 7.5 11.5 5.5 13 4 C14 8 17 10 17 14.5 C17 18.5 17 22 12 22 Z M12 22 C10 22 9 20.5 10 18"/>',
  // Fire extinguisher: cylinder body, handle, hose nozzle
  extinguisher: '<path d="M12 3 L12 5 M10 5 L14 5 M14 5 C16 5 17 6 17 8 L17 19 C17 20.1 16.1 21 15 21 L11 21 C9.9 21 9 20.1 9 19 L9 8 C9 6 10 5 14 5 M17 9 L19 9 C20 9 21 10 21 11 L19 11"/>',
  // Hazard triangle with exclamation
  hazard: '<path d="M10.29 3.86 L1.82 18 A2 2 0 0 0 3.64 21 L20.36 21 A2 2 0 0 0 22.18 18 L13.71 3.86 A2 2 0 0 0 10.29 3.86 Z M12 9 L12 13 M12 17 L12 17.5"/>',
  // First aid cross (rounded square + cross)
  firstaid: '<rect x="3" y="3" width="18" height="18" rx="3" ry="3"/><path d="M9 12 L15 12 M12 9 L12 15"/>',
  // Plaster / bandage: rectangle at angle with stitch marks
  plaster: '<rect x="4" y="9" width="16" height="6" rx="2" transform="rotate(-35 12 12)"/><path d="M12 10 L12 14 M10.5 12 L13.5 12"/>',
  // Ambulance / medical cross on vehicle outline
  ambulance: '<rect x="2" y="8" width="14" height="12" rx="2"/><path d="M16 12 L20 12 L22 16 L22 20 L16 20 M6 20 L16 20 M5 20 A2 2 0 0 0 9 20 A2 2 0 0 0 5 20 M17 20 A2 2 0 0 0 21 20 A2 2 0 0 0 17 20 M6 12 L10 12 M8 10 L8 14"/>',
  // Clipboard: board outline with top clip and ruled lines
  clipboard: '<rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 3 L18 3 C19.1 3 20 3.9 20 5 L20 21 C20 22.1 19.1 23 18 23 L6 23 C4.9 23 4 22.1 4 21 L4 5 C4 3.9 4.9 3 6 3 L8 3 M9 13 L15 13 M9 17 L13 17"/>',
  // Plate + cutlery: circle (plate), fork left, knife right
  plate: '<circle cx="12" cy="13" r="6"/><path d="M6 5 L6 9 M6 9 C6 10.5 7 11 8 11 L8 5 M8 9 C8 10.5 7 11 6 11 M18 5 L18 11 L18 19 M18 5 C18 5 20 7 20 9 C20 11 18 11 18 11"/>',
  // Chef hat: puffed dome on a band
  chefhat: '<path d="M8 21 L16 21 L16 17 L8 17 Z M8 17 C6 17 4 15.5 4 13 C4 10.5 6 9 8 9 C8 7 9.5 5 12 5 C14.5 5 16 7 16 9 C18 9 20 10.5 20 13 C20 15.5 18 17 16 17"/>',
  // Allergen leaf (stylised): leaf shape with central vein
  allergen: '<path d="M12 21 C12 21 4 17 4 10 C4 6.5 7 4 12 4 C17 4 20 6.5 20 10 C20 17 12 21 12 21 Z M12 4 L12 21 M8 8 L12 12 M16 8 L12 12"/>',
  // Handshake: two hands clasped
  handshake: '<path d="M3 9 L9 3 L12 6 L9 9 M21 9 L15 3 L12 6 L15 9 M9 9 L12 12 L15 9 M9 9 L6 12 L9 15 L12 18 L15 15 L18 12 L15 9"/>',
  // Prohibition: circle with diagonal bar
  prohibition: '<circle cx="12" cy="12" r="9"/><path d="M5.64 5.64 L18.36 18.36"/>',
  // Balance scales: beam + two pans
  scales: '<path d="M12 3 L12 21 M3 21 L21 21 M9 7 L3 7 M15 7 L21 7 M3 7 C3 7 2 11 6 11 C10 11 9 7 9 7 M15 7 C15 7 14 11 18 11 C22 11 21 7 21 7"/>',
  // Shield: shield outline with inner tick
  shield: '<path d="M12 22 C12 22 4 18 4 10 L4 5 L12 2 L20 5 L20 10 C20 18 12 22 12 22 Z M8.5 12 L11 14.5 L15.5 9"/>',
  // Child / person (smaller figure): head + body outline
  child: '<circle cx="12" cy="6" r="3"/><path d="M6 21 L8 13 L12 16 L16 13 L18 21 M8 13 C8 13 9.5 11 12 11 C14.5 11 16 13 16 13"/>',
  // Person presenting at board: figure + board
  presenter: '<rect x="2" y="3" width="15" height="10" rx="1"/><path d="M9 13 L9 15 M9 15 L4 20 M9 15 L12 20 M17 3 L22 3 M22 3 L22 7 M17 7 L22 7"/><circle cx="19" cy="18" r="3"/><path d="M19 16 L19 18 L21 18"/>',
  // Padlock: shackle arc + body rectangle
  padlock: '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11 L8 7 A4 4 0 0 1 16 7 L16 11 M12 15 L12 17"/>',
  // Broken chain: two links with a gap/break in the middle
  chain: '<path d="M8 9 A3 3 0 0 0 2 9 A3 3 0 0 0 8 9 M8 9 L10 9 M14 15 L16 15 M16 15 A3 3 0 0 0 22 15 A3 3 0 0 0 16 15 M10 9 L11 11 M13 13 L14 15"/>',
  // Eye: outline eye shape + pupil
  eye: '<path d="M1 12 C1 12 5 5 12 5 C19 5 23 12 23 12 C23 12 19 19 12 19 C5 19 1 12 1 12 Z"/><circle cx="12" cy="12" r="3"/>',
  // ID / passport check: card with face silhouette + tick
  idcheck: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M6 16 C6 14 7.5 13 9 13 C10.5 13 12 14 12 16 M14 10 L18 10 M14 13 L16 13"/>',
  // Open book: two pages with spine
  book: '<path d="M2 6 C2 5 3 4 4 4 L12 4 L12 20 L4 20 C3 20 2 19 2 18 Z M22 6 C22 5 21 4 20 4 L12 4 L12 20 L20 20 C21 20 22 19 22 18 Z M12 4 L12 20"/>',
  // Graduation cap: flat top + tassel
  gradcap: '<path d="M12 2 L22 7 L12 12 L2 7 Z M6 10 L6 17 C6 17 8 20 12 20 C16 20 18 17 18 17 L18 10 M22 7 L22 13 M21 12 L23 12"/>',
  // Briefcase: handle + body rectangle
  briefcase: '<rect x="2" y="8" width="20" height="14" rx="2"/><path d="M8 8 L8 5 C8 4 9 3 10 3 L14 3 C15 3 16 4 16 5 L16 8 M2 14 L22 14"/>',
  // Default fallback: badge/rosette shape
  default: '<circle cx="12" cy="12" r="8"/><path d="M12 8 L12 13 M12 15.5 L12 16"/>',
};

/* Renders a single named line-SVG icon from COURSE_ICONS.
   Size defaults to 20. Color is inherited from the parent via currentColor. */
const CourseIcon = ({ name, size }) => {
  const sz = size || 20;
  const paths = COURSE_ICONS[name] || COURSE_ICONS['default'];
  return (
    <svg
      width={sz} height={sz} viewBox="0 0 24 24"
      fill="none" stroke="currentColor"
      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'block', flexShrink: 0 }}
      dangerouslySetInnerHTML={{ __html: paths }}
    />
  );
};

const fmtGBP = (n) => '£' + n.toFixed(n % 1 === 0 ? 0 : 2);

/* ── Quantity stepper (− / number / +) ──
   Takes a `step(delta)` callback that mutates the latest state via a functional
   updater on the parent — avoids the stale-closure bug where rapid clicks all
   computed `value + 1` from the same snapshot. */
const QtyStepper = ({ value, step, light }) => {
  const fg = light ? C.textInverse : C.ink;
  const bord = light ? 'rgba(237,232,223,0.30)' : C.borderStrong;
  const btn = (label, delta, disabled) => (
    <button
      onClick={(e) => { e.stopPropagation(); step(delta); }}
      disabled={disabled}
      aria-label={delta > 0 ? 'Increase quantity' : 'Decrease quantity'}
      style={{
        width: 28, height: 28, borderRadius: '50%',
        background: 'transparent', border: `1px solid ${bord}`,
        color: fg, cursor: disabled ? 'default' : 'pointer',
        opacity: disabled ? 0.35 : 1,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: F.sans, fontSize: 14, fontWeight: 600, lineHeight: 1,
        padding: 0, flexShrink: 0,
      }}
    >{label}</button>
  );
  return (
    <div onClick={(e) => e.stopPropagation()} style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '4px 6px', borderRadius: 9999,
      background: light ? 'rgba(237,232,223,0.06)' : 'rgba(26,25,23,0.04)',
      border: `1px solid ${bord}`,
    }}>
      {btn('−', -1, value === 0)}
      <span style={{
        fontFamily: F.mono, fontSize: 14, fontWeight: 600, color: fg,
        minWidth: 20, textAlign: 'center', lineHeight: 1,
      }}>{value}</span>
      {btn('+', +1, false)}
    </div>
  );
};

const IndividualCourses = ({ onNav }) => {
  // { courseId: count } — hydrated from the persisted basket so navigating
  // away from this page (and back) doesn't wipe the cart.
  const [qty, setQty] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('tc:basket')) || {}; } catch (e) { return {}; }
  });
  const [checkoutOpen, setCheckoutOpen] = React.useState(false);

  // Persist the basket whenever it changes.
  React.useEffect(() => {
    try { localStorage.setItem('tc:basket', JSON.stringify(qty)); } catch (e) {}
  }, [qty]);

  // On mount, hydrate from any "pending-basket" intent dropped by the Courses
  // page when the user clicked "Add to basket" on a course-detail drawer.
  React.useEffect(() => {
    try {
      const raw = localStorage.getItem('tc:pending-basket');
      if (!raw) return;
      const pending = JSON.parse(raw);
      const openCheckout = !!pending.__openCheckout;
      delete pending.__openCheckout;
      // Merge with anything already in the basket (additive, like a real cart).
      setQty(q => {
        const next = { ...q };
        Object.keys(pending).forEach(k => { next[k] = (next[k] || 0) + (pending[k] || 0); });
        return next;
      });
      if (openCheckout) setTimeout(() => setCheckoutOpen(true), 250);
      // Scroll the basket into view so the user sees what they added.
      setTimeout(() => {
        const el = document.getElementById('individual-courses');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 150);
      localStorage.removeItem('tc:pending-basket');
    } catch (e) {}
  }, []);

  const setOne = (id, n) => setQty(q => ({ ...q, [id]: n }));
  const addOne = (id) => setQty(q => ({ ...q, [id]: (q[id] || 0) + 1 }));
  const stepOne = (id, delta) => setQty(q => ({ ...q, [id]: Math.max(0, (q[id] || 0) + delta) }));
  const clearAll = () => {
    setQty({});
    try { localStorage.removeItem('tc:basket'); } catch (e) {}
  };

  const lineItems = SINGLE_COURSES
    .map(c => ({ ...c, n: qty[c.id] || 0 }))
    .filter(c => c.n > 0);
  const totalCourses = lineItems.reduce((s, c) => s + c.n, 0);
  const totalGBP    = lineItems.reduce((s, c) => s + c.n * c.price, 0);

  return (
    <section id="individual-courses" style={{ maxWidth: 1100, margin: '0 auto', padding: '64px clamp(20px, 5vw, 40px) 0' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', marginBottom: 6 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', background: C.brassDim, border: '1px solid rgba(107,46,46,0.25)', borderRadius: 9999 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.brass }} />
          <span style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass }}>Buy individual courses</span>
        </div>
        <span style={{ fontFamily: F.body, fontSize: 12.5, color: C.dust, fontStyle: 'italic' }}>No subscription required</span>
      </div>
      <h2 style={{ fontFamily: F.display, fontSize: 'clamp(26px, 3.4vw, 36px)', fontStyle: 'italic', fontWeight: 400, color: C.ink, lineHeight: 1.18, letterSpacing: '-0.4px', marginTop: 10, marginBottom: 8, maxWidth: 720 }}>
        Pick only what your team needs.
      </h2>
      <p style={{ fontFamily: F.body, fontSize: 15.5, color: C.ash, lineHeight: 1.65, maxWidth: 640, marginBottom: 8 }}>
        Only need one course? Buy exactly what your team needs — no subscription required.
      </p>
      <p style={{ fontFamily: F.body, fontSize: 13.5, color: C.dust, lineHeight: 1.65, maxWidth: 640, marginBottom: 28, fontStyle: 'italic' }}>
        Each licence gives one named employee access to one course, including the lesson, test and certificate where applicable. Set the quantity to match the number of employees who need this course.
      </p>

      {/* ── Two programme sections — mirrors the Courses page split so
            the food courses and the dyslexia programme are visually distinct
            even on the cart screen. Each section has its own kicker, italic
            sub-heading, and short intro before the card grid. */}
      {[
        {
          key: 'safety',
          kicker: 'Health & Safety',
          title: 'Keep your workplace safe.',
          intro: 'Fire, hazardous substances and the everyday safety duties every UK workplace has.',
        },
        {
          key: 'firstaid',
          kicker: 'First Aid & Incident',
          title: 'Ready when something goes wrong.',
          intro: 'Appointed-person and at-work first aid, plus accident and RIDDOR reporting.',
        },
        {
          key: 'food',
          kicker: 'Food Safety',
          title: 'Hospitality compliance essentials.',
          intro: 'Food hygiene from Level 1 to supervisor, plus Natasha\'s Law allergen training.',
        },
        {
          key: 'people',
          kicker: 'People & Conduct',
          title: 'A fair, respectful workplace.',
          intro: 'Equality, harassment and conduct training for every employee.',
        },
        {
          key: 'safeguarding',
          kicker: 'Safeguarding',
          title: 'Protect the people in your care.',
          intro: 'Adults and children safeguarding, from awareness to designated-lead level.',
        },
        {
          key: 'compliance',
          kicker: 'Regulatory & Compliance',
          title: 'Meet your legal duties.',
          intro: 'GDPR, modern slavery, Prevent and right-to-work — the rules UK employers must follow.',
        },
        {
          key: 'dyslexia',
          kicker: 'Dyslexia programme',
          title: 'School, university, the workplace.',
          intro: 'A three-part series for dyslexic learners, with the rights and tools they need at every stage.',
        },
      ].map((section, sectionIdx) => {
        const courses = SINGLE_COURSES.filter(c => c.programme === section.key);
        if (courses.length === 0) return null;
        return (
          <div key={section.key} style={{ marginBottom: sectionIdx === 0 ? 30 : 20 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap', marginBottom: 4 }}>
              <span style={{
                fontFamily: F.sans, fontSize: 9.5, fontWeight: 700,
                letterSpacing: '1.8px', textTransform: 'uppercase', color: C.brass,
              }}>{section.kicker}</span>
              <span style={{ fontFamily: F.body, fontSize: 12, color: C.dust }}>· {courses.length} course{courses.length === 1 ? '' : 's'}</span>
            </div>
            <div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: 20, fontWeight: 400, color: C.ink, marginBottom: 4, letterSpacing: '-0.2px' }}>
              {section.title}
            </div>
            <p style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.6, maxWidth: 620, marginBottom: 16 }}>
              {section.intro}
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
              {courses.map(c => {
                const n = qty[c.id] || 0;
                const active = n > 0;
                return (
                  <div
                    key={c.id}
                    role="button" tabIndex={0}
                    onClick={() => { if (n === 0) addOne(c.id); }}
                    onKeyDown={(e) => { if ((e.key === 'Enter' || e.key === ' ') && n === 0) { e.preventDefault(); addOne(c.id); } }}
                    aria-pressed={active}
                    style={{
                      background: active ? C.ink : C.parchment,
                      color: active ? C.textInverse : C.ink,
                      border: `1.5px solid ${active ? C.ink : C.border}`,
                      borderRadius: 14, padding: '20px 20px',
                      cursor: n === 0 ? 'pointer' : 'default',
                      textAlign: 'left',
                      boxShadow: active ? '0 8px 24px rgba(26,25,23,0.18)' : C.shadowLift,
                      transition: 'all 0.18s',
                      display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0,
                    }}>
                    {/* Icon + tag + duration */}
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                        <span aria-hidden="true" style={{ color: active ? C.brassLight : C.brass, display: 'flex', flexShrink: 0 }}><CourseIcon name={c.iconKey} size={20} /></span>
                        <span style={{
                          fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.5px', textTransform: 'uppercase',
                          color: active ? C.brassLight : C.brass,
                          background: active ? 'rgba(185,112,112,0.20)' : C.brassDim,
                          padding: '4px 10px', borderRadius: 9999, whiteSpace: 'nowrap',
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1,
                        }}><span style={{ marginTop: -1 }}>{c.tag}</span></span>
                      </div>
                      <span style={{ fontFamily: F.body, fontSize: 12, color: active ? 'rgba(237,232,223,0.55)' : C.dust, whiteSpace: 'nowrap', flexShrink: 0 }}>{c.duration}</span>
                    </div>

                    {/* Title — wraps so the full course name is always visible */}
                    <div style={{ fontFamily: F.sans, fontSize: 15.5, fontWeight: 600, color: active ? C.textInverse : C.ink, lineHeight: 1.3, overflowWrap: 'break-word', minWidth: 0 }}>{c.title}</div>

                    {c.comingSoon && (
                      <span style={{
                        alignSelf: 'flex-start', marginTop: -2,
                        fontFamily: F.sans, fontSize: 8.5, fontWeight: 700, letterSpacing: '1.3px', textTransform: 'uppercase',
                        color: active ? 'rgba(237,232,223,0.70)' : C.dust,
                        background: active ? 'rgba(237,232,223,0.10)' : 'rgba(26,25,23,0.05)',
                        border: `1px solid ${active ? 'rgba(237,232,223,0.18)' : C.border}`,
                        padding: '3px 9px', borderRadius: 9999,
                      }}>Coming soon</span>
                    )}

                    <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 10, flexWrap: 'wrap' }}>
                      <span style={{ fontFamily: F.display, fontSize: 22, fontWeight: 500, color: active ? C.textInverse : C.ink, lineHeight: 1, letterSpacing: '-0.3px' }}>
                        {c.was != null && <span style={{ textDecoration: 'line-through', opacity: 0.5, fontSize: 15, fontWeight: 400, marginRight: 6 }}>{fmtGBP(c.was)}</span>}
                        {fmtGBP(c.price)}
                        <span style={{ fontFamily: F.body, fontSize: 11, fontWeight: 400, color: active ? 'rgba(237,232,223,0.55)' : C.dust, marginLeft: 4 }}>/licence</span>
                      </span>
                      {active ? (
                        <QtyStepper value={n} step={(delta) => stepOne(c.id, delta)} light />
                      ) : (
                        <span style={{
                          fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '1.4px', textTransform: 'uppercase',
                          color: C.brass, padding: '6px 10px', border: `1px dashed ${C.borderStrong}`, borderRadius: 9999,
                        }}>+ Add</span>
                      )}
                    </div>

                    {active && (
                      <div style={{
                        marginTop: 4, paddingTop: 12, borderTop: '1px solid rgba(237,232,223,0.12)',
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                        fontFamily: F.body, fontSize: 12, color: 'rgba(237,232,223,0.70)',
                      }}>
                        <span>{n} {n === 1 ? 'employee' : 'employees'}</span>
                        <span style={{ fontFamily: F.mono, fontWeight: 600, color: C.brassLight }}>{fmtGBP(n * c.price)}</span>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}

      {/* Basket panel with totals. Grid + min-width:0 everywhere so the line
          items truncate cleanly and the big total never escapes its column. */}
      <div style={{
        background: totalCourses > 0 ? C.ink : C.linen,
        color: totalCourses > 0 ? C.textInverse : C.ink,
        border: `1px solid ${totalCourses > 0 ? C.ink : C.border}`,
        borderRadius: 14, padding: '22px 26px',
        transition: 'all 0.2s',
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 22, alignItems: 'start',
      }}>
        <div style={{ minWidth: 0, overflow: 'hidden' }}>
          <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: totalCourses > 0 ? C.brassLight : C.dust, marginBottom: 8 }}>
            Your basket
          </div>
          {totalCourses === 0 ? (
            <div style={{ fontFamily: F.body, fontSize: 14, color: C.ash, lineHeight: 1.55 }}>
              Tap a course above to add it. Set the quantity to match the number of employees who need each course.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {lineItems.map(li => (
                <div key={li.id} style={{
                  display: 'grid',
                  gridTemplateColumns: 'minmax(0, 1fr) auto auto',
                  alignItems: 'center', gap: 10,
                  fontFamily: F.body, fontSize: 13.5, color: 'rgba(237,232,223,0.82)',
                  minWidth: 0,
                }}>
                  <Truncate style={{ minWidth: 0 }}>{li.title}</Truncate>
                  <span style={{ fontFamily: F.mono, fontSize: 11.5, color: 'rgba(237,232,223,0.55)', whiteSpace: 'nowrap' }}>{li.n} × {fmtGBP(li.price)}</span>
                  <span style={{ fontFamily: F.mono, fontSize: 12.5, fontWeight: 600, color: C.textInverse, whiteSpace: 'nowrap', textAlign: 'right' }}>{fmtGBP(li.n * li.price)}</span>
                </div>
              ))}
            </div>
          )}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12, minWidth: 0, overflow: 'hidden', width: '100%' }}>
          <div style={{ textAlign: 'right', maxWidth: '100%', minWidth: 0 }}>
            <div style={{ fontFamily: F.sans, fontSize: 9.5, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: totalCourses > 0 ? 'rgba(237,232,223,0.55)' : C.dust, marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              Total · {totalCourses} {totalCourses === 1 ? 'licence' : 'licences'}
            </div>
            <div style={{
              fontFamily: F.display,
              fontSize: 'clamp(26px, 4.4vw, 36px)',
              fontWeight: 500, color: totalCourses > 0 ? C.textInverse : C.ink,
              lineHeight: 1, letterSpacing: '-0.6px',
              whiteSpace: 'nowrap',
            }}>{fmtGBP(totalGBP)}</div>
            <div style={{ fontFamily: F.body, fontSize: 11, color: totalCourses > 0 ? 'rgba(237,232,223,0.50)' : C.dust, marginTop: 4, lineHeight: 1.4, overflowWrap: 'anywhere' }}>One-off licences · pre-order — pay now, full access on launch</div>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: '100%' }}>
            {totalCourses > 0 && (
              <button onClick={clearAll} style={{
                background: 'transparent', color: totalCourses > 0 ? 'rgba(237,232,223,0.55)' : C.ash,
                border: `1px solid ${totalCourses > 0 ? 'rgba(237,232,223,0.25)' : C.border}`,
                borderRadius: 9999, padding: '11px 18px', cursor: 'pointer',
                fontFamily: F.sans, fontSize: 10.5, fontWeight: 600,
                letterSpacing: '1.4px', textTransform: 'uppercase',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>Clear</button>
            )}
            <button onClick={() => totalCourses > 0 ? setCheckoutOpen(true) : null}
              disabled={totalCourses === 0}
              style={{
                background: totalCourses > 0 ? C.brass : 'rgba(26,25,23,0.10)',
                color: totalCourses > 0 ? '#fff' : C.dust,
                border: 'none', borderRadius: 9999,
                padding: '13px 22px', cursor: totalCourses > 0 ? 'pointer' : 'not-allowed',
                fontFamily: F.sans, fontSize: 11, fontWeight: 600,
                letterSpacing: '1.5px', textTransform: 'uppercase',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>Pre-order now →</button>
          </div>
        </div>
      </div>

      <CheckoutModal
        open={checkoutOpen}
        onClose={() => setCheckoutOpen(false)}
        lineItems={lineItems}
        totalGBP={totalGBP}
        onNav={onNav}
      />
    </section>
  );
};

/* ── Two-path checkout modal: full account vs quick email ── */
const CheckoutModal = ({ open, onClose, lineItems, totalGBP, onNav }) => {
  const [mode, setMode] = React.useState(null);   // null | 'account' | 'quick'
  const [form, setForm] = React.useState({ name: '', business: '', email: '', password: '' });
  const [sent, setSent] = React.useState(null);   // null | { email, mode }
  const [err, setErr] = React.useState(null);     // checkout error message
  const [busy, setBusy] = React.useState(false);  // submitting → Stripe

  // Reset internal state whenever the modal opens fresh
  React.useEffect(() => {
    if (open) { setMode(null); setSent(null); setErr(null); setBusy(false); setForm({ name: '', business: '', email: '', password: '' }); }
  }, [open]);

  // Lock body scroll when open
  React.useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  // Escape closes the modal
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  // In production: POST to `/api/checkout` which should:
  //   1. Create (or find) the customer account
  //   2. Create a Stripe Checkout Session for the line items
  //   3. Email a login link via Resend
  //   4. Return { checkoutUrl } so we can redirect to Stripe
  // Required env on the backend:
  //   STRIPE_SECRET_KEY     — Stripe secret key
  //   STRIPE_PRICE_<COURSE> — one Stripe price id per individual course
  //   RESEND_API_KEY        — for the login-link email
  // Fetch is best-effort: if no endpoint is wired in dev, we still show
  // the success state so the prototype flow always completes.
  const submit = async (e) => {
    e.preventDefault();
    if (!form.email) return;
    setErr(null);
    setBusy(true);
    try {
      const r = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          mode,
          ...form,
          lineItems: lineItems.map(li => ({ id: li.id, title: li.title, qty: li.n, unitPrice: li.price })),
          totalGBP,
        }),
      });
      const data = await r.json().catch(() => ({}));
      if (r.ok && data.checkoutUrl) {
        window.location.href = data.checkoutUrl;   // → Stripe-hosted secure payment
        return;
      }
      setErr(data.error || "We couldn't start secure checkout just now. Please try again, or email help@tibercourse.com and we'll sort it.");
    } catch (e2) {
      setErr("We couldn't reach the payment service. Please check your connection and try again.");
    }
    setBusy(false);
  };

  const inputStyle = {
    width: '100%', padding: '11px 14px', borderRadius: 8,
    border: `1px solid ${C.border}`, background: '#fff', color: C.ink,
    fontFamily: F.body, fontSize: 14, outline: 'none', boxSizing: 'border-box',
  };
  const labelStyle = {
    display: 'block', fontFamily: F.sans, fontSize: 10, fontWeight: 600,
    letterSpacing: '1.4px', textTransform: 'uppercase', color: C.dust, marginBottom: 6,
  };

  return (
    <div role="dialog" aria-modal="true" aria-label="Checkout" style={{
      position: 'fixed', inset: 0, zIndex: 9500,
      background: 'rgba(26,25,23,0.55)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 16, overflowY: 'auto',
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: C.parchment, borderRadius: 16, maxWidth: 720, width: '100%',
        boxShadow: '0 24px 64px rgba(0,0,0,0.32)', overflow: 'hidden',
        maxHeight: '92vh', display: 'flex', flexDirection: 'column',
      }}>
        {/* Header */}
        <div style={{ padding: '20px 24px', borderBottom: `1px solid ${C.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass }}>Checkout</div>
            <div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: 22, color: C.ink, marginTop: 4 }}>
              {sent ? 'You\'re all set.' : mode ? (mode === 'account' ? 'Create your account' : 'Quick setup') : 'How would you like to start?'}
            </div>
          </div>
          <button onClick={onClose} aria-label="Close" style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            width: 36, height: 36, borderRadius: '50%', color: C.ash,
            fontSize: 20, lineHeight: 1, padding: 0, flexShrink: 0,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>✕</button>
        </div>

        <div style={{ padding: '24px 24px', overflowY: 'auto', flex: 1 }}>
          {/* SUCCESS */}
          {sent && (
            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(61,107,107,0.14)', border: '1px solid rgba(61,107,107,0.30)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M5 11l4 4 8-8" stroke={C.river} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <h3 style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: 26, color: C.ink, marginBottom: 10 }}>
                {sent.mode === 'quick' ? 'Login details on the way.' : 'Account created.'}
              </h3>
              <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.65, maxWidth: 440, margin: '0 auto 16px' }}>
                We've sent your login details and a payment link to <strong style={{ color: C.ink, fontWeight: 600 }}>{sent.email}</strong>. Check your inbox in the next few minutes.
              </p>
              <p style={{ fontFamily: F.body, fontSize: 12.5, color: C.dust, marginBottom: 26 }}>
                Total: <strong style={{ color: C.ink, fontWeight: 600 }}>{fmtGBP(totalGBP)}</strong> · {lineItems.reduce((s, c) => s + c.n, 0)} licences
              </p>
              <button onClick={onClose} style={{
                background: C.ink, color: C.textInverse, border: 'none', borderRadius: 9999,
                padding: '12px 26px', cursor: 'pointer',
                fontFamily: F.sans, fontSize: 11, fontWeight: 600,
                letterSpacing: '1.5px', textTransform: 'uppercase',
              }}>Done</button>
            </div>
          )}

          {/* CHOICE — two paths */}
          {!sent && !mode && (
            <>
              <p style={{ fontFamily: F.body, fontSize: 14, color: C.ash, lineHeight: 1.65, marginBottom: 20 }}>
                Pick the option that suits you, then pay securely by card. You'll get access the moment each course launches.
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
                <button onClick={() => setMode('account')} style={{
                  background: C.parchment, border: `1.5px solid ${C.borderStrong}`,
                  borderRadius: 14, padding: '22px 20px', cursor: 'pointer', textAlign: 'left',
                  boxShadow: C.shadowLift, transition: 'all 0.15s',
                  display: 'flex', flexDirection: 'column', gap: 8,
                  // Override the global `button { white-space: nowrap }` rule
                  // so the description wraps inside the card.
                  whiteSpace: 'normal',
                  minWidth: 0,
                }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = C.shadowCard; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = C.shadowLift; }}
                >
                  <div style={{ fontFamily: F.sans, fontSize: 9.5, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass, marginBottom: 2, whiteSpace: 'normal' }}>Recommended</div>
                  <div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: 20, color: C.ink, whiteSpace: 'normal' }}>Create an account</div>
                  <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.55, whiteSpace: 'normal', overflowWrap: 'anywhere' }}>
                    Sign up first, then complete payment. Manage your licences and assign learners straight away.
                  </div>
                </button>
                <button onClick={() => setMode('quick')} style={{
                  background: C.parchment, border: `1.5px solid ${C.border}`,
                  borderRadius: 14, padding: '22px 20px', cursor: 'pointer', textAlign: 'left',
                  boxShadow: C.shadowLift, transition: 'all 0.15s',
                  display: 'flex', flexDirection: 'column', gap: 8,
                  whiteSpace: 'normal',
                  minWidth: 0,
                }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = C.shadowCard; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = C.shadowLift; }}
                >
                  <div style={{ fontFamily: F.sans, fontSize: 9.5, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.dust, marginBottom: 2, whiteSpace: 'normal' }}>Quick setup</div>
                  <div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: 20, color: C.ink, whiteSpace: 'normal' }}>Just send me login details</div>
                  <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.55, whiteSpace: 'normal', overflowWrap: 'anywhere' }}>
                    Enter your email only — we'll set up your account, then take you straight to secure payment.
                  </div>
                </button>
              </div>
            </>
          )}

          {/* FORM — quick or full */}
          {!sent && mode && (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {mode === 'account' && (
                <>
                  <div>
                    <label style={labelStyle} htmlFor="co-name">Your name</label>
                    <input id="co-name" required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Sarah Mitchell" style={inputStyle} />
                  </div>
                  <div>
                    <label style={labelStyle} htmlFor="co-biz">Business name</label>
                    <input id="co-biz" required value={form.business} onChange={e => setForm({ ...form, business: e.target.value })} placeholder="The River House Kitchen" style={inputStyle} />
                  </div>
                </>
              )}
              <div>
                <label style={labelStyle} htmlFor="co-email">Email address</label>
                <input id="co-email" type="email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="you@yourbusiness.co.uk" style={inputStyle} />
              </div>

              {/* Order summary */}
              <div style={{
                marginTop: 6, padding: '14px 16px', background: C.linen,
                border: `1px solid ${C.border}`, borderRadius: 10,
                fontFamily: F.body, fontSize: 13, color: C.ash,
              }}>
                <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.4px', textTransform: 'uppercase', color: C.brass, marginBottom: 6 }}>Your order</div>
                {lineItems.map(li => (
                  <div key={li.id} style={{ display: 'flex', justifyContent: 'space-between', gap: 10, marginBottom: 3 }}>
                    <Truncate style={{ minWidth: 0, flex: 1 }}>{li.title}</Truncate>
                    <span style={{ fontFamily: F.mono, color: C.dust, whiteSpace: 'nowrap' }}>{li.n} × {fmtGBP(li.price)}</span>
                  </div>
                ))}
                <div style={{ borderTop: `1px solid ${C.border}`, marginTop: 8, paddingTop: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 600, letterSpacing: '1.2px', textTransform: 'uppercase', color: C.ink }}>Total</span>
                  <span style={{ fontFamily: F.display, fontSize: 22, color: C.ink, letterSpacing: '-0.3px' }}>{fmtGBP(totalGBP)}</span>
                </div>
                <div style={{ fontFamily: F.body, fontSize: 11, color: C.dust, marginTop: 4 }}>VAT shown at payment · one-off · pay now, access on launch</div>
              </div>

              {err && (
                <div role="alert" style={{ fontFamily: F.body, fontSize: 13, color: '#7A2C22', background: '#F7E9E6', border: '1px solid rgba(155,58,47,0.35)', borderRadius: 8, padding: '10px 14px', lineHeight: 1.5 }}>{err}</div>
              )}

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
                <button type="button" onClick={() => setMode(null)} style={{
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  fontFamily: F.sans, fontSize: 11, fontWeight: 600,
                  letterSpacing: '1.4px', textTransform: 'uppercase', color: C.ash,
                  textDecoration: 'underline', textUnderlineOffset: 3, padding: 0,
                }}>← Change option</button>
                <button type="submit" style={{
                  background: C.brass, color: '#fff', border: 'none', borderRadius: 9999,
                  padding: '13px 26px', cursor: 'pointer',
                  fontFamily: F.sans, fontSize: 11, fontWeight: 600,
                  letterSpacing: '1.5px', textTransform: 'uppercase',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }} disabled={busy}>{busy ? 'Starting secure checkout…' : (mode === 'account' ? 'Create account & pay →' : 'Continue to payment →')}</button>
              </div>

              <p style={{ fontFamily: F.body, fontSize: 11.5, color: C.dust, lineHeight: 1.55, marginTop: 4 }}>
                By continuing you agree to our <a href="#" onClick={(e) => { e.preventDefault(); onClose(); if (onNav) onNav('terms'); }} style={{ color: C.brass, textDecoration: 'underline', textUnderlineOffset: 3 }}>Terms of Service</a>. Full refund available before any course is started.
              </p>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};

const PLANS = [
  {
    name: 'Micro Team',
    bestFor: 'Cafés, pop-ups, small kitchens',
    price: '£25',
    was: '£35',
    period: 'per month',
    seats: 'Up to 5 staff',
    desc: 'The simple entry plan. Get the starter pack live for a small team with minimal setup.',
    features: [
      '5 starter compliance courses',
      'Short mobile-friendly lessons',
      'End-of-course tests',
      'Digital certificates',
      'Basic manager dashboard',
      'Email reminders to learners',
      'Downloadable completion proof',
      'Email support',
    ],
    cta: 'Book a demo',
    badge: null,
    highlight: false,
  },
  {
    name: 'Venue Starter',
    bestFor: 'Restaurants, pubs, hotels, catering teams',
    price: '£52',
    was: '£74',
    period: 'per month',
    seats: 'Up to 25 staff',
    desc: 'The standard venue package. Built for managers who want clear visibility and less chasing.',
    features: [
      'Everything in Micro Team',
      'Team completion dashboard',
      'Overdue learner view',
      'Manager reminder controls',
      'Completion exports & records',
      'Certificate register',
      'Setup help for first team upload',
      'Priority email support',
      'Monthly completion summary email',
    ],
    cta: 'Book a demo',
    badge: 'Most popular',
    highlight: true,
  },
  {
    name: 'Completion Plus',
    bestFor: 'Busy venues, growing teams',
    price: '£88',
    was: '£126',
    period: 'per month',
    seats: 'Up to 50 staff',
    desc: 'For managers who want help getting staff over the line — not just more seats.',
    features: [
      'Everything in Venue Starter',
      'Free reminder calls for managers',
      'Monthly completion check-in call',
      'Help chasing non-completion bottlenecks',
      'Suggested reminder schedule',
      'Multi-manager access',
      'Staff import/update support',
      'Priority onboarding support',
      'Quarterly completion review',
    ],
    cta: 'Talk to us',
    badge: 'Best for getting staff over the line',
    highlight: false,
  },
  {
    name: 'Group / Multi-site',
    bestFor: 'Multi-site operators, groups, hotels, franchises',
    price: 'from £134',
    was: 'from £191',
    period: 'per month',
    seats: 'Up to 100 staff, custom above',
    desc: 'For multi-site teams that need consolidated reporting and a real point of contact.',
    features: [
      'Everything in Completion Plus',
      'Free reminder calls included',
      'Named account contact',
      'Multi-site reporting',
      'Location/team breakdowns',
      'Onboarding call',
      'Monthly completion review call',
      'Custom reminder plan',
      'Priority support',
      'Optional branded certificates',
    ],
    cta: 'Book a group demo',
    badge: 'For multi-site teams',
    highlight: false,
  },
];

const PlanCard = ({ plan, onNav }) => {
  const { name, bestFor, price, was, period, seats, desc, features, cta, badge, highlight } = plan;
  return (
    <div style={{
      background: highlight ? C.ink : C.parchment,
      border: `1px solid ${highlight ? 'rgba(237,232,223,0.08)' : C.border}`,
      borderRadius: 12,
      padding: '32px 26px',
      boxShadow: highlight ? '0 8px 32px rgba(26,25,23,0.24)' : C.shadowLift,
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      minWidth: 0,
    }}>
      {badge && (
        <div style={{
          position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
          background: highlight ? C.brass : C.linenDeep,
          color: highlight ? '#fff' : C.ink,
          borderRadius: 9999, padding: '4px 12px',
          whiteSpace: 'nowrap', maxWidth: '90%',
          overflow: 'hidden', textOverflow: 'ellipsis',
        }}>
          <span style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.4px', textTransform: 'uppercase' }}>{badge}</span>
        </div>
      )}
      <div style={{ marginBottom: 18 }}>
        <Truncate style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 600, letterSpacing: '1.6px', textTransform: 'uppercase', color: highlight ? C.brassLight : C.dust, marginBottom: 6 }}>{name}</Truncate>
        <Truncate style={{ fontFamily: F.body, fontSize: 12.5, fontStyle: 'italic', color: highlight ? 'rgba(237,232,223,0.62)' : C.ash, marginBottom: 14 }}>{`Best for: ${bestFor}`}</Truncate>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4, flexWrap: 'wrap' }}>
          {was && <span style={{ fontFamily: F.display, fontSize: 22, fontWeight: 400, textDecoration: 'line-through', opacity: 0.5, color: highlight ? C.textInverse : C.dust, whiteSpace: 'nowrap' }}>{was}</span>}
          <span style={{ fontFamily: F.display, fontSize: 36, fontWeight: 400, color: highlight ? C.textInverse : C.ink, lineHeight: 1, whiteSpace: 'nowrap' }}>{price}</span>
          {period && <span style={{ fontFamily: F.body, fontSize: 13, color: highlight ? 'rgba(237,232,223,0.40)' : C.dust, whiteSpace: 'nowrap' }}>{period}</span>}
        </div>
        <Truncate style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 600, letterSpacing: '1.4px', textTransform: 'uppercase', color: highlight ? 'rgba(237,232,223,0.55)' : C.ash, marginBottom: 14 }}>{seats}</Truncate>
        <HR style={{ background: highlight ? 'rgba(237,232,223,0.10)' : C.borderSubtle, marginBottom: 14 }} />
        <p style={{ fontFamily: F.body, fontSize: 13, color: highlight ? 'rgba(237,232,223,0.65)' : C.ash, lineHeight: 1.6 }}>{desc}</p>
      </div>
      <div style={{ flex: 1 }}>
        {features.map(f => (
          <div key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 9 }}>
            <div style={{ width: 14, height: 14, borderRadius: '50%', background: highlight ? 'rgba(185,112,112,0.22)' : C.riverDim, border: `1px solid ${highlight ? 'rgba(185,112,112,0.40)' : 'rgba(61,107,107,0.20)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
              <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
                <path d="M1 4l2 2 4-4" stroke={highlight ? C.brassLight : C.river} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <span style={{ fontFamily: F.body, fontSize: 13, color: highlight ? 'rgba(237,232,223,0.78)' : C.ash, lineHeight: 1.55 }}>{f}</span>
          </div>
        ))}
      </div>
      <button
        onClick={() => onNav('contact')}
        style={{
          marginTop: 24,
          background: highlight ? C.brass : C.ink,
          color: '#fff',
          border: `1px solid ${highlight ? C.brass : C.ink}`,
          borderRadius: 9999, padding: '13px 10px', cursor: 'pointer', width: '100%',
          fontFamily: F.sans, fontSize: 11, fontWeight: 600,
          letterSpacing: '1.5px', textTransform: 'uppercase',
          transition: 'opacity 0.2s',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}
        onMouseEnter={e => { e.currentTarget.style.opacity = '0.85'; }}
        onMouseLeave={e => { e.currentTarget.style.opacity = '1'; }}
      >{cta}</button>
    </div>
  );
};

/* ── Feature comparison table — grouped into 3 sections so 15 rows aren't
   dumped in one wall. Each group is collapsible. ───────────────────────── */
const COMPARE_GROUPS = [
  {
    id: 'core',
    title: 'Core platform',
    rows: [
      { label: 'Staff seats',                    micro: 'Up to 5',  starter: 'Up to 25',  plus: 'Up to 50',  group: 'Up to 100+' },
      { label: 'Starter course pack (5 courses)',micro: true, starter: true,  plus: true,  group: true },
      { label: 'Short mobile lessons',           micro: true, starter: true,  plus: true,  group: true },
      { label: 'Tests and digital certificates', micro: true, starter: true,  plus: true,  group: true },
      { label: 'Email reminders to learners',    micro: true, starter: true,  plus: true,  group: true },
    ],
  },
  {
    id: 'manager',
    title: 'Manager tools',
    rows: [
      { label: 'Manager dashboard',              micro: 'Basic', starter: true, plus: true, group: true },
      { label: 'Overdue learner tracking',       micro: false, starter: true, plus: true, group: true },
      { label: 'Completion exports / records',   micro: false, starter: true, plus: true, group: true },
      { label: 'Monthly completion summary',     micro: false, starter: true, plus: true, group: true },
      { label: 'Multi-site reporting',           micro: false, starter: false, plus: false, group: true },
      { label: 'Custom branded certificates',    micro: false, starter: false, plus: false, group: 'Optional' },
    ],
  },
  {
    id: 'support',
    title: 'Support level',
    rows: [
      { label: 'Setup help',                     micro: false, starter: true, plus: 'Priority', group: 'Onboarding call' },
      { label: 'Reminder calls for managers',    micro: false, starter: false, plus: true, group: true },
      { label: 'Monthly completion check-in',    micro: false, starter: false, plus: true, group: 'Review call' },
      { label: 'Named support contact',          micro: false, starter: false, plus: false, group: true },
    ],
  },
];

const cellValue = (v, highlight) => {
  if (v === true)  return <svg width="14" height="14" viewBox="0 0 14 14" aria-label="Included"><path d="M2 7l3.5 3.5L12 4" stroke={highlight ? C.brassLight : C.river} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>;
  if (v === false) return <span aria-label="Not included" style={{ display: 'inline-block', width: 12, height: 1.5, background: 'rgba(26,25,23,0.20)' }} />;
  return <span style={{ fontFamily: F.body, fontSize: 12.5, color: highlight ? C.ink : C.ash, fontWeight: 500 }}>{v}</span>;
};

const PLAN_KEYS  = ['micro','starter','plus','group'];
const PLAN_NAMES = ['Micro Team', 'Venue Starter', 'Completion Plus', 'Group / Multi-site'];

/* ── Comparison table:
   • Desktop ≥780px: classic 5-column grid, grouped into 3 collapsible sections.
   • Mobile <780px: per-plan accordion. Each plan card opens to show the 15
     rows as a clean stack, so no horizontal scroll, no squeezed columns. */
const ComparisonTable = () => {
  const [isNarrow, setIsNarrow] = React.useState(false);
  React.useEffect(() => {
    const mql = window.matchMedia('(max-width: 780px)');
    const onMql = () => setIsNarrow(mql.matches);
    onMql();
    mql.addEventListener ? mql.addEventListener('change', onMql) : mql.addListener(onMql);
    return () => mql.removeEventListener ? mql.removeEventListener('change', onMql) : mql.removeListener(onMql);
  }, []);
  if (isNarrow) return <ComparisonAccordionMobile />;
  return <ComparisonGridDesktop />;
};

const ComparisonGridDesktop = () => {
  // Every group starts expanded — collapse buttons let dense scanners hide groups.
  const [open, setOpen] = React.useState(() => Object.fromEntries(COMPARE_GROUPS.map(g => [g.id, true])));
  const toggle = (id) => setOpen(o => ({ ...o, [id]: !o[id] }));

  return (
    <div style={{ background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 12, boxShadow: C.shadowLift, overflow: 'hidden' }}>
      {/* Header */}
      <div style={{ display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1fr 1fr', borderBottom: `1px solid ${C.borderStrong}`, background: 'rgba(228,222,212,0.45)' }}>
        <div style={{ padding: '14px 18px', fontFamily: F.sans, fontSize: 10.5, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: C.ink }}>Compare what's included</div>
        {PLAN_NAMES.map((n, i) => (
          <div key={n} style={{
            padding: '14px 12px', textAlign: 'center',
            fontFamily: F.sans, fontSize: 11, fontWeight: 700, letterSpacing: '1.3px', textTransform: 'uppercase',
            color: i === 1 ? C.brass : C.ink,
            background: i === 1 ? C.brassDim : 'transparent',
            borderLeft: `1px solid ${C.borderSubtle}`,
          }}>{n}</div>
        ))}
      </div>

      {COMPARE_GROUPS.map((group, gi) => {
        const isOpen = open[group.id];
        return (
          <React.Fragment key={group.id}>
            {/* Group divider header — clickable to collapse */}
            <button onClick={() => toggle(group.id)} aria-expanded={isOpen} style={{
              width: '100%', display: 'grid', gridTemplateColumns: '2.2fr 4fr',
              alignItems: 'center', gap: 12,
              padding: '12px 18px', background: gi === 0 ? 'transparent' : 'rgba(228,222,212,0.18)',
              borderTop: gi > 0 ? `1px solid ${C.borderStrong}` : 'none',
              borderBottom: isOpen ? `1px solid ${C.borderSubtle}` : 'none',
              cursor: 'pointer', textAlign: 'left',
              fontFamily: F.sans, fontSize: 10.5, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: C.brass,
            }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                <span style={{ display: 'inline-block', transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.15s', color: C.ash }}>▸</span>
                {group.title}
              </span>
              <span style={{ fontFamily: F.body, fontSize: 11, color: C.dust, textTransform: 'none', letterSpacing: 0, fontWeight: 400, justifySelf: 'end' }}>
                {group.rows.length} {group.rows.length === 1 ? 'row' : 'rows'}
              </span>
            </button>

            {isOpen && group.rows.map((row, idx) => (
              <div key={row.label} style={{
                display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1fr 1fr',
                borderBottom: idx < group.rows.length - 1 ? `1px solid ${C.borderSubtle}` : 'none',
              }}>
                <div style={{ padding: '14px 18px', fontFamily: F.body, fontSize: 13.5, color: C.ink, minWidth: 0 }}>
                  <Truncate>{row.label}</Truncate>
                </div>
                {PLAN_KEYS.map((k, i) => (
                  <div key={k} style={{
                    padding: '14px 12px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: i === 1 ? 'rgba(107,46,46,0.04)' : 'transparent',
                    borderLeft: `1px solid ${C.borderSubtle}`,
                    minWidth: 0,
                  }}>{cellValue(row[k], i === 1)}</div>
                ))}
              </div>
            ))}
          </React.Fragment>
        );
      })}
    </div>
  );
};

const ComparisonAccordionMobile = () => {
  // Default open: the featured plan
  const [open, setOpen] = React.useState('starter');
  const PLAN_META = [
    { k: 'micro',   name: 'Micro Team',         best: 'Cafés & pop-ups' },
    { k: 'starter', name: 'Venue Starter',      best: 'Most popular',  featured: true },
    { k: 'plus',    name: 'Completion Plus',    best: 'Help chasing completion' },
    { k: 'group',   name: 'Group / Multi-site', best: 'Multi-venue ops' },
  ];

  const renderMobileCell = (v) => {
    if (v === true)  return <span style={{ color: C.river, fontFamily: F.body, fontSize: 13.5 }}>Included</span>;
    if (v === false) return <span style={{ color: C.dust, fontFamily: F.body, fontSize: 13.5 }}>—</span>;
    return <span style={{ color: C.ink, fontFamily: F.body, fontSize: 13.5, fontWeight: 500 }}>{v}</span>;
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {PLAN_META.map(p => {
        const isOpen = open === p.k;
        return (
          <div key={p.k} style={{
            background: isOpen && p.featured ? C.brassDim : C.parchment,
            border: `1px solid ${isOpen && p.featured ? 'rgba(107,46,46,0.25)' : C.border}`,
            borderRadius: 12, boxShadow: C.shadowLift, overflow: 'hidden',
          }}>
            <button onClick={() => setOpen(o => o === p.k ? null : p.k)} aria-expanded={isOpen} style={{
              width: '100%', padding: '16px 18px', background: 'transparent', border: 'none',
              cursor: 'pointer', textAlign: 'left',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
              whiteSpace: 'normal',
            }}>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: F.sans, fontSize: 13, fontWeight: 600, color: C.ink, letterSpacing: '-0.2px' }}>{p.name}</div>
                <div style={{ fontFamily: F.body, fontSize: 11.5, color: p.featured ? C.brass : C.dust, marginTop: 2 }}>{p.best}</div>
              </div>
              <span style={{ flexShrink: 0, fontFamily: F.mono, fontSize: 16, color: C.brass, transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)', transition: 'transform 0.15s' }}>+</span>
            </button>

            {isOpen && (
              <div style={{ background: C.parchment, borderTop: `1px solid ${C.borderSubtle}` }}>
                {COMPARE_GROUPS.map((group, gi) => (
                  <div key={group.id}>
                    <div style={{
                      padding: '12px 18px 6px',
                      fontFamily: F.sans, fontSize: 9.5, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase',
                      color: C.brass, background: gi === 0 ? 'transparent' : 'rgba(228,222,212,0.30)',
                      borderTop: gi > 0 ? `1px solid ${C.borderSubtle}` : 'none',
                    }}>{group.title}</div>
                    {group.rows.map(row => (
                      <div key={row.label} style={{
                        display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 14,
                        padding: '10px 18px',
                        borderBottom: `1px solid ${C.borderSubtle}`,
                      }}>
                        <Truncate style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash }}>{row.label}</Truncate>
                        <div style={{ textAlign: 'right' }}>{renderMobileCell(row[p.k])}</div>
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

/* ── How we help your team complete training (7 steps) ──── */
const COMPLETION_STEPS = [
  { n: '01', title: 'Upload or invite your staff',           body: 'CSV import or one-by-one. Roles and venues set in minutes.' },
  { n: '02', title: 'Assign the starter compliance courses', body: 'Pick the pack or assign individual modules to roles.' },
  { n: '03', title: 'Staff complete short mobile lessons',   body: 'Plain English, key points highlighted. Works on any phone, no app to install.' },
  { n: '04', title: 'Tiber Course sends reminders',          body: 'Auto-emails before training slips. Higher tiers add reminder calls.' },
  { n: '05', title: 'Managers see who is complete or overdue', body: 'One live dashboard across staff, courses, and venues.' },
  { n: '06', title: 'Certificates and records are saved',    body: 'Named, dated PDFs stored against each learner. Inspection-ready.' },
  { n: '07', title: 'Higher tiers help chase completion',    body: 'Reminder calls, monthly check-ins, and a real human helping you push training over the line.' },
];

/* ── Pricing FAQ ── */
const PricingFAQ = ({ onNav }) => {
  const items = [
    { q: 'Do I have to subscribe, or can I buy one course?',
      a: 'Both. Buy individual course licences with no subscription — one licence covers one named employee for one course, including the lesson, test and certificate. Or subscribe for ongoing team access, the manager dashboard, reminders and completion records.' },
    { q: 'Is there a minimum contract?',
      a: 'Individual course purchases have no contract. Subscriptions run on a 6-month minimum, then you can cancel with notice. No auto lock-in beyond the initial six months.' },
    { q: 'What\'s the refund policy?',
      a: 'Full refunds are available as long as no course has been started. For individual purchases, the named learner hasn\'t begun the course. For subscriptions, no learner has started any course under the subscription. Once started, normally non-refundable. For subscriptions, the 6-month minimum still applies once anyone has started.' },
    { q: 'When do the courses go live, and what does pre-order mean?',
      a: 'The courses are in production now. You can pre-order at the launch discount — 30% off until 19 October 2026 — and you get full access to each course the moment it goes live. Every price shown already includes the discount.' },
    { q: 'Can I move from individual purchases to a subscription later?',
      a: 'Yes. Get in touch and we\'ll move you over and credit the unused portion of any current licences against your first subscription invoice.' },
    { q: 'Are VAT and certificates extra?',
      a: 'VAT is shown at checkout (UK customers) and isn\'t hidden in the headline price. Certificates are included on every pass — there are no per-certificate fees, ever.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: C.parchment, borderTop: `1px solid ${C.borderSubtle}`, marginTop: 80 }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '72px 40px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 48, alignItems: 'start' }}>
          <div>
            <Label color={C.brass}>Pricing FAQ</Label>
            <h2 style={{ fontFamily: F.sans, fontSize: 28, fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginBottom: 14 }}>
              The questions we hear most.
            </h2>
            <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.65, marginBottom: 18 }}>
              Anything else? A real person reads every message.
            </p>
            <Btn primary onClick={() => onNav('contact')}>Ask a question</Btn>
          </div>
          <div>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: `1px solid ${C.border}` }}>
                  <button
                    onClick={() => setOpen(o => o === i ? -1 : i)}
                    aria-expanded={isOpen}
                    style={{
                      width: '100%', background: 'none', border: 'none', cursor: 'pointer',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      padding: '18px 0', textAlign: 'left',
                      fontFamily: F.sans, fontSize: 14.5, fontWeight: 500, color: C.ink,
                      whiteSpace: 'normal', outline: 'none',
                    }}
                  >
                    <span style={{ paddingRight: 24 }}>{it.q}</span>
                    <span style={{
                      fontFamily: F.mono, fontSize: 18, color: C.brass,
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                      transition: 'transform 0.2s', flexShrink: 0, lineHeight: 1,
                    }} aria-hidden="true">+</span>
                  </button>
                  {isOpen && (
                    <div style={{
                      fontFamily: F.body, fontSize: 14, color: C.ash, lineHeight: 1.7,
                      paddingBottom: 20, maxWidth: 640,
                    }}>{it.a}</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ──────────────────────────────────────────────────────── */
const PricingPage = ({ onNav }) => (
  <div style={{ paddingTop: 124, background: C.parchment }}>
    {/* Header */}
    <div style={{ background: C.linen, borderBottom: `1px solid ${C.border}`, padding: '64px clamp(20px, 5vw, 40px) 56px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Label color={C.brass}>Pricing</Label>
        <h1 style={{ fontFamily: F.display, fontSize: 'clamp(32px, 8vw, 46px)', fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.15, marginBottom: 14, maxWidth: 760 }}>
          Pricing built around completion — not just access.
        </h1>
        <p style={{ fontFamily: F.body, fontSize: 16.5, color: C.ash, lineHeight: 1.65, maxWidth: 640, marginBottom: 12 }}>
          Short lessons, tests, certificates, reminders and manager visibility to help your team actually finish their training.
        </p>
        <p style={{ fontFamily: F.body, fontSize: 14.5, color: C.ash, lineHeight: 1.65, maxWidth: 640, marginBottom: 24, opacity: 0.85 }}>
          Many providers sell courses and leave you to chase staff yourself. Tiber Course helps managers see who has completed training, who is overdue, and what needs chasing next.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Btn primary onClick={() => { const el = document.getElementById('compare'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}>Compare plans</Btn>
          <Btn onClick={() => onNav('contact')}>Talk to us</Btn>
        </div>
      </div>
    </div>

    {/* Founding offer banner */}
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '28px 40px 0' }}>
      <div role="note" style={{
        display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
        background: C.brass, border: '1px solid rgba(0,0,0,0.12)',
        borderRadius: 12, padding: '16px 22px',
      }}>
        <span style={{
          fontFamily: F.sans, fontSize: 9.5, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase',
          color: C.brass, background: '#FFF8EE', padding: '4px 10px', borderRadius: 9999, whiteSpace: 'nowrap',
        }}>Pre-order offer</span>
        <span style={{ fontFamily: F.body, fontSize: 14, color: C.textInverse, lineHeight: 1.55, minWidth: 0 }}>
          Courses are still in production. <strong style={{ fontWeight: 600, color: '#fff' }}>Pre-order now and save {OFFER.discountPct}% until {OFFER.endsLabel}</strong> — every price shown already has the discount applied. You get full access the moment each course goes live.
        </span>
      </div>
    </div>

    {/* Two-route quick-links — tells buyers there are two ways to buy. */}
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 40px 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
        <a href="#individual-courses" style={{
          display: 'flex', alignItems: 'center', gap: 14, padding: '18px 22px',
          background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 12,
          textDecoration: 'none', boxShadow: C.shadowLift, transition: 'transform 0.15s, box-shadow 0.15s',
        }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = C.shadowCard; }}
           onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = C.shadowLift; }}>
          <div style={{ width: 42, height: 42, borderRadius: '50%', background: C.brassDim, border: '1px solid rgba(107,46,46,0.30)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontFamily: F.mono, fontSize: 14, color: C.brass, fontWeight: 600 }}>1</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.8px', textTransform: 'uppercase', color: C.brass, marginBottom: 4 }}>Buy individual courses</div>
            <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.5 }}>One named employee, one course. No subscription required.</div>
          </div>
        </a>
        <a href="#subscriptions" style={{
          display: 'flex', alignItems: 'center', gap: 14, padding: '18px 22px',
          background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 12,
          textDecoration: 'none', boxShadow: C.shadowLift, transition: 'transform 0.15s, box-shadow 0.15s',
        }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = C.shadowCard; }}
           onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = C.shadowLift; }}>
          <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'rgba(61,107,107,0.14)', border: '1px solid rgba(61,107,107,0.30)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontFamily: F.mono, fontSize: 14, color: C.river, fontWeight: 600 }}>2</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.8px', textTransform: 'uppercase', color: C.river, marginBottom: 4 }}>Subscribe for team training</div>
            <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.5 }}>Ongoing access, manager dashboard, reminders, completion records.</div>
          </div>
        </a>
      </div>
    </div>

    {/* ─── INDIVIDUAL COURSES — “Build your course pack” ─── */}
    <IndividualCourses onNav={onNav} />

    {/* ─── SUBSCRIPTIONS — section header + plans grid ─── */}
    <div id="subscriptions" style={{ maxWidth: 1100, margin: '0 auto', padding: '64px clamp(20px, 5vw, 40px) 0' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', marginBottom: 8 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px', background: 'rgba(61,107,107,0.10)', border: '1px solid rgba(61,107,107,0.25)', borderRadius: 9999 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.river }} />
          <span style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.river }}>Subscribe for team training</span>
        </div>
        <span style={{ fontFamily: F.body, fontSize: 12.5, color: C.dust, fontStyle: 'italic' }}>6-month minimum contract</span>
      </div>
      <h2 style={{ fontFamily: F.sans, fontSize: 28, fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginTop: 10, marginBottom: 8, maxWidth: 720 }}>
        For teams that want a dashboard, reminders, and proof of completion.
      </h2>
      <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.65, maxWidth: 640, marginBottom: 24 }}>
        Subscriptions include the manager dashboard, progress tracking, reminders, certificates, completion records and team reporting. Pick the size that fits.
      </p>
    </div>
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px 16px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 18, alignItems: 'stretch' }}>
        {PLANS.map(p => <PlanCard key={p.name} plan={p} onNav={onNav} />)}
      </div>
    </div>

    {/* Minimum contract + refund banner */}
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '24px 40px 0' }}>
      <div style={{
        background: C.linen, border: `1px solid ${C.border}`, borderRadius: 12,
        padding: '20px 24px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 18,
      }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass, marginBottom: 6 }}>6-month minimum</div>
          <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ink, lineHeight: 1.6 }}>
            All subscriptions run on a 6-month minimum contract. After that, cancel with notice — no auto lock-in.
          </div>
        </div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass, marginBottom: 6 }}>Full refund if no one's started</div>
          <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ink, lineHeight: 1.6 }}>
            Full refund on individual courses if the learner hasn't started. Same for subscriptions if no learner has started any course. Once started, normally non-refundable. <a href="#terms" onClick={(e) => { e.preventDefault(); onNav('terms'); }} style={{ color: C.brass, textDecoration: 'underline', textUnderlineOffset: 3 }}>Full terms</a>.
          </div>
        </div>
      </div>
    </div>

    {/* Outcome bullets */}
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '32px 40px 0' }}>
      <div style={{
        background: C.parchment, border: `1px solid ${C.border}`,
        borderRadius: 12, padding: '28px 32px', boxShadow: C.shadowLift,
      }}>
        <Label color={C.brass} mb={14}>Why this works</Label>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
          {[
            'Staff can complete lessons on their phone.',
            'Managers can see progress without spreadsheets.',
            'Reminder emails help reduce chasing.',
            'Higher tiers include check-ins and reminder calls to help push completion.',
            'Certificates and completion records are saved for proof.',
          ].map(b => (
            <div key={b} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <div style={{ width: 14, height: 14, borderRadius: '50%', background: C.riverDim, border: '1px solid rgba(61,107,107,0.30)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 3 }}>
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1 4l2 2 4-4" stroke={C.river} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <span style={{ fontFamily: F.body, fontSize: 14, color: C.ash, lineHeight: 1.6 }}>{b}</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* How we help your team complete training */}
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '64px 40px 0' }}>
      <div style={{ maxWidth: 720, marginBottom: 32 }}>
        <Label color={C.brass}>How we help</Label>
        <h2 style={{ fontFamily: F.sans, fontSize: 30, fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginBottom: 12 }}>
          How we help your team complete training.
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.7 }}>
          Less chasing. More completion. Clearer proof. Here's the seven-step loop every plan follows.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 18 }}>
        {COMPLETION_STEPS.map(s => (
          <div key={s.n} style={{
            background: C.parchment, border: `1px solid ${C.border}`,
            borderRadius: 12, padding: '22px 22px', boxShadow: C.shadowLift,
            display: 'flex', flexDirection: 'column', gap: 10, minWidth: 0,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 34, height: 34, background: C.brassDim, border: '1px solid rgba(107,46,46,0.30)', borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ fontFamily: F.mono, fontSize: 11, fontWeight: 600, color: C.brass }}>{s.n}</span>
              </div>
              <Truncate style={{ fontFamily: F.sans, fontSize: 14.5, fontWeight: 600, color: C.ink }}>{s.title}</Truncate>
            </div>
            <p style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.6 }}>{s.body}</p>
          </div>
        ))}
      </div>
    </div>

    {/* No hidden fees banner */}
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 40px 0' }}>
      <div style={{
        background: C.ink, borderRadius: 12, padding: '24px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 20, flexWrap: 'wrap',
        boxShadow: '0 8px 24px rgba(26,25,23,0.18)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, minWidth: 0 }}>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: C.brassLightDim, border: '1px solid rgba(185,112,112,0.45)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
          }}>
            <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M5 10l3.5 3.5L15 6" stroke={C.brassLight} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: F.display, fontSize: 20, fontStyle: 'italic', color: C.textInverse, lineHeight: 1.25 }}>No hidden fees. No surprises.</div>
            <div style={{ fontFamily: F.body, fontSize: 13.5, color: 'rgba(237,232,223,0.62)', marginTop: 4 }}>
              No setup charge. No per-certificate fees. Six-month minimum, then cancel with notice.
            </div>
          </div>
        </div>
        <button onClick={() => onNav('contact')} style={{
          background: C.brass, color: '#fff', border: 'none', borderRadius: 9999,
          padding: '12px 24px', cursor: 'pointer', fontFamily: F.sans, fontSize: 11, fontWeight: 600,
          letterSpacing: '1.5px', textTransform: 'uppercase', flexShrink: 0,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>Book a demo</button>
      </div>
    </div>

    {/* Feature comparison table */}
    <div id="compare" style={{ maxWidth: 1100, margin: '0 auto', padding: '64px clamp(20px, 5vw, 40px) 0' }}>
      <div style={{ maxWidth: 720, marginBottom: 24 }}>
        <Label color={C.brass}>Compare plans</Label>
        <h2 style={{ fontFamily: F.sans, fontSize: 28, fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px' }}>
          What's in each plan.
        </h2>
      </div>
      <ComparisonTable />
    </div>

    {/* Bespoke / Custom training */}
    <div style={{ maxWidth: 1100, margin: '0 auto', padding: '64px 40px 0' }}>
      <div style={{
        background: C.linen, border: `1px solid ${C.border}`,
        borderRadius: 14, padding: '36px 40px',
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32, alignItems: 'center',
      }}>
        <div style={{ minWidth: 0 }}>
          <Label color={C.brass}>Bespoke</Label>
          <h2 style={{ fontFamily: F.display, fontSize: 30, fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.2, marginBottom: 10 }}>
            Custom training built around your procedures.
          </h2>
          <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.65, marginBottom: 16 }}>
            Your SOPs, onboarding, brand standards or internal training, turned into short-form mobile lessons that staff actually complete.
          </p>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: F.display, fontSize: 30, color: C.ink, whiteSpace: 'nowrap' }}>from £1,500</span>
            <span style={{ fontFamily: F.body, fontSize: 13.5, color: C.dust }}>per custom course</span>
          </div>
          <button onClick={() => onNav('contact')} style={{
            background: C.ink, color: C.textInverse, border: 'none', borderRadius: 9999,
            padding: '13px 28px', cursor: 'pointer', fontFamily: F.sans, fontSize: 11, fontWeight: 600,
            letterSpacing: '1.5px', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>Discuss custom training</button>
        </div>
        <div>
          {[
            'Source material review',
            'Course script & lesson structure',
            'Short-form lesson build',
            'Quiz / test questions',
            'Digital certificate setup',
            'Optional voiceover / audio version',
            'Optional branded course visuals',
          ].map(item => (
            <div key={item} style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
              <div style={{ width: 14, height: 14, borderRadius: '50%', background: C.riverDim, border: '1px solid rgba(61,107,107,0.30)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1 4l2 2 4-4" stroke={C.river} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <span style={{ fontFamily: F.body, fontSize: 14, color: C.ash }}>{item}</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* Pricing FAQ — condensed version of the homepage FAQ, focused on the
        questions buyers actually ask while looking at the price ladder. */}
    <PricingFAQ onNav={onNav} />

    {/* CTA */}
    <section style={{ background: C.ink, borderTop: `1px solid rgba(237,232,223,0.06)`, marginTop: 80 }}>
      <div style={{ maxWidth: 660, margin: '0 auto', padding: '80px 40px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: F.display, fontSize: 38, fontWeight: 400, fontStyle: 'italic', color: C.textInverse, lineHeight: 1.25, marginBottom: 18 }}>
          Not sure which plan fits?
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 16, color: 'rgba(237,232,223,0.62)', lineHeight: 1.7, marginBottom: 32 }}>
          Tell us how many staff you're training and what roles they cover. We'll recommend the right option — and if Bespoke makes sense, we'll say so.
        </p>
        <BrassBtn light onClick={() => onNav('contact')}>Book a demo</BrassBtn>
      </div>
    </section>
  </div>
);

Object.assign(window, { PricingPage, CheckoutModal });
