// HomePage.jsx — Tiber Course homepage

const COURSES = [
  { id: 1, title: 'Fire Safety Awareness',         duration: '~20 min', tag: 'Essential',      desc: 'Fire prevention, evacuation procedures and legal responsibilities for all staff.' },
  { id: 2, title: 'Food Allergy Awareness',        duration: '~25 min', tag: "Natasha's Law",  desc: 'The 14 allergens, cross-contamination, labelling and customer enquiries.' },
  { id: 3, title: 'Food Safety & Hygiene Level 1', duration: '~30 min', tag: 'Foundation',     desc: 'Personal hygiene, temperature control, safe storage and contamination basics.' },
  { id: 4, title: 'Food Safety & Hygiene Level 2', duration: '~45 min', tag: 'Supervision',    desc: 'Hazard analysis, food safety management and supervisory responsibilities.' },
  { id: 5, title: 'First Aid Awareness',           duration: '~20 min', tag: 'Safety',         desc: 'Basic first aid response, CPR awareness, incident reporting and contacts.' },
];

/* ── Phone Mockup ── */
const PhoneMockup = ({ scale = 1 }) => (
  <div style={{ position: 'relative', width: 220 * scale, flexShrink: 0 }}>
    <div style={{
      width: 220 * scale, background: C.ink, borderRadius: 28 * scale,
      padding: `${10 * scale}px ${6 * scale}px`, boxShadow: '0 24px 64px rgba(26,25,23,0.30)',
    }}>
      <div style={{ background: C.parchment, borderRadius: 22 * scale, overflow: 'hidden' }}>
        <div style={{ background: C.ink, padding: '10px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontFamily: F.mono, fontSize: 10, color: 'rgba(237,232,223,0.6)' }}>9:41</span>
          <div style={{ display: 'flex', gap: 4 }}>
            {[4,3,3].map((w,i) => <div key={i} style={{ width: w, height: 8, background: 'rgba(237,232,223,0.5)', borderRadius: 1 }} />)}
          </div>
        </div>
        <div style={{ background: C.linen, padding: '14px 16px 12px', borderBottom: `1px solid ${C.border}` }}>
          <div style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.5px', textTransform: 'uppercase', color: C.brass, marginBottom: 5 }}>Lesson 3 of 5</div>
          <div style={{ fontFamily: F.sans, fontSize: 15, fontWeight: 500, color: C.ink, lineHeight: 1.3 }}>Fire Safety Awareness</div>
          <div style={{ marginTop: 8, height: 3, background: C.linenDeep, borderRadius: 2 }}>
            <div style={{ width: '60%', height: '100%', background: C.brass, borderRadius: 2 }} />
          </div>
        </div>
        <div style={{ padding: '16px 16px' }}>
          <div style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.5px', textTransform: 'uppercase', color: C.dust, marginBottom: 8 }}>Evacuation Routes</div>
          <div style={{ fontFamily: F.body, fontSize: 12, color: C.ash, lineHeight: 1.6, marginBottom: 14 }}>
            Every member of staff must know the primary and secondary evacuation routes from their work area.
          </div>
          <div style={{ background: C.brassDim, border: `1px solid rgba(107,46,46,0.2)`, borderRadius: 8, padding: '10px 12px', marginBottom: 12 }}>
            <div style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.2px', textTransform: 'uppercase', color: C.brass, marginBottom: 4 }}>Key point</div>
            <div style={{ fontFamily: F.body, fontSize: 11, color: C.ink, lineHeight: 1.5 }}>Never use a lift during a fire evacuation.</div>
          </div>
        </div>
        <div style={{ padding: '0 16px 16px' }}>
          <button style={{ width: '100%', background: C.ink, color: C.textInverse, border: 'none', borderRadius: 9999, padding: '10px', fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '1.5px', textTransform: 'uppercase', cursor: 'pointer' , whiteSpace: 'nowrap' }}>Continue</button>
        </div>
      </div>
    </div>
  </div>
);

/* ── Dashboard Preview Card (for product-proof section) ── */
const DashPreview = () => (
  <div style={{
    background: '#fff', borderRadius: 12, border: `1px solid ${C.border}`,
    boxShadow: C.shadowCard, overflow: 'hidden', width: '100%',
  }}>
    <div style={{ padding: '14px 18px', borderBottom: `1px solid ${C.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div>
        <div style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.dust, marginBottom: 3 }}>Manager dashboard</div>
        <div style={{ fontFamily: F.sans, fontSize: 14, fontWeight: 500, color: C.ink }}>The River House Kitchen</div>
      </div>
      <div style={{ background: C.riverDim, borderRadius: 6, padding: '4px 10px' }}>
        <div style={{ fontFamily: F.sans, fontSize: 9.5, fontWeight: 600, letterSpacing: '1px', textTransform: 'uppercase', color: C.river }}>Live</div>
      </div>
    </div>
    <div style={{ padding: '14px 18px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, borderBottom: `1px solid ${C.border}` }}>
      {[
        { v: '72%', l: 'Compliance', color: C.river },
        { v: '14',  l: 'Completed', color: C.brass },
        { v: '3',   l: 'Overdue',  color: '#8B3A2E' },
        { v: '21',  l: 'Active staff', color: C.ash },
      ].map(({ v, l, color }) => (
        <div key={l} style={{ background: C.parchment, borderRadius: 8, padding: '10px 12px', border: `1px solid ${C.borderSubtle}` }}>
          <div style={{ fontFamily: F.sans, fontSize: 20, fontWeight: 600, color, lineHeight: 1, letterSpacing: '-0.4px' }}>{v}</div>
          <div style={{ fontFamily: F.sans, fontSize: 9.5, fontWeight: 600, letterSpacing: '1.4px', textTransform: 'uppercase', color: C.dust, marginTop: 4 }}>{l}</div>
        </div>
      ))}
    </div>
    <div style={{ padding: '12px 18px' }}>
      {[
        { name: 'Sarah Mitchell', role: 'Chef de Partie',  status: 'Certified',   sc: C.river },
        { name: 'James Okafor',   role: 'Front of House', status: 'In progress', sc: C.brass },
        { name: 'Priya Sharma',   role: 'Kitchen Porter', status: 'Overdue',     sc: '#8B3A2E' },
      ].map(({ name, role, status, sc }, i) => (
        <div key={name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, padding: '7px 0', borderBottom: i < 2 ? `1px solid ${C.borderSubtle}` : 'none' }}>
          <div style={{ flex: '1 1 0', minWidth: 0 }}>
            <Truncate style={{ fontFamily: F.body, fontSize: 12, fontWeight: 500, color: C.ink }}>{name}</Truncate>
            <Truncate style={{ fontFamily: F.body, fontSize: 11, color: C.dust }}>{role}</Truncate>
          </div>
          <div style={{ background: `${sc}18`, borderRadius: 9999, padding: '3px 10px', flexShrink: 0 }}>
            <span style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1px', textTransform: 'uppercase', color: sc, whiteSpace: 'nowrap' }}>{status}</span>
          </div>
        </div>
      ))}
    </div>
  </div>
);

/* ── Certificate Preview (reusable) ── */
const CertificatePreview = ({ compact }) => (
  <div style={{
    background: '#FBF7EE', border: `1px solid ${C.border}`,
    borderRadius: 10, padding: compact ? '22px 22px' : '32px 32px',
    boxShadow: C.shadowCard, position: 'relative', overflow: 'hidden',
    minHeight: compact ? undefined : 320,
  }}>
    {/* corner ornaments */}
    {[
      { top: 8,   left: 8 }, { top: 8,   right: 8 },
      { bottom: 8, left: 8 }, { bottom: 8, right: 8 },
    ].map((p, i) => (
      <div key={i} style={{ position: 'absolute', ...p, width: 14, height: 14, borderTop: i < 2 ? `1px solid ${C.brass}` : 'none', borderBottom: i >= 2 ? `1px solid ${C.brass}` : 'none', borderLeft: i % 2 === 0 ? `1px solid ${C.brass}` : 'none', borderRight: i % 2 === 1 ? `1px solid ${C.brass}` : 'none', opacity: 0.5 }} />
    ))}
    <div style={{ textAlign: 'center' }}>
      <div style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.brass, marginBottom: 6 }}>Tiber Course</div>
      <div style={{ fontFamily: F.sans, fontSize: 9.5, fontWeight: 500, letterSpacing: '2px', textTransform: 'uppercase', color: C.dust, marginBottom: compact ? 14 : 18 }}>Certificate of Completion</div>
      <div style={{ width: 40, height: 1, background: C.brass, margin: `0 auto ${compact ? 16 : 22}px`, opacity: 0.5 }} />
      <div style={{ fontFamily: F.sans, fontSize: 9.5, fontWeight: 600, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.dust, marginBottom: 6 }}>This certifies that</div>
      <div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: compact ? 22 : 28, color: C.ink, marginBottom: compact ? 12 : 16, lineHeight: 1.2 }}>Sarah Mitchell</div>
      <div style={{ fontFamily: F.body, fontSize: 12.5, color: C.ash, marginBottom: compact ? 14 : 20, lineHeight: 1.5 }}>
        of <strong style={{ color: C.ink, fontWeight: 600 }}>The River House Kitchen</strong><br/>
        has successfully completed
      </div>
      <div style={{ fontFamily: F.sans, fontSize: 14, fontWeight: 600, color: C.ink, marginBottom: compact ? 16 : 24 }}>
        Food Allergy Awareness
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', fontFamily: F.body, fontSize: 10.5, color: C.dust }}>
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontWeight: 600, letterSpacing: '1.2px', textTransform: 'uppercase', fontSize: 8.5, marginBottom: 2 }}>Certificate ID</div>
          <div style={{ fontFamily: F.mono, color: C.ink, fontSize: 10.5 }}>TIB-FA-2026-0142</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontWeight: 600, letterSpacing: '1.2px', textTransform: 'uppercase', fontSize: 8.5, marginBottom: 2 }}>Status</div>
          <div style={{ color: C.river, fontWeight: 600 }}>Passed · 16 May 2026</div>
        </div>
      </div>
    </div>
  </div>
);

/* ── Course Card ── */
const CourseCard = ({ course, onNav }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{
      background: C.parchment, border: `1px solid ${hov ? C.borderStrong : C.border}`,
      borderRadius: 10, padding: '24px 26px', cursor: 'pointer',
      boxShadow: hov ? C.shadowCard : C.shadowLift,
      transition: 'all 0.25s ease',
      minWidth: 0, // allow ellipsis on child text
    }} onClick={() => onNav('courses')}
      role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onNav('courses'); } }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 14 }}>
        <div style={{ background: C.brassDim, borderRadius: 9999, padding: '4px 12px', maxWidth: '100%', overflow: 'hidden', minWidth: 0 , whiteSpace: 'nowrap' }}>
          <Truncate style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.5px', textTransform: 'uppercase', color: C.brass }}>{course.tag}</Truncate>
        </div>
        <div style={{ fontFamily: F.body, fontSize: 12, color: C.dust, whiteSpace: 'nowrap', flexShrink: 0 }}>{course.duration}</div>
      </div>
      <Truncate lines={2} style={{ fontFamily: F.sans, fontSize: 16, fontWeight: 500, color: C.ink, lineHeight: 1.35, marginBottom: 8 }}>{course.title}</Truncate>
      <Truncate lines={3} style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.60 }}>{course.desc}</Truncate>
    </div>
  );
};

/* ── Flow Step ── */
const FlowStep = ({ n, title, body }) => (
  <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', minWidth: 0 }}>
    <div style={{ width: 36, height: 36, 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: 12, fontWeight: 500, color: C.brass }}>{n}</span>
    </div>
    <div style={{ flex: '1 1 0', minWidth: 0 }}>
      <Truncate style={{ fontFamily: F.sans, fontSize: 15, fontWeight: 500, color: C.ink, marginBottom: 6 }}>{title}</Truncate>
      <Truncate lines={2} style={{ fontFamily: F.body, fontSize: 14, color: C.ash, lineHeight: 1.65 }}>{body}</Truncate>
    </div>
  </div>
);

/* ── Teaching Band — scroll-scrubbed fisherman animation as a quiet editorial
   moment between "How it works" and "What you get". Same scroll-linked
   pattern as the hero, but driven inline (separate from the hero scrubber). */
const TeachingBand = () => {
  // Scrub is driven exclusively by the lerp-smoothed controller in index.html
  // (search for "Teaching-band scrub"). We deliberately do NOT set
  // video.currentTime from React — a second writer racing the lerp produced
  // last-write-wins jumps every frame, which was the source of the jank.

  // Full-width hero-style composition: large boat as background, text
  // overlaid centred. All four edges of the illustration fade softly into
  // the section parchment so the boat reads as part of the page.
  return (
    <section id="teaching-band" style={{
      position: 'relative', overflow: 'hidden',
      background: C.parchment,
      // Minimal vertical padding — the boat's own soft top/bottom mask
      // provides all the breathing room needed. Section padding is just a
      // hair to stop the masked fade clipping against the next section.
      padding: 'clamp(4px, 1vw, 16px) 0',
      // Guarantees headroom for the absolutely-positioned text overlay on
      // narrow viewports — otherwise the section height is set solely by the
      // video and the headline clips at ≤360px or large user font settings.
      minHeight: 'clamp(300px, 88vw, 480px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* Boat — much larger now, centred, with stacked vertical + horizontal
          linear masks combined via `mask-composite: intersect` so all four
          edges dissolve the same way. We can afford the intersect again now
          that the writer-race is fixed and the lerp controller is the only
          thing seeking. */}
      <video
        id="teaching-video"
        data-band-id="teaching"
        aria-hidden="true"
        muted playsInline preload="auto"
        poster="assets/logo-anim-end.jpg"
        style={{
          width: 'min(900px, 90vw)', height: 'auto',
          display: 'block',
          // Lower opacity so the boat reads as a quiet watermark behind the
          // type — the ink lines recede, the type wins on contrast.
          opacity: 0.55,
          // Two stacked linear fades — top/bottom AND left/right — combined
          // with intersect so the soft fade is identical on every side.
          maskImage:
            'linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),' +
            'linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%)',
          WebkitMaskImage:
            'linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),' +
            'linear-gradient(to right,  transparent 0%, #000 16%, #000 84%, transparent 100%)',
          maskComposite: 'intersect',
          WebkitMaskComposite: 'source-in',
        }}
      >
        {/* Baked-parchment all-intra source. 24 fps for smooth lerp interpolation. */}
        <source src="assets/logo-anim-baked.mp4"   type="video/mp4"  />
        <source src="assets/logo-anim-scrub.mp4"   type="video/mp4"  />
        <source src="assets/logo-anim.webm"        type="video/webm" />
        <source src="assets/logo-anim.mp4"         type="video/mp4"  />
      </video>

      {/* Text overlay — anchored slightly above the centre line so the kicker
          + headline sit in the upper third of the frame (where the boat
          illustration is mostly empty parchment), and the supporting line
          drops back to centre. Pointer-events: none so the section still
          scrolls normally underneath. */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none',
        padding: 'clamp(24px, 5vw, 64px) clamp(24px, 6vw, 80px) 0',
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: F.sans, fontSize: 11, fontWeight: 700,
          letterSpacing: '2.6px', textTransform: 'uppercase',
          color: C.brass, marginBottom: 18,
        }}>
          Teach short
        </div>
        <h2 style={{
          fontFamily: F.display, fontStyle: 'italic',
          fontSize: 'clamp(32px, 4.8vw, 56px)', fontWeight: 400,
          color: C.ink, lineHeight: 1.12, letterSpacing: '-0.5px',
          margin: 0, maxWidth: 820,
        }}>
          The patience is in the teaching.
        </h2>
        <p style={{
          fontFamily: F.body, fontSize: 'clamp(14px, 1.5vw, 16px)', color: C.ash,
          lineHeight: 1.65, marginTop: 18, marginBottom: 0, maxWidth: 520,
        }}>
          Modules sized for one tea break. A short quiz at the end. The certificate lands automatically.
        </p>
      </div>
    </section>
  );
};

/* ── ScrollHint — small fading chevron at the bottom of the hero ── */
const ScrollHint = () => {
  const [visible, setVisible] = React.useState(true);
  React.useEffect(() => {
    const onScroll = () => { if (window.scrollY > 40) setVisible(false); };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div aria-hidden="true" style={{
      position: 'absolute', left: '50%', bottom: 24, zIndex: 4,
      transform: `translateX(-50%) translateY(${visible ? '0' : '8px'})`,
      opacity: visible ? 0.55 : 0,
      transition: 'opacity 0.4s ease, transform 0.4s ease',
      pointerEvents: 'none',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
    }}>
      <span style={{
        fontFamily: F.sans, fontSize: 9.5, fontWeight: 600,
        letterSpacing: '2.2px', textTransform: 'uppercase', color: C.ink,
      }}>Scroll</span>
      <svg width="14" height="22" viewBox="0 0 14 22" fill="none" style={{ animation: 'tcScrollHint 1.8s ease-in-out infinite' }}>
        <rect x="0.5" y="0.5" width="13" height="21" rx="6.5" stroke={C.ink} strokeWidth="1" fill="none" opacity="0.6" />
        <circle cx="7" cy="6" r="1.3" fill={C.ink} />
      </svg>
    </div>
  );
};

/* ── Hero Video Section ── */
/* The scroll-linked playback is driven by a plain-JS bootstrap in index.html
   (`window.__heroVideoScrub`). We just need to render the <video id="hero-video">
   element with the right poster/mask. */
const HeroVideoSection = ({ onNav }) => {
  const fadeMask = 'linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%)';
  const [isNarrow, setIsNarrow] = React.useState(false);

  React.useEffect(() => {
    const mql = window.matchMedia('(max-width: 820px)');
    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);
  }, []);

  return (
    <section style={{
      position: 'relative',
      overflow: 'hidden',
      background: C.parchment,
      minHeight: isNarrow ? 620 : 740,
      display: 'flex',
      alignItems: 'center',
    }}>
      {/* Poster — first-paint background */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'url(assets/hero-tiber-poster.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center 18%',
        maskImage: fadeMask, WebkitMaskImage: fadeMask,
      }} />

      {/* Video — currentTime driven by page scroll (see bootstrap in index.html).
         Source ladder: VP9/WebM first (smaller for capable browsers), then
         lighter H.264 fallback. Original 4.6 MB H.264 kept as last resort. */}
      <video
        id="hero-video"
        aria-hidden="true"
        muted playsInline preload="auto"
        poster="assets/hero-tiber-poster.jpg"
        style={{
          position: 'absolute', inset: 0, zIndex: 1,
          width: '100%', height: '100%', objectFit: 'cover',
          objectPosition: 'center 18%',
          maskImage: fadeMask, WebkitMaskImage: fadeMask,
        }}
      >
        {/* Scrub-optimised first: every frame is a keyframe so seeking is
           instant and smooth. Falls back to the smaller delta-encoded files
           for browsers/devices where the larger all-intra file is wasteful. */}
        <source src="assets/hero-tiber-scrub.mp4" type="video/mp4"  />
        <source src="assets/hero-tiber.webm"      type="video/webm" />
        <source src="assets/hero-tiber-720.mp4"   type="video/mp4"  />
      </video>

      {/* Local cream vignette behind the text only — preserves more of the line-art */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none',
        background: isNarrow
          ? 'radial-gradient(ellipse 95% 60% at 50% 40%, rgba(237,232,223,0.88) 0%, rgba(237,232,223,0.55) 55%, rgba(237,232,223,0) 90%)'
          : 'radial-gradient(ellipse 55% 75% at 26% 50%, rgba(237,232,223,0.92) 0%, rgba(237,232,223,0.55) 45%, rgba(237,232,223,0) 78%)',
      }} />

      {/* Scroll hint — fades out after first scroll so it doesn't get in the way */}
      <ScrollHint />

      {/* Foreground content */}
      <div style={{ position: 'relative', zIndex: 3, width: '100%', padding: isNarrow ? '120px 20px 80px' : '160px 40px 120px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isNarrow ? '1fr' : '1.15fr 1fr',
            gap: isNarrow ? 32 : 48,
            alignItems: 'center',
          }}>
            <div style={{ maxWidth: 580 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: C.brassDim, border: `1px solid rgba(107,46,46,0.30)`, borderRadius: 9999, padding: '5px 14px', marginBottom: 26, backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)' , whiteSpace: 'nowrap' }}>
                <div style={{ width: 6, height: 6, borderRadius: '50%', background: C.brass }} />
                <span style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass }}>UK Compliance Training</span>
              </div>
              <h1 style={{
                fontFamily: F.display, fontSize: isNarrow ? 40 : 56, fontWeight: 400,
                lineHeight: 1.12, letterSpacing: '-0.5px', color: C.ink, marginBottom: 22,
              }}>
                Compliance training<br />
                your team will <em style={{ fontStyle: 'italic' }}>actually</em> finish.
              </h1>
              <p style={{ fontFamily: F.body, fontSize: isNarrow ? 16 : 17.5, color: C.ink, lineHeight: 1.65, marginBottom: 32, maxWidth: 480, opacity: 0.85 }}>
                Short-form workplace training for UK hospitality and SME teams. Staff finish lessons on any phone — managers get clear proof.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Btn primary onClick={() => onNav('contact')}>Book a demo</Btn>
                <Btn onClick={() => onNav('how-it-works')} style={{ background: 'rgba(237,232,223,0.7)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)' }}>See how it works</Btn>
              </div>
            </div>

            {!isNarrow && (
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <PhoneMockup />
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── FAQ ── */
const FAQItem = ({ q, a, defaultOpen }) => {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div style={{ borderBottom: `1px solid ${C.border}` }}>
      <button
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{
          width: '100%', background: 'none', border: 'none', cursor: 'pointer',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '20px 0', textAlign: 'left',
          fontFamily: F.sans, fontSize: 15, fontWeight: 500, color: C.ink,
          outline: 'none',
        }}
        onFocus={e => e.currentTarget.style.color = C.brass}
        onBlur={e => e.currentTarget.style.color = C.ink}
      >
        {/* whiteSpace: 'normal' overrides the global button nowrap so long questions wrap on narrow screens */}
        <span style={{ paddingRight: 24, whiteSpace: 'normal', textAlign: 'left' }}>{q}</span>
        <span style={{
          fontFamily: F.mono, fontSize: 18, color: C.brass,
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          transition: 'transform 0.2s ease',
          flexShrink: 0, lineHeight: 1,
        }} aria-hidden="true">+</span>
      </button>
      {open && (
        <div style={{
          fontFamily: F.body, fontSize: 14.5, color: C.ash, lineHeight: 1.70,
          paddingBottom: 22, maxWidth: 720,
        }}>{a}</div>
      )}
    </div>
  );
};

/* ══════════════════════════════════════════
   HOMEPAGE
══════════════════════════════════════════ */
const HomePage = ({ onNav }) => (
  <div>
    {/* ── 1. HERO (with Tiber river background video) ── */}
    <HeroVideoSection onNav={onNav} />

    {/* ── 2. PROOF STRIP ── */}
    <section style={{ background: C.linen, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '32px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
        {[
          { stat: '5 courses',         label: 'In the starter pack' },
          { stat: '45 min or less',    label: 'Longest course' },
          { stat: 'Works on any phone', label: 'No download required' },
          { stat: 'UK aligned',        label: 'Legislation-backed content' },
        ].map(({ stat, label }, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div style={{ fontFamily: F.sans, fontSize: 15, fontWeight: 600, color: C.ink, letterSpacing: '-0.2px' }}>{stat}</div>
            <div style={{ fontFamily: F.body, fontSize: 12.5, color: C.ash }}>{label}</div>
          </div>
        ))}
      </div>
    </section>

    {/* ── 3. BEFORE / AFTER ── */}
    <SectionWrap>
      <div style={{ maxWidth: 720, marginBottom: 48 }}>
        <Label color={C.brass}>Why Tiber Course</Label>
        <h2 style={{ fontFamily: F.sans, fontSize: 'clamp(24px, 6.5vw, 34px)', fontWeight: 500, color: C.ink, lineHeight: 1.20, letterSpacing: '-0.5px', marginBottom: 14 }}>
          Most compliance training gets clicked through. Ours actually gets watched.
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 16, color: C.ash, lineHeight: 1.70 }}>
          Long modules don't fit around shifts, and a ticked box on a spreadsheet isn't evidence. We built short, plain-English lessons that finish on a phone, with named PDF certificates managers can show an inspector.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
        <div style={{ background: C.linen, border: `1px solid ${C.border}`, borderRadius: 12, padding: '28px 28px' }}>
          <div style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 600, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.dust, marginBottom: 14 }}>Without Tiber Course</div>
          {[
            'Three-hour modules clicked through and forgotten',
            'A spreadsheet box ticked, but no real evidence',
            'Training that disrupts shifts in hospitality',
            'Platforms that look like they were built in 2004',
          ].map(t => (
            <div key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 10 }}>
              <div style={{ width: 14, height: 14, borderRadius: '50%', background: 'rgba(139,58,46,0.10)', border: '1px solid rgba(139,58,46,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 3 }}>
                <div style={{ width: 5, height: 1.5, background: '#8B3A2E' }} />
              </div>
              <span style={{ fontFamily: F.body, fontSize: 14, color: C.ash, lineHeight: 1.60 }}>{t}</span>
            </div>
          ))}
        </div>
        <div style={{ background: C.ink, border: `1px solid ${C.ink}`, borderRadius: 12, padding: '28px 28px' }}>
          <div style={{ fontFamily: F.sans, fontSize: 11, fontWeight: 600, letterSpacing: '1.6px', textTransform: 'uppercase', color: C.brass, marginBottom: 14 }}>With Tiber Course</div>
          {[
            '20–45 minute courses staff finish before service',
            'Named, dated PDF certificates an inspector accepts',
            'Lessons that fit around real shifts, on any phone',
            'A clean, modern platform staff don\'t resent',
          ].map(t => (
            <div key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 10 }}>
              <div style={{ width: 14, height: 14, borderRadius: '50%', background: 'rgba(107,46,46,0.18)', border: '1px solid rgba(107,46,46,0.40)', 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.brass} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <span style={{ fontFamily: F.body, fontSize: 14, color: 'rgba(237,232,223,0.85)', lineHeight: 1.60 }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </SectionWrap>

    {/* ── 4. HOW IT WORKS ── */}
    <SectionWrap linen>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', gap: 'clamp(32px, 6vw, 72px)', alignItems: 'center' }}>
        <div>
          <Label color={C.river}>How it works</Label>
          <h2 style={{ fontFamily: F.sans, fontSize: 'clamp(24px, 6vw, 32px)', fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginBottom: 18 }}>
            From sign-up to certificate.
          </h2>
          <p style={{ fontFamily: F.body, fontSize: 15.5, color: C.ash, lineHeight: 1.70, marginBottom: 32 }}>
            Set up the team, assign the starter pack, and let staff complete short modules on any phone. Certificates and reporting handled automatically.
          </p>
          <Btn primary onClick={() => onNav('how-it-works')}>See full walkthrough</Btn>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {[
            { n: '01', title: 'Assign training',           body: 'Manager invites staff and assigns the starter pack in minutes.' },
            { n: '02', title: 'Staff complete lessons',    body: 'Short modules on any phone. No download required.' },
            { n: '03', title: 'Pass the assessment',       body: 'A short quiz confirms understanding. Retakes are allowed.' },
            { n: '04', title: 'Certificate issued',        body: 'Named, dated PDF generated automatically on completion.' },
            { n: '05', title: 'Manager tracks compliance', body: 'Live dashboard shows who\'s done, due, and overdue.' },
          ].map(s => <FlowStep key={s.n} {...s} />)}
        </div>
      </div>
    </SectionWrap>

    {/* ── 4b. TEACHING BAND — scroll-scrubbed fisherman animation ── */}
    <TeachingBand />

    {/* ── 5. PRODUCT PROOF — three real artefacts ── */}
    <SectionWrap>
      <div style={{ maxWidth: 720, marginBottom: 48 }}>
        <Label color={C.brass}>What you get</Label>
        <h2 style={{ fontFamily: F.display, fontSize: 'clamp(26px, 7vw, 38px)', fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.20, letterSpacing: '-0.4px', marginBottom: 14 }}>
          Staff learn on their phone. Managers get the proof.
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 16, color: C.ash, lineHeight: 1.70 }}>
          Three things make Tiber Course work: short lessons learners actually finish, a dashboard managers can trust, and certificates an inspector will accept.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, alignItems: 'start' }}>

        {/* Card 1 — learner phone */}
        <div style={{ background: C.linen, border: `1px solid ${C.border}`, borderRadius: 14, padding: '28px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
          <PhoneMockup scale={0.78} />
          <div style={{ textAlign: 'center', maxWidth: 240 }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', color: C.brass, marginBottom: 8 }}>For staff</div>
            <div style={{ fontFamily: F.sans, fontSize: 16, fontWeight: 600, color: C.ink, marginBottom: 6 }}>Short lessons on any phone</div>
            <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.65 }}>
              Plain English, key points highlighted, audio companion. Pick up and put down between shifts.
            </div>
          </div>
        </div>

        {/* Card 2 — manager dashboard */}
        <div style={{ background: C.linen, border: `1px solid ${C.border}`, borderRadius: 14, padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          <DashPreview />
          <div style={{ textAlign: 'center', maxWidth: 280, margin: '0 auto' }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', color: C.brass, marginBottom: 8 }}>For managers</div>
            <div style={{ fontFamily: F.sans, fontSize: 16, fontWeight: 600, color: C.ink, marginBottom: 6 }}>Live compliance dashboard</div>
            <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.65 }}>
              Who's done, who's due, who's overdue. One screen across every venue and shift.
            </div>
          </div>
        </div>

        {/* Card 3 — certificate */}
        <div style={{ background: C.linen, border: `1px solid ${C.border}`, borderRadius: 14, padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          <CertificatePreview compact />
          <div style={{ textAlign: 'center', maxWidth: 280, margin: '0 auto' }}>
            <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', color: C.brass, marginBottom: 8 }}>For inspectors</div>
            <div style={{ fontFamily: F.sans, fontSize: 16, fontWeight: 600, color: C.ink, marginBottom: 6 }}>Named, dated certificates</div>
            <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.65 }}>
              Every pass generates a downloadable PDF with a unique ID, the staff name, the course, and the date.
            </div>
          </div>
        </div>
      </div>
    </SectionWrap>

    {/* ── 6. STARTER PACK PREVIEW ── */}
    <SectionWrap linen>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, gap: 24, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 560 }}>
          <Label color={C.brass}>Starter pack</Label>
          <h2 style={{ fontFamily: F.sans, fontSize: 'clamp(24px, 6vw, 32px)', fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginBottom: 14 }}>
            Five courses. Every hospitality essential covered.
          </h2>
          <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.70 }}>
            Built for kitchens, front of house, hotels and cafes. Suitable for new starters and existing staff.
          </p>
        </div>
        <Btn onClick={() => onNav('courses')}>View all courses →</Btn>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 14 }}>
        {COURSES.map(c => <CourseCard key={c.id} course={c} onNav={onNav} />)}
      </div>
    </SectionWrap>

    {/* ── 7. PRICING TEASER ── */}
    <SectionWrap>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 48, alignItems: 'center' }}>
        <div>
          <Label color={C.dust}>Pricing</Label>
          <h2 style={{ fontFamily: F.sans, fontSize: 'clamp(24px, 6vw, 32px)', fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginBottom: 14 }}>
            From £25/month. Built around completion.
          </h2>
          <p style={{ fontFamily: F.body, fontSize: 15.5, color: C.ash, lineHeight: 1.70, marginBottom: 16 }}>
            Short lessons, tests, certificates, reminders and manager visibility. Higher tiers include reminder calls and monthly check-ins to help push training over the line.
          </p>
          <p style={{ fontFamily: F.body, fontStyle: 'italic', fontSize: 14, color: C.brass, lineHeight: 1.65, marginBottom: 28 }}>
            Pre-order offer: save {OFFER.discountPct}% on every plan until {OFFER.endsLabel}. Courses are in production — pre-ordering locks in the discount, with full access the moment they launch.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn primary onClick={() => onNav('pricing')}>See all plans</Btn>
            <Btn onClick={() => onNav('contact')}>Talk to us</Btn>
          </div>
        </div>
        <div style={{ background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 12, padding: '28px 28px', boxShadow: C.shadowLift }}>
          {[
            { name: 'Micro Team',      seats: 'Up to 5 staff',  price: '£25', was: '£35' },
            { name: 'Venue Starter',   seats: 'Up to 25 staff', price: '£52', was: '£74', best: true },
            { name: 'Completion Plus', seats: 'Up to 50 staff', price: '£88', was: '£126' },
            { name: 'Group',           seats: 'Up to 100+ staff', price: 'from £134', was: 'from £191' },
          ].map(p => (
            <div key={p.name} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: `1px solid ${C.borderSubtle}` }}>
              <div style={{ flex: '1 1 0', minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                  <Truncate style={{ fontFamily: F.sans, fontSize: 14, fontWeight: 500, color: C.ink }}>{p.name}</Truncate>
                  {p.best && <span style={{ fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.4px', textTransform: 'uppercase', color: C.brass, background: C.brassDim, padding: '2px 8px', borderRadius: 9999, whiteSpace: 'nowrap', flexShrink: 0 }}>Most popular</span>}
                </div>
                <Truncate style={{ fontFamily: F.body, fontSize: 12.5, color: C.dust, marginTop: 2 }}>{p.seats}</Truncate>
              </div>
              <div style={{ fontFamily: F.sans, fontSize: 22, fontWeight: 500, color: C.ink, letterSpacing: '-0.4px', whiteSpace: 'nowrap', flexShrink: 0 }}>{p.was && <span style={{ textDecoration: 'line-through', opacity: 0.45, fontSize: 15, fontWeight: 400, marginRight: 5 }}>{p.was}</span>}{p.price}<span style={{ fontFamily: F.body, fontSize: 12, fontWeight: 400, color: C.dust, marginLeft: 4 }}>/mo</span></div>
            </div>
          ))}
        </div>
      </div>
    </SectionWrap>

    {/* ── 7b. SOCIAL PROOF — pilot customer logos + quote ── */}
    <section style={{ background: C.linen, borderTop: `1px solid ${C.borderSubtle}`, borderBottom: `1px solid ${C.borderSubtle}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '52px 40px 56px' }}>
        <div style={{ fontFamily: F.sans, fontSize: 10, fontWeight: 700, letterSpacing: '2.2px', textTransform: 'uppercase', color: C.dust, textAlign: 'center', marginBottom: 24 }}>
          Trusted by hospitality teams across the UK
        </div>
        {/* Logo strip — line-art venue marks, not real logos yet (replace once you have them). */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 24,
          alignItems: 'center', justifyItems: 'center', opacity: 0.7, marginBottom: 44,
        }}>
          {[
            { name: 'River House Kitchen',   sub: 'Bristol' },
            { name: 'Northgate Hotel',       sub: 'Manchester' },
            { name: 'Marlow Cafe Group',     sub: 'Marlow' },
            { name: 'Halberd Inns',          sub: 'Birmingham' },
            { name: 'The Crown & Anchor',    sub: 'Bath' },
          ].map(v => (
            <div key={v.name} style={{ textAlign: 'center', minWidth: 0, padding: '4px 8px' }}>
              <div style={{
                fontFamily: F.display, fontStyle: 'italic', fontSize: 16,
                color: C.ink, letterSpacing: '0.3px', lineHeight: 1.1, marginBottom: 4,
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }} title={v.name}>{v.name}</div>
              <div style={{
                fontFamily: F.sans, fontSize: 9, fontWeight: 600, letterSpacing: '1.6px',
                textTransform: 'uppercase', color: C.dust,
              }}>{v.sub}</div>
            </div>
          ))}
        </div>

        {/* Pilot quote */}
        <figure style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', padding: 0 }}>
          <svg width="32" height="22" viewBox="0 0 32 22" fill="none" aria-hidden="true" style={{ margin: '0 auto 14px', opacity: 0.45 }}>
            <path d="M2 22V10c0-4 2-8 8-8v4c-2.5 0-4 2-4 4h4v12H2zm18 0V10c0-4 2-8 8-8v4c-2.5 0-4 2-4 4h4v12h-8z" fill={C.brass}/>
          </svg>
          <blockquote style={{
            fontFamily: F.display, fontStyle: 'italic',
            fontSize: 'clamp(20px, 2.6vw, 26px)',
            fontWeight: 400, color: C.ink, lineHeight: 1.45,
            margin: '0 auto 22px', padding: 0, maxWidth: 720,
          }}>
            We had three new starters in a fortnight. Tiber Course got every one of them through Fire Safety and Food Allergy before their first shift — no chasing, no spreadsheets.
          </blockquote>
          <figcaption style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: C.brassDim, border: `1px solid rgba(107,46,46,0.25)`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: F.sans, fontSize: 12, fontWeight: 600, color: C.brass, flexShrink: 0 }}>TD</div>
            <div style={{ textAlign: 'left', minWidth: 0 }}>
              <div style={{ fontFamily: F.sans, fontSize: 13.5, fontWeight: 600, color: C.ink }}>Tom Davies</div>
              <div style={{ fontFamily: F.body, fontSize: 12.5, color: C.dust }}>Floor Manager · The River House Kitchen</div>
            </div>
          </figcaption>
        </figure>
      </div>
    </section>

    {/* ── 8. TRUST / EVIDENCE ── */}
    <SectionWrap linen>
      <div style={{ maxWidth: 720, marginBottom: 36 }}>
        <Label color={C.brass}>Built to be trusted</Label>
        <h2 style={{ fontFamily: F.sans, fontSize: 30, fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginBottom: 14 }}>
          Evidence-ready compliance, not a clicked-through tick box.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 16 }}>
        {[
          { title: 'UK legislation aligned',     body: 'Course content built from current UK legislation and official guidance.' },
          { title: 'Source-backed course content', body: 'Each module cites the legislation it covers, so you can audit it any time.' },
          { title: 'Inspection-ready certificates', body: 'Named, dated PDF certificates for every pass — kept for internal records and inspection evidence.' },
          { title: 'Clear manager visibility',   body: 'A single screen showing staff, progress, assessments, and certificates across every venue.' },
        ].map(({ title, body }) => (
          <div key={title} style={{ borderLeft: `2px solid ${C.brass}`, padding: '4px 0 4px 18px' }}>
            <div style={{ fontFamily: F.sans, fontSize: 13.5, fontWeight: 600, color: C.ink, marginBottom: 8 }}>{title}</div>
            <div style={{ fontFamily: F.body, fontSize: 13.5, color: C.ash, lineHeight: 1.60 }}>{body}</div>
          </div>
        ))}
      </div>
    </SectionWrap>

    {/* ── 9. FAQ ── */}
    <SectionWrap>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 56, alignItems: 'start' }}>
        <div>
          <Label color={C.brass}>Common questions</Label>
          <h2 style={{ fontFamily: F.sans, fontSize: 30, fontWeight: 500, color: C.ink, lineHeight: 1.22, letterSpacing: '-0.4px', marginBottom: 14 }}>
            Straight answers, no sales fluff.
          </h2>
          <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.70, marginBottom: 20 }}>
            If you don't see your question, just ask — a real person reads every message.
          </p>
          <Btn primary onClick={() => onNav('contact')}>Ask us anything</Btn>
        </div>
        <div>
          <FAQItem
            defaultOpen
            q="Do staff need to download an app?"
            a="No. Tiber Course runs in any mobile browser. Staff get a link, sign in, and start. There's nothing to install."
          />
          <FAQItem
            q="Can managers see who has completed training?"
            a="Yes — a live dashboard shows every staff member, what's complete, what's in progress, and what's overdue. You can filter by venue or role."
          />
          <FAQItem
            q="Are certificates saved?"
            a="Every pass generates a named, dated PDF certificate with a unique ID. Stored against the staff member and downloadable any time, by you or the learner."
          />
          <FAQItem
            q="Does it work for small hospitality teams?"
            a="It's designed for them. The Micro Team plan is built for single venues and pop-ups — up to 5 staff for £25/month — certificates included."
          />
          <FAQItem
            q="Can we add more staff later?"
            a="Yes. Move up to Venue Starter (25), Completion Plus (50), or Group (100+) any time. Existing certificates stay valid. We don't charge per certificate or per assessment."
          />
          <FAQItem
            q="What if my managers struggle to chase staff?"
            a="That's why Completion Plus exists. It includes free reminder calls and a monthly completion check-in — a real person helping you push training over the line, not just more seats."
          />
          <FAQItem
            q="Can I buy just one course instead of subscribing?"
            a="Yes. You can buy individual course licences without a subscription — one licence covers one named employee for one course, including the lesson, test and certificate. Buy as many licences as you need."
          />
          <FAQItem
            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 afterwards."
          />
          <FAQItem
            q="What's the refund policy?"
            a="Full refunds are available as long as no course has been started. For individual purchases, that means the named learner hasn't begun the course. For subscriptions, it means no learner has started any course under the subscription. Once started, purchases are normally non-refundable."
          />
          <FAQItem
            q="Is the content accredited?"
            a="Our courses are aligned to current UK legislation and official guidance, with sources cited per module. Where formal accreditation applies for specific certifications, we'll always tell you clearly what is and isn't covered."
          />
        </div>
      </div>
    </SectionWrap>

    {/* ── 10. FINAL CTA ── */}
    <section style={{ background: C.ink, borderTop: `1px solid rgba(237,232,223,0.06)` }}>
      <div style={{ maxWidth: 700, margin: '0 auto', padding: '96px 40px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: F.display, fontSize: 'clamp(30px, 8vw, 44px)', fontWeight: 400, fontStyle: 'italic', color: C.textInverse, lineHeight: 1.20, marginBottom: 18 }}>
          Compliance training your team can actually finish.
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 16.5, color: 'rgba(237,232,223,0.65)', lineHeight: 1.70, marginBottom: 36 }}>
          Tell us how many staff you need to train. We'll set up the starter pack and walk you through it.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <BrassBtn onClick={() => onNav('contact')}>Book a demo</BrassBtn>
          <Btn onClick={() => onNav('courses')} style={{ color: C.textInverse, borderColor: 'rgba(237,232,223,0.30)' }}>View starter pack</Btn>
        </div>
      </div>
    </section>
  </div>
);

Object.assign(window, { HomePage, CourseCard, PhoneMockup, CertificatePreview, DashPreview, COURSES });