// HowItWorksPage.jsx — Tiber Course "How it works"

const HIW_STEPS = [
  {
    n: '01',
    title: 'Set up your team',
    body: 'A manager creates accounts for staff in minutes. No IT setup, no software install. Just an email invite — staff log in on any phone or laptop.',
    detail: 'Bulk invite by email or upload a CSV. Roles, sites and starter pack are assigned at the same time.',
  },
  {
    n: '02',
    title: 'Assign the right courses',
    body: 'Pick the starter pack, or assign individual modules by role. New starters get the full pack on day one. Existing staff get refreshers when due.',
    detail: 'Hospitality presets cover kitchen, FOH, supervisors and managers. Reassign at any time.',
  },
  {
    n: '03',
    title: 'Staff complete short modules',
    body: 'Each course is broken into 3–9 micro-lessons of 4–8 minutes. Plain English, audio companion, no tedious filler. Designed to fit around shifts.',
    detail: 'Mobile-first. Pause and resume. Audio narration optional. Works on any phone — no app to download.',
  },
  {
    n: '04',
    title: 'Pass the assessment',
    body: 'A short quiz at the end confirms understanding. If a learner doesn\'t pass first time, they can retake. We track attempts so you can support the people who need it.',
    detail: 'Pass mark configurable per course. Retakes unlimited and free.',
  },
  {
    n: '05',
    title: 'Certificate is issued automatically',
    body: 'On a pass, a named, dated PDF certificate is generated and stored against the learner\'s record. Downloadable any time, by the learner or the manager.',
    detail: 'Certificates include staff name, course, date, and the legislation covered.',
  },
  {
    n: '06',
    title: 'Manager tracks compliance live',
    body: 'A single dashboard shows who\'s done, who\'s in progress, and who\'s overdue. Reminders go out automatically before deadlines lapse.',
    detail: 'Filter by site, role, or course. Export CSV for inspection days. Audit-ready by design.',
  },
];

const HiwStep = ({ step }) => (
  <div style={{
    background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 12,
    padding: '32px 32px', boxShadow: C.shadowLift,
    display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, alignItems: 'flex-start',
  }}>
    <div style={{
      width: 44, height: 44, background: C.brassDim,
      border: `1px solid rgba(107,46,46,0.30)`, borderRadius: '50%',
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <span style={{ fontFamily: F.mono, fontSize: 13, fontWeight: 500, color: C.brass }}>{step.n}</span>
    </div>
    <div>
      <h3 style={{ fontFamily: F.sans, fontSize: 18, fontWeight: 500, color: C.ink, marginBottom: 10, lineHeight: 1.35 }}>{step.title}</h3>
      <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.70, marginBottom: 12 }}>{step.body}</p>
      <div style={{ fontFamily: F.body, fontSize: 13, color: C.dust, lineHeight: 1.60, fontStyle: 'italic' }}>{step.detail}</div>
    </div>
  </div>
);

const HowItWorksPage = ({ onNav }) => (
  <div style={{ paddingTop: 124, background: C.parchment }}>
    {/* Header */}
    <div style={{ background: C.linen, borderBottom: `1px solid ${C.border}`, padding: '72px clamp(20px, 5vw, 40px) 64px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Label color={C.brass}>How it works</Label>
        <h1 style={{ fontFamily: F.display, fontSize: 'clamp(32px, 8vw, 52px)', fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.15, marginBottom: 20, maxWidth: 720 }}>
          From sign-up to certificate, in six clear steps.
        </h1>
        <p style={{ fontFamily: F.body, fontSize: 17, color: C.ash, lineHeight: 1.70, maxWidth: 600, marginBottom: 28 }}>
          Tiber Course is built for managers who don't have time for a complicated rollout, and for staff who don't have time for a three-hour module. Here's exactly how it works.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Btn primary onClick={() => onNav('contact')}>Book a demo</Btn>
          <Btn onClick={() => onNav('courses')}>View courses</Btn>
        </div>
      </div>
    </div>

    {/* Steps */}
    <div style={{ maxWidth: 900, margin: '0 auto', padding: '72px clamp(20px, 5vw, 40px) 32px' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {HIW_STEPS.map(s => <HiwStep key={s.n} step={s} />)}
      </div>
    </div>

    {/* What's included */}
    <SectionWrap linen>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 40, alignItems: 'start' }}>
        <div>
          <Label color={C.brass}>What you get</Label>
          <h2 style={{ fontFamily: F.display, fontSize: 36, fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.25, marginBottom: 18 }}>
            Everything needed to run compliance training in one place.
          </h2>
          <p style={{ fontFamily: F.body, fontSize: 15, color: C.ash, lineHeight: 1.70 }}>
            No add-ons, no per-certificate fees, no hidden charges. One subscription covers the whole team.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
          {[
            { title: 'Mobile-first lessons', body: 'Plays on any phone. No app install required.' },
            { title: 'Manager dashboard', body: 'Live compliance status across the whole team.' },
            { title: 'PDF certificates', body: 'Named and dated. Issued automatically.' },
            { title: 'Reminder emails', body: 'Auto-nudges before deadlines slip.' },
            { title: 'CSV export', body: 'Audit-ready records for inspection days.' },
            { title: 'UK-based support', body: 'A real person reads every email.' },
          ].map(({ title, body }) => (
            <div key={title} style={{ background: C.parchment, border: `1px solid ${C.border}`, borderRadius: 10, padding: '18px 20px' }}>
              <div style={{ fontFamily: F.sans, fontSize: 13, fontWeight: 500, color: C.ink, marginBottom: 6 }}>{title}</div>
              <div style={{ fontFamily: F.body, fontSize: 13, color: C.ash, lineHeight: 1.55 }}>{body}</div>
            </div>
          ))}
        </div>
      </div>
    </SectionWrap>

    {/* FAQ */}
    <SectionWrap>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <Label color={C.dust}>Common questions</Label>
        <h2 style={{ fontFamily: F.display, fontSize: 36, fontWeight: 400, fontStyle: 'italic', color: C.ink, lineHeight: 1.25, marginBottom: 36 }}>
          Quick answers.
        </h2>
        {[
          { q: 'How long does setup take?', a: 'Most managers are running the starter pack within 30 minutes — including inviting staff and assigning the first course.' },
          { q: 'Do staff need to install an app?', a: 'No. Tiber Course runs in any phone or laptop browser. Staff click a link in their invite email and they\'re in.' },
          { q: 'Are the certificates accepted by inspectors?', a: 'Certificates show the staff member, the date, the course and the legislation covered. They are accepted as evidence of in-house training. Some sectors also require external accreditation — we can advise.' },
          { q: 'What happens if a learner fails the assessment?', a: 'They can retake at no extra cost. We track attempts so you know who needs extra support.' },
          { q: 'Can I cancel any time?', a: 'Individual course purchases have no contract. Subscriptions run on a 6-month minimum, then you can cancel with notice. Certificates already issued remain valid after cancellation.' },
        ].map(({ q, a }) => (
          <div key={q} style={{ borderTop: `1px solid ${C.border}`, padding: '22px 0' }}>
            <div style={{ fontFamily: F.sans, fontSize: 15, fontWeight: 500, color: C.ink, marginBottom: 8 }}>{q}</div>
            <div style={{ fontFamily: F.body, fontSize: 14.5, color: C.ash, lineHeight: 1.70 }}>{a}</div>
          </div>
        ))}
        <div style={{ borderTop: `1px solid ${C.border}` }} />
      </div>
    </SectionWrap>

    {/* CTA */}
    <section style={{ background: C.ink, borderTop: `1px solid rgba(237,232,223,0.06)` }}>
      <div style={{ maxWidth: 660, margin: '0 auto', padding: '88px 40px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: F.display, fontSize: 38, fontWeight: 400, fontStyle: 'italic', color: C.textInverse, lineHeight: 1.25, marginBottom: 18 }}>
          Want to see it on your own team?
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 16, color: 'rgba(237,232,223,0.65)', lineHeight: 1.70, marginBottom: 32 }}>
          A 20-minute walkthrough on a real device. No slides, no sales pressure.
        </p>
        <BrassBtn onClick={() => onNav('contact')}>Book a demo</BrassBtn>
      </div>
    </section>
  </div>
);

Object.assign(window, { HowItWorksPage });