function HowItWorks({ go, intent }) {
  const { Icon, StageIllustration, STAGES } = window.DesignSystem_f6a2e7;
  const loop = [['truck', 'Deliver', 'Sealed can at your door within 12 hours.'], ['glass-water', 'Drink', 'Fits any standard dispenser.'], ['package-check', 'Collect', 'Empty picked up on the next visit.'], ['sparkles', 'Clean', 'Washed and sanitised, inspected for wear.'], ['refresh-cw', 'Refill', 'Filled, sealed, tested, and back in the loop.']];
  const scrollToLab = () => { const el = document.getElementById('lab'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: prefersReducedMotion() ? 'auto' : 'smooth' }); };
  React.useEffect(() => { if (intent && intent.value === 'lab') { const t = setTimeout(scrollToLab, 60); return () => clearTimeout(t); } }, [intent]);
  return <main>
    <PageHero
      tag="How it works"
      title="Ten stages in. One can back."
      lead="Here's what happens to the water before it reaches you, and what happens to the can after."
      meta={['Thane plant · 10 stages', 'Tested every batch']}
      actions={<><Cta icon="plus" {...routeLink(go, 'plans')}>Order now</Cta><Cta variant="soft" noIcon onClick={scrollToLab}>See the lab report</Cta></>}
      media={<Passport kicker="Batch sheet" id="AQ-2609-14" size="Stage log" delay={600} note="Example batch" label="Example batch sheet: chlorination, reverse osmosis, UV treatment and ozone filtration logged overnight at the Thane plant" rows={[
        { time: '01:50', label: 'Chlorination', place: 'Stage 01', done: true },
        { time: '03:20', label: 'Reverse osmosis', place: 'Stage 04', done: true },
        { time: '04:35', label: 'UV treatment', place: 'Stage 07', done: true },
        { time: '05:10', label: 'Ozone filtration', place: 'Stage 10', current: true },
      ]} />}
    />

    <section className="s-wrap s-sec">
      <div className="s-row-head">
        <SectionHead left tag="Purification" title="Stage by stage." lead="Ten stages, in the order the water moves through the Thane plant." />
        <Reveal className="s-mono" style={{ color: 'var(--text-muted)' }}>{STAGES.length} stages · every batch</Reveal>
      </div>
      <div className="sg" style={{ marginTop: 48 }}>
        {STAGES.map((s, i) => <Reveal key={s.stage} delay={(i % 5) * 70} className="sg-card">
          <span className="s-mono" style={{ color: 'var(--text-muted)' }}>{String(i + 1).padStart(2, '0')}</span>
          <div className="sg-art"><StageIllustration stage={s.stage} size={150} /></div>
          <b>{s.name}</b>
          <p>{s.text}</p>
        </Reveal>)}
      </div>
    </section>

    <section id="lab" className="s-wrap">
      <div className="split">
        <Reveal variant="scale" className="lab-slip">
          <Passport kicker="Latest lab report" id="AQ-2609-14" size="Thane plant" note="Placeholder values" label="Latest lab report, batch AQ-2609-14, placeholder values: TDS 82 mg/L, pH 7.4, coliform absent, hardness 48 mg/L. Passed." stamp={<Stamp rotate={-9} delay={1000} sub="12 Sep 2026">Passed</Stamp>} rows={[
            { time: 'TDS', label: '82 mg/L', place: 'Limit 500', done: true },
            { time: 'pH', label: '7.4', place: 'Range 6.5–8.5', done: true },
            { time: 'Coliform', label: 'Absent', place: 'Per 250 ml', done: true },
            { time: 'Hardness', label: '48 mg/L', place: 'Limit 200', done: true },
          ]} />
          <div className="s-actions" style={{ marginTop: 20, justifyContent: 'center' }}><Cta size="sm" variant="soft" noIcon disabled>PDF coming soon</Cta></div>
        </Reveal>
        <div className="s-head s-head--left">
          <Reveal><Pill>Tested every batch</Pill></Reveal>
          <Reveal as="h2" delay={80} className="s-display s-h2">We publish the numbers.</Reveal>
          <Reveal as="p" delay={160} className="s-lead" style={{ maxWidth: '46ch' }}>Every batch is tested before it leaves the plant, and the latest report is always one click away in the footer. Certified to IS 14543:2016 and FSSAI licensed.</Reveal>
          <Reveal delay={240} style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {[['shield-check', 'IS 14543:2016'], ['badge-check', 'FSSAI licensed'], ['leaf', 'BPA free bottle']].map(([ic, t]) => <Tag key={t} icon={ic}>{t}</Tag>)}
          </Reveal>
        </div>
      </div>
    </section>

    <section className="s-wrap s-sec">
      <SectionHead tag="The loop" title="What happens to the can." lead="Nothing is thrown away. The same can makes the trip again and again." />
      <div className="loop" style={{ marginTop: 56 }}>
        {loop.map(([ic, t, d], i) => <Reveal key={t} delay={i * 80} className="loop-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}><span className={'s-icon-dot' + (i === 4 ? ' s-icon-dot--cyan' : '')}><Icon name={ic} size={20} /></span><span className="s-mono" style={{ color: 'var(--text-muted)' }}>{String(i + 1).padStart(2, '0')}</span></div>
          <b>{t}</b>
          <p>{d}</p>
        </Reveal>)}
      </div>
      <Reveal className="s-actions s-actions--center" style={{ marginTop: 40 }}><Cta icon="plus" {...routeLink(go, 'plans')}>Order now</Cta></Reveal>
    </section>
  </main>;
}
Object.assign(window, { HowItWorks });