// Draws the tag's string from the can neck to the tag's punched hole. The hole is the tag's rotation origin, so layout offsets are enough.
function useTagString(visual, can, tag) {
  const [paths, setPaths] = React.useState(null);
  React.useLayoutEffect(() => {
    const draw = () => {
      const v = visual.current, c = can.current, t = tag.current;
      if (!v || !c || !t || getComputedStyle(t).position !== 'absolute') { setPaths(null); return; }
      const ny = c.offsetTop + c.offsetHeight * 0.175;
      const nl = c.offsetLeft + c.offsetWidth * 0.385, nr = c.offsetLeft + c.offsetWidth * 0.615;
      const hx = t.offsetLeft + t.offsetWidth / 2, hy = t.offsetTop + 22;
      const f = n => n.toFixed(1);
      setPaths(['M' + f(nl) + ' ' + f(ny) + ' Q' + f((nl + nr) / 2) + ' ' + f(ny + c.offsetHeight * 0.022) + ' ' + f(nr) + ' ' + f(ny), 'M' + f(nl) + ' ' + f(ny) + ' Q' + f((nl + hx) / 2) + ' ' + f(hy + 18) + ' ' + f(hx) + ' ' + f(hy)]);
    };
    draw();
    const ro = new ResizeObserver(draw);
    ro.observe(visual.current);
    return () => ro.disconnect();
  }, []);
  return paths;
}

function HomeHero({ go }) {
  const visual = React.useRef(null), can = React.useRef(null), tag = React.useRef(null);
  const string = useTagString(visual, can, tag);
  const rows = [
    { time: '05:40', label: 'Filled', place: 'Thane plant', done: true },
    { time: '06:10', label: 'Sealed', place: '45° sleeve', done: true },
    { time: '06:25', label: 'Lab passed', place: 'Batch AQ-2609-14', done: true },
    { time: '07:42', label: 'At your door', place: 'Borivali West', current: true },
  ];
  return <section className="hx">
    <div className="hx-card">
      <div className="s-meta hx-rise" style={{ '--dl': '.05s' }}><span><i />Aqualoop · 20L refill route</span><span>Order by 6 pm · at your door 7–9 am</span></div>
      <div className="hx-grid">
        <div className="hx-copy">
          <div className="hx-rise" style={{ '--dl': '.15s' }}><Pill dot>20L refillable cans · Mumbai &amp; Thane</Pill></div>
          <h1 className="hx-title">
            <span className="hx-ln"><span style={{ '--dl': '.3s' }}>Fresh water,</span></span>
            <span className="hx-ln"><span style={{ '--dl': '.43s' }}>at your door</span></span>
            <span className="hx-ln"><span style={{ '--dl': '.56s' }}>in <span className="hx-accent">12 hours.</span></span></span>
          </h1>
          <p className="hx-lead hx-rise" style={{ '--dl': '.75s' }}>Ten stages of purification, lab-tested every batch, sealed at the cap. When you're done, we take the can back and fill it again.</p>
          <div className="s-actions hx-rise" style={{ '--dl': '.9s' }}>
            <Cta icon="plus" {...routeLink(go, 'plans')}>Order now</Cta>
            <Cta variant="soft" noIcon {...routeLink(go, 'how')}>See how it works</Cta>
          </div>
          <ul className="hx-facts hx-rise" style={{ '--dl': '1.05s' }}><li><b>₹60</b> a can</li><li><b>₹200</b> refundable deposit</li><li>IS 14543:2016</li></ul>
        </div>
        <div className="hx-visual" ref={visual}>
          <div className="hx-can" ref={can}><img src="assets/jar-20l-studio-cutout.png" alt="Aqualoop 20L refillable can" /></div>
          {string && <svg className="hx-string" aria-hidden="true">{string.map((d, i) => <path key={i} d={d} pathLength="1" />)}</svg>}
          <div className="hx-tag" ref={tag}>
            <div className="hx-swing">
              <Passport id="AQ-20-0417" rows={rows} delay={700} stamp={<Stamp rotate={-9} delay={1500} sub="Refilled">Trip 38</Stamp>} note="Example can" label="Example can passport: filled at the Thane plant at 5:40, sealed at 6:10, lab passed at 6:25, at the door in Borivali West at 7:42. Trip 38." />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

function TrustStrip() {
  const { Icon } = window.DesignSystem_f6a2e7;
  const globalPaused = useMotionPaused();
  const [stopped, setStopped] = React.useState(false);
  const paused = stopped || globalPaused;
  const items = [['shield-check', 'IS 14543:2016'], ['badge-check', 'FSSAI licensed'], ['flask-conical', 'Lab-tested every batch'], ['layers', '10-stage purification'], ['lock', 'Tamper-evident seal'], ['leaf', 'BPA free can'], ['clock', '12-hour delivery'], ['recycle', 'Collected and refilled']];
  const run = [...items, ...items];
  return <section className="s-wrap" style={{ paddingTop: 72 }}>
    <Reveal className="mq-head">
      <p className="s-body">Certified, tested and on the route every morning</p>
      {!prefersReducedMotion() && <button type="button" className="s-icon-btn s-icon-btn--sm" aria-label={paused ? 'Play scrolling certifications' : 'Pause scrolling certifications'} onClick={() => { if (paused) { setStopped(false); if (globalPaused) setMotionPaused(false); } else setStopped(true); }}><Icon name={paused ? 'play' : 'pause'} size={16} /></button>}
    </Reveal>
    <Reveal delay={100} className={'mq' + (paused ? ' mq--paused' : '')}><div className="mq-track">{run.map(([ic, t], i) => <span key={i} className="mq-item" aria-hidden={i >= items.length}><Icon name={ic} size={24} stroke={1.8} />{t}</span>)}</div></Reveal>
  </section>;
}

function JourneyArt({ kind }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  if (kind === 'deliver') return <div className="ja-stamp"><Stamp round rotate={-10} delay={500} sub="07:42">Delivered</Stamp></div>;
  if (kind === 'drink') return <svg viewBox="0 0 140 170" width="150" aria-hidden="true">
    <defs><clipPath id="ja-glass"><path d="M22 12 H118 L106 158 H34 Z" /></clipPath></defs>
    <g clipPath="url(#ja-glass)"><g className="ja-fill"><path className="ja-wave" d="M-140 64 Q-105 52 -70 64 T0 64 T70 64 T140 64 T210 64 T280 64 V200 H-140 Z" fill="var(--logo-cyan-light)" /><path className="ja-wave" style={{ animationDuration: '3.4s', opacity: .5 }} d="M-140 58 Q-105 70 -70 58 T0 58 T70 58 T140 58 T210 58 T280 58 V200 H-140 Z" fill="var(--logo-blue-light)" /></g></g>
    <path d="M22 12 H118 L106 158 H34 Z" fill="none" stroke="var(--logo-blue)" strokeWidth="3" strokeLinejoin="round" />
  </svg>;
  if (kind === 'collect') return <svg viewBox="-12 0 264 90" width="240" aria-hidden="true">
    <line x1="20" y1="34" x2="220" y2="34" stroke="var(--aq-ink-300)" strokeWidth="2" />
    {[20, 86, 153, 220].map(x => <circle key={x} cx={x} cy="34" r="11" fill="#fff" stroke="var(--aq-ink-300)" strokeWidth="2" />)}
    <circle className="ja-hop" cx="20" cy="34" r="15" fill="var(--logo-cyan)" stroke="var(--logo-blue)" strokeWidth="2.5" />
    {[['Collect', 20], ['Wash', 86], ['Inspect', 153], ['Fill', 220]].map(([t, x]) => <text key={t} x={x} y="76" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="var(--aq-ink-500)">{t}</text>)}
  </svg>;
  return <div className="ja-trip" aria-hidden="true">
    <span className="ja-trip-l">Trip</span>
    <span className="ja-roll"><span className="ja-roll-in"><b>37</b><b>38</b></span></span>
    <span className="ja-trip-l">Same can</span>
  </div>;
}

function Journey() {
  const steps = [['deliver', '01 / Deliver', 'Sealed and on your doorstep', 'A freshly filled 20L can arrives within 12 hours of your order.'], ['drink', '02 / Drink', 'Fits any dispenser', 'At home or at work. Need a dispenser? Add one to your first order.'], ['collect', '03 / Collect', 'The empty comes back', 'Leave it out on delivery day. It is washed through eight cleanroom stages.'], ['refill', '04 / Refill', 'Back in the loop', 'Filled, sealed, tested and on the next route. Not a new piece of plastic.']];
  return <section className="s-wrap s-sec">
    <SectionHead tag="The loop" title="Four steps. One can, again and again." lead="Most water is a one-way trip. Ours comes back, gets cleaned and returns to your door." />
    <div className="g4" style={{ marginTop: 64 }}>
      {steps.map(([k, n, t, d], i) => <Reveal key={k} delay={i * 90} className="s-card jr-card">
        <span className="s-mono" style={{ color: 'var(--text-muted)' }}>{n}</span>
        <div className="jr-art"><JourneyArt kind={k} /></div>
        <h3 className="s-h3">{t}</h3>
        <p className="s-body">{d}</p>
      </Reveal>)}
    </div>
  </section>;
}

const STAGE_MS = 5000;

function Purification({ go }) {
  const { Icon, StageIllustration, STAGES } = window.DesignSystem_f6a2e7;
  const N = STAGES.length;
  const [active, setActive] = React.useState(0);
  const [hover, setHover] = React.useState(false);
  const [picked, setPicked] = React.useState(false);
  const [stopped, setStopped] = React.useState(false);
  const globalPaused = useMotionPaused();
  const visible = useDocumentVisible();
  const section = React.useRef(null);
  const list = React.useRef(null);
  const listFade = useScrollFade(list);
  const inView = useInView(section, { once: false, rootMargin: '-20% 0px -20% 0px' });
  const reduced = prefersReducedMotion();
  const running = !picked && !stopped && !globalPaused && !reduced;
  const auto = running && inView && !hover && visible;
  const toggleAuto = () => { if (running) setStopped(true); else { setStopped(false); setPicked(false); if (globalPaused) setMotionPaused(false); } };
  React.useEffect(() => {
    if (!auto) return;
    const t = setTimeout(() => setActive(v => (v + 1) % N), STAGE_MS);
    return () => clearTimeout(t);
  }, [auto, active]);
  React.useEffect(() => {
    const sync = smooth => {
      const l = list.current;
      const item = l && l.children[active];
      if (l && item && l.scrollWidth > l.clientWidth) l.scrollTo({ left: item.offsetLeft - 8, behavior: smooth && !prefersReducedMotion() ? 'smooth' : 'auto' });
    };
    sync(true);
    const onResize = () => sync(false);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [active]);
  const pick = n => { setActive((n + N) % N); setPicked(true); };
  const s = STAGES[active];
  const num = n => String(n + 1).padStart(2, '0');
  return <section className="s-inset s-sec" ref={section}>
    <div className="pz">
      <SectionHead onBrand tag="Purification" title="Ten stages between the source and your glass." lead="Every batch is tested before it leaves the Thane plant, and the numbers are published." />
      <Reveal delay={120} className="pz-grid" onPointerEnter={e => { if (e.pointerType === 'mouse') setHover(true); }} onPointerLeave={() => setHover(false)} onFocus={() => setHover(true)} onBlur={() => setHover(false)}>
        <ol className="pz-list" ref={list} data-fade={listFade} aria-label="Purification stages">
          {STAGES.map((st, n) => <li key={st.stage}><button className={'pz-item' + (n === active ? ' on' : n < active ? ' done' : '')} aria-current={n === active ? 'step' : undefined} onClick={() => pick(n)}>
            <span className="pz-num">{num(n)}</span>{st.name}
            {n === active && <span className="pz-bar" aria-hidden="true"><i key={active + (auto ? '-run' : '-hold')} style={auto ? { animationDuration: STAGE_MS + 'ms' } : { animation: 'none', transform: 'scaleX(1)' }} /></span>}
          </button></li>)}
        </ol>
        <div className="pz-panel">
          <div className="pz-flow" aria-hidden="true">
            <span className="pz-flow-line" /><span className="pz-flow-fill" style={{ width: (active / (N - 1)) * 100 + '%' }} />
            {STAGES.map((st, n) => <button key={st.stage} tabIndex={-1} aria-label={'Stage ' + num(n) + ': ' + st.name} className={'pz-node' + (n === active ? ' on' : n < active ? ' done' : '')} style={{ left: (n / (N - 1)) * 100 + '%' }} onClick={() => pick(n)} />)}
          </div>
          <div className="pz-body" key={s.stage} aria-live={picked ? 'polite' : 'off'}>
            <div className="pz-art"><StageIllustration stage={s.stage} size={230} /></div>
            <div className="pz-copy">
              <span className="s-mono" style={{ color: 'var(--logo-blue)' }}>Stage {num(active)} / {N}</span>
              <h3 className="s-display pz-name">{s.name}</h3>
              <p className="s-lead">{s.text}</p>
              <div className="pz-nav">
                <button className="s-icon-btn" aria-label="Previous stage" onClick={() => pick(active - 1)}><Icon name="arrow-left" size={20} /></button>
                <button className="s-icon-btn" aria-label="Next stage" onClick={() => pick(active + 1)}><Icon name="arrow-right" size={20} /></button>
                {!reduced && <><span className="pz-nav-sep" aria-hidden="true" /><button className="s-icon-btn" aria-label={running ? 'Pause auto-advance' : 'Play auto-advance'} onClick={toggleAuto}><Icon name={running ? 'pause' : 'play'} size={18} /></button></>}
              </div>
            </div>
          </div>
        </div>
      </Reveal>
      <Reveal delay={160} className="pz-foot">
        <div className="pz-stats">
          <Stat onBrand value={82} label="TDS, mg/L" />
          <Stat onBrand value="7.4" label="pH" />
          <Stat onBrand value="Absent" label="Coliform" />
        </div>
        <div className="s-actions" style={{ gap: 16 }}>
          <span className="pz-note">Batch AQ-2609-14 · tested 12 Sep 2026 · placeholder values</span>
          <Cta variant="light" {...routeLink(go, 'how')}>See all 10 stages</Cta>
        </div>
      </Reveal>
    </div>
  </section>;
}

function Purity({ go }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  const [open, setOpen] = React.useState(0);
  const items = [['Sealed at the cap', 'A heat-sealed 45° tamper-evident sleeve goes on after ozonation. If it is broken, refuse the can and we replace it free.'], ['Washed between every fill', 'Food-grade, BPA free polycarbonate, cleaned through eight cleanroom stages and retired once it shows wear.'], ['Tested before it leaves', 'TDS, pH and coliform are checked on every batch at the Thane plant, and the latest report is published.']];
  return <section className="s-wrap">
    <div className="split">
      <div className="s-head s-head--left">
        <Reveal><Pill>The can</Pill></Reveal>
        <Reveal as="h2" delay={80} className="s-display s-h2">Built to come back clean.</Reveal>
        <Reveal as="p" delay={160} className="s-lead" style={{ maxWidth: '46ch' }}>Pure water needs a clean can. Every can is washed between fills, sealed at the cap and checked before it leaves Thane.</Reveal>
        <Reveal delay={240} className="s-actions">
          <Cta icon="plus" {...routeLink(go, 'plans')}>Order now</Cta>
          <Cta variant="soft" noIcon {...routeLink(go, 'how')}>See how it works</Cta>
        </Reveal>
        <Reveal delay={320} style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 36 }}>
          <div className="avatars" aria-hidden="true">{['shield-check', 'badge-check', 'flask-conical'].map(ic => <span key={ic} className="s-icon-dot s-icon-dot--soft"><Icon name={ic} size={20} /></span>)}</div>
          <div><div className="s-h4">IS 14543:2016 · FSSAI licensed</div><p className="s-body" style={{ fontSize: 14, marginTop: 4 }}>Lab-tested every batch at the Thane plant</p></div>
        </Reveal>
      </div>
      <Reveal variant="scale" className="pf-media">
        <img src="assets/jar-20l-studio.jpg" alt="Aqualoop 20L can with its IS 14543:2016 and FSSAI label" style={{ objectPosition: '50% 62%' }} />
        <div className="pf-badge">
          <Stat value={8} label="Cleanroom wash stages, between every fill" />
          <Badge tone="info" icon="check">BPA free can</Badge>
        </div>
        <div className="pf-stack">
          {items.map(([t, d], i) => <Disclosure key={t} compact title={t} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)}><p>{d}</p></Disclosure>)}
        </div>
      </Reveal>
    </div>
  </section>;
}

function Bento() {
  const { Icon } = window.DesignSystem_f6a2e7;
  const globalPaused = useMotionPaused();
  const motion = !prefersReducedMotion() && !globalPaused;
  const route = 'M34 112 C 96 10, 196 150, 266 38';
  const picks = [3, 5, 10, 12, 17, 19, 24, 26];
  return <section className="s-wrap s-sec">
    <SectionHead tag="Built for your week" title="Everything a can should do." lead="Order in a minute, skip a date in a message, and never chase a delivery again." />
    <div className="bn" style={{ marginTop: 64 }}>
      <Reveal className="s-card bn-card">
        <h3 className="s-h3">12-hour delivery</h3>
        <div className="bn-art">
          <svg viewBox="0 0 300 150" width="100%" style={{ maxWidth: 320 }} aria-hidden="true">
            <path d={route} fill="none" stroke="var(--aq-ink-300)" strokeWidth="2.5" strokeDasharray="6 8" />
            <circle cx="34" cy="112" r="7" fill="var(--logo-blue)" /><circle cx="266" cy="38" r="7" fill="var(--logo-cyan)" />
            <circle r="11" fill="#fff" stroke="var(--logo-blue)" strokeWidth="3">{motion && <animateMotion dur="4.5s" repeatCount="indefinite" path={route} calcMode="spline" keyTimes="0;1" keySplines=".6 0 .3 1" />}</circle>
            <text x="34" y="140" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="12" fill="var(--aq-ink-500)">6:00 pm</text>
            <text x="266" y="18" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="12" fill="var(--aq-ink-500)">7:00 am</text>
          </svg>
        </div>
        <p className="s-body">Order before 6 pm, first can the next morning.</p>
      </Reveal>
      <Reveal delay={90} className="s-card bn-card">
        <h3 className="s-h3">Pick any dates</h3>
        <div className="bn-art"><div className="cal">{Array.from({ length: 35 }, (_, i) => { const day = i - 1; const off = day < 1 || day > 30; const pi = picks.indexOf(i); return <span key={i} className={off ? 'off' : pi >= 0 ? 'pick' : ''} style={pi >= 0 ? { '--dl': pi * 0.35 + 's' } : undefined}>{off ? '' : day}</span>; })}</div></div>
        <p className="s-body">Weekdays, alternate days, or just the 1st and 15th.</p>
      </Reveal>
      <Reveal delay={180} className="s-card bn-card bn-lab">
        <h3 className="s-h3">Lab-tested, every batch</h3>
        <ul className="bn-slip">{[['TDS', '82 mg/L'], ['pH', '7.4'], ['Coliform', 'Absent']].map(([k, v]) => <li key={k}><span>{k}</span><b>{v}</b></li>)}</ul>
        <div className="bn-lab-row"><span className="s-mono" style={{ color: 'var(--text-muted)', fontSize: 12 }}>Batch AQ-2609-14<br />Placeholder values</span><Stamp rotate={-8} delay={600} sub="12 Sep">Passed</Stamp></div>
      </Reveal>
      <Reveal delay={60} className="s-card bn-card">
        <h3 className="s-h3">Monthly refills</h3>
        <div className="bn-art">
          <div style={{ position: 'relative', width: 160, height: 160 }}>
            <svg className="ring-prog" viewBox="0 0 140 140" width="160" height="160" aria-hidden="true"><circle cx="70" cy="70" r="60" fill="none" stroke="#fff" strokeWidth="12" /><circle className="p" cx="70" cy="70" r="60" fill="none" stroke="var(--logo-cyan)" strokeWidth="12" strokeLinecap="round" /></svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}><b className="s-num s-num--md">18<span style={{ color: 'var(--aq-ink-400)' }}>/30</span></b><span className="s-mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>refills left</span></div>
          </div>
        </div>
        <p className="s-body">₹1,500 for 30 cans. Unused refills carry over.</p>
      </Reveal>
      <Reveal delay={150} className="s-card bn-card">
        <h3 className="s-h3">Pause any time</h3>
        <div className="bn-art" style={{ flexDirection: 'column', gap: 8, alignItems: 'stretch' }}>
          {[['calendar-x', 'Skip next delivery', '0s'], ['pause', 'Pause for a week', '1.3s'], ['clock', 'Move to 4–6 pm', '2.6s']].map(([ic, t, dl]) => <div key={t} className="bn-row">
            <span className="s-icon-dot s-icon-dot--sm s-icon-dot--soft"><Icon name={ic} size={17} /></span>
            <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--text-heading)' }}>{t}</span>
            <span className="tg" style={{ '--dl': dl }} />
          </div>)}
        </div>
        <p className="s-body" style={{ marginTop: 16 }}>One message. No fee to skip a date.</p>
      </Reveal>
      <Reveal delay={240} className="s-card bn-card">
        <h3 className="s-h3">Ready for business</h3>
        <div className="bn-art" style={{ flexDirection: 'column', gap: 12 }}>
          <div className="ja-bars">{[.45, .6, .52, .8, 1, .7].map((h, i) => <i key={i} className={i === 4 ? 'hi' : ''} style={{ height: h * 130, animationDelay: i * 0.12 + 's' }} />)}</div>
          <div className="s-mono" style={{ display: 'flex', gap: 22, color: 'var(--text-muted)', fontSize: 11 }}>{['M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <span key={i}>{d}</span>)}</div>
        </div>
        <p className="s-body">Fixed slot before opening. GST invoice, monthly.</p>
      </Reveal>
    </div>
  </section>;
}

function Story({ go }) {
  const trips = [
    { time: 'T-35', label: 'Delivered', place: 'Thane West · 14 Aug', done: true },
    { time: 'T-36', label: 'Delivered', place: 'Mira Road · 23 Aug', done: true },
    { time: 'T-37', label: 'Delivered', place: 'Dahisar · 2 Sep', done: true },
    { time: 'T-38', label: 'On the route', place: 'Borivali West · today', current: true },
  ];
  return <section className="s-inset">
    <div className="story">
      <div className="s-head s-head--left">
        <Reveal><Pill>Our story</Pill></Reveal>
        <Reveal as="h2" delay={80} className="s-display s-h1">The can comes back. That's the loop.</Reveal>
        <Reveal as="p" delay={160} className="s-lead" style={{ maxWidth: '44ch' }}>Aqualoop started in Thane because packaged water was a one-way trip. We built a route instead: the same can, cleaned properly, back at your door.</Reveal>
        <Reveal delay={240}><Cta {...routeLink(go, 'about')}>Read our story</Cta></Reveal>
      </div>
      <Reveal delay={120} className="story-log">
        <Passport kicker="Trip log" id="AQ-20-0417" big={38} bigLabel="Trips and counting" rows={trips} delay={300} stamp={<Stamp round rotate={-12} delay={1100} sub="Since 2024">In the loop</Stamp>} note="Example can · washed 8 stages between trips" label="Example trip log for one can: 38 trips. Recent deliveries to Thane West, Mira Road and Dahisar; trip 38 is on the route to Borivali West." />
      </Reveal>
    </div>
    <div className="s-wrap" style={{ marginTop: 16, padding: 0, maxWidth: 'none' }}>
      <div className="g4">
        <StatTile brand value={90} suffix="+" label="Cafés, restaurants and homes on our routes." />
        <StatTile delay={80} value={10} label="Purification stages at the Thane plant." />
        <StatTile delay={160} value={12} suffix=" hrs" label="From your order to your door." />
        <StatTile delay={240} value={5} label="Localities served today, more as routes grow." />
      </div>
    </div>
  </section>;
}

function Testimonials({ go }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  const track = React.useRef(null);
  const [edge, setEdge] = React.useState({ start: true, end: false });
  const update = () => { const t = track.current; if (!t) return; setEdge({ start: t.scrollLeft < 8, end: t.scrollLeft + t.clientWidth >= t.scrollWidth - 8 }); };
  React.useEffect(() => { update(); window.addEventListener('resize', update); return () => window.removeEventListener('resize', update); }, []);
  const scroll = dir => { const t = track.current; if (!t) return; const card = t.querySelector('.ts-card'); t.scrollBy({ left: dir * ((card ? card.offsetWidth : 360) + 16), behavior: prefersReducedMotion() ? 'auto' : 'smooth' }); };
  const quotes = [['Rohan', 'Café owner, Thane', "Cans arrive before we open. We've never had to chase a delivery."], ['Farhan', 'Restaurant manager, Kandivali', 'Forty cans a week for the kitchen and the floor. Zero missed days in six months.']];
  return <section className="s-wrap s-sec" style={{ overflow: 'hidden' }}>
    <div className="s-row-head">
      <SectionHead left tag="What people say" title="People who stopped chasing deliveries." />
      <Reveal className="ts-arrows"><button className="s-icon-btn" aria-label="Previous testimonials" disabled={edge.start} onClick={() => scroll(-1)}><Icon name="arrow-left" size={20} /></button><button className="s-icon-btn" aria-label="Next testimonials" disabled={edge.end} onClick={() => scroll(1)}><Icon name="arrow-right" size={20} /></button></Reveal>
    </div>
    <Reveal delay={120}>
      <div className="ts-track" ref={track} onScroll={update} style={{ marginTop: 48 }} role="region" aria-label="Customer testimonials, use left and right arrow keys to scroll" tabIndex={0} onKeyDown={e => { if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { e.preventDefault(); scroll(e.key === 'ArrowRight' ? 1 : -1); } }}>
        <article className="s-card ts-card"><div className="ts-av">{quotes[0][0][0]}</div><p className="ts-q">“{quotes[0][2]}”</p><div className="ts-who"><b>{quotes[0][0]}</b><span>{quotes[0][1]}</span></div></article>
        <article className="s-card ts-card ts-photo"><div className="ts-photo-img"><img src="assets/jar-kitchen.png" alt="Aqualoop can on a kitchen counter" /></div><div className="ts-over"><p className="ts-q">“The kids drink more water now. It just tastes cleaner.”</p><div className="ts-who"><b>Priya</b><span>Home, Borivali</span></div></div></article>
        {quotes.slice(1).map(([n, r, q]) => <article key={n} className="s-card ts-card"><div className="ts-av">{n[0]}</div><p className="ts-q">“{q}”</p><div className="ts-who"><b>{n}</b><span>{r}</span></div></article>)}
        <article className="s-card s-card--brand ts-card" style={{ justifyContent: 'space-between' }}>
          <div><Pill onBrand>For business</Pill><p className="ts-q">Your café could be next on the morning route.</p></div>
          <div><Cta variant="light" {...routeLink(go, 'business')}>Business plans</Cta></div>
        </article>
      </div>
    </Reveal>
    <p className="s-note" style={{ marginTop: 20 }}>Placeholder testimonials — replace with real customer quotes.</p>
  </section>;
}

const TIMELINE = [
  { t: 'Order', when: 'Before 6 pm', d: 'Pick a plan or tap your dates. Pay by UPI, or cash on delivery.', ui: 'order' },
  { t: 'Purify', when: 'Overnight · Thane plant', d: 'Ten stages, chlorination to ozone. Every batch tested before dispatch.', ui: 'purify' },
  { t: 'Seal', when: 'Before dispatch', d: 'A heat-sealed 45° sleeve at the cap. Broken seal? Refuse the can.', ui: 'seal' },
  { t: 'Deliver', when: 'Next morning · 7–9 am', d: 'Same partner, same route, same hour. We message you on the way.', ui: 'deliver' },
  { t: 'Collect & refill', when: 'Your next delivery', d: 'Leave the empty out. It is washed, refilled and back in the loop.', ui: 'loop' },
];

function TimelineUi({ kind, on }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  const check = <Icon name="check-circle-2" size={18} color="var(--aq-success-600)" />;
  if (kind === 'order') return <div className="ui">
    <div className="ui-h"><div><b>Your order</b><small>Pay per can</small></div><Badge tone="info">Confirmed</Badge></div>
    <div style={{ marginTop: 14 }}>{[['2 × 20L can', '₹120'], ['Refundable deposit', '₹200'], ['Slot', '7–9 am']].map(([k, v]) => <div key={k} className="ui-row"><span style={{ color: 'var(--text-muted)' }}>{k}</span><b>{v}</b></div>)}</div>
    <div className="ui-row s-h4"><span>Total</span><span>₹320</span></div>
  </div>;
  if (kind === 'purify') return <div className="ui">
    <div className="ui-h"><div><b>Batch AQ-2609-14</b><small>Thane plant</small></div><Badge>Passed</Badge></div>
    <div style={{ marginTop: 10 }}>{['Reverse osmosis', 'UV treatment', '0.22 micron polishing', 'Ozone filtration'].map(s => <div key={s} className="ui-row"><span>{s}</span>{check}</div>)}</div>
    <div className="ui-tiles">{[['82', 'TDS mg/L'], ['7.4', 'pH'], ['Nil', 'Coliform']].map(([v, l]) => <div key={l} className="ui-tile"><b>{v}</b><small>{l}</small></div>)}</div>
  </div>;
  if (kind === 'seal') return <div className="ui">
    <div className="ui-h"><div><b>Tamper-evident seal</b><small>Heat-sealed 45° sleeve</small></div><Badge>Intact</Badge></div>
    <div className="ui-note"><span className="s-icon-dot s-icon-dot--cyan"><Icon name="lock" size={20} /></span><span>If the sleeve is broken, refuse the can. We replace it free.</span></div>
  </div>;
  if (kind === 'deliver') return <div className="ui">
    <div className="ui-h"><div><b>Out for delivery</b><small>Arriving 7:40 am</small></div><Badge tone="info">On route</Badge></div>
    <div className="ui-bar"><i style={{ '--w': on ? '72%' : '0%' }} /></div>
    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 12, color: 'var(--text-muted)' }}><span>Thane plant</span><span>Your door</span></div>
    <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 16 }}><span className="s-icon-dot s-icon-dot--sm s-icon-dot--soft"><Icon name="user" size={18} /></span><span style={{ flex: 1 }}><b style={{ display: 'block', fontSize: 14 }}>Your route partner</b><span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Same hour, every visit</span></span><span className="s-icon-dot s-icon-dot--soft"><Icon name="phone" size={18} /></span></div>
  </div>;
  return <div className="ui">
    <div className="ui-h"><div><b>Empty collected</b><small>Back in the loop</small></div><Badge>Refilled</Badge></div>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginTop: 18 }}>{['package-check', 'sparkles', 'droplet', 'truck'].map((ic, i) => <React.Fragment key={ic}>{i > 0 && <Icon name="chevron-right" size={16} color="var(--aq-ink-400)" />}<span className={'s-icon-dot ' + (i === 2 ? 's-icon-dot--cyan' : 's-icon-dot--soft')}><Icon name={ic} size={19} /></span></React.Fragment>)}</div>
    <p style={{ margin: '16px 0 0', fontSize: 14, color: 'var(--text-muted)', textAlign: 'center' }}>Collected, washed, filled and sealed again.</p>
  </div>;
}

function Timeline() {
  const body = React.useRef(null);
  const sticky = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const N = TIMELINE.length;
  React.useEffect(() => {
    let raf = 0;
    const update = () => {
      raf = 0;
      const b = body.current, s = sticky.current;
      if (!b || !s || getComputedStyle(s).display === 'none') return;
      const r = b.getBoundingClientRect();
      const span = r.height - s.offsetHeight;
      const p = Math.min(0.9999, Math.max(0, (96 - r.top) / (span || 1)));
      b.style.setProperty('--tlp', p.toFixed(4));
      const idx = Math.floor(p * N);
      setActive(a => (a === idx ? a : idx));
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); cancelAnimationFrame(raf); };
  }, []);
  const jump = i => {
    const b = body.current, s = sticky.current;
    const top = b.getBoundingClientRect().top + window.scrollY;
    const span = b.offsetHeight - s.offsetHeight;
    window.scrollTo({ top: top - 96 + ((i + 0.5) / N) * span, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
  };
  return <section className="s-wrap s-sec">
    <SectionHead tag="Order to glass" title="From the plant to your glass." lead="What happens between tapping order and pouring the first glass." />
    <div className="tl-body tl-desk" ref={body} style={{ height: 'calc(100vh + ' + N * 62 + 'vh)', marginTop: 56 }}>
      <div className="tl-sticky" ref={sticky}>
        <div className="tl-list">
          <ol className="tl-items">
            <span className="tl-line" aria-hidden="true"><i /></span>
            {TIMELINE.map((s, i) => <li key={s.t}><button className={'tl-step' + (i === active ? ' on' : '')} onClick={() => jump(i)} aria-current={i === active ? 'step' : undefined}>
              <span className="tl-num">{String(i + 1).padStart(2, '0')}</span>
              <span><b>{s.t}</b><span>{s.when}</span><p>{s.d}</p></span>
            </button></li>)}
          </ol>
        </div>
        <div className="tl-media">
          <div className="s-meta"><span><i />Order manifest · step {String(active + 1).padStart(2, '0')} / {String(N).padStart(2, '0')}</span><span>{TIMELINE[active].when}</span></div>
          {TIMELINE.map((s, i) => <div key={s.t} className={'tl-shot' + (i === active ? ' on' : '')}><span className="tl-big">{String(i + 1).padStart(2, '0')}</span></div>)}
          {TIMELINE.map((s, i) => <div key={s.t} className={'tl-ui' + (i === active ? ' on' : '')} aria-hidden={i !== active}><TimelineUi kind={s.ui} on={i === active} /></div>)}
        </div>
      </div>
    </div>
    <div className="tl-mob" style={{ marginTop: 48 }}>
      {TIMELINE.map((s, i) => <Reveal key={s.t} className="s-card" style={{ padding: 12 }}>
        <div className="tl-media">
          <div className="tl-shot on"><span className="tl-big">{String(i + 1).padStart(2, '0')}</span></div>
          <div className="tl-ui on"><TimelineUi kind={s.ui} on /></div>
        </div>
        <div style={{ padding: '20px 12px 12px' }}><span className="s-mono" style={{ color: 'var(--text-muted)' }}>{String(i + 1).padStart(2, '0')} · {s.when}</span><h3 className="s-h3" style={{ marginTop: 8 }}>{s.t}</h3><p className="s-body" style={{ marginTop: 8 }}>{s.d}</p></div>
      </Reveal>)}
    </div>
  </section>;
}

function Compare() {
  const { Icon } = window.DesignSystem_f6a2e7;
  const columns = ['Aqualoop 20L', 'Local Unorganized Jars', 'Single-Use Bottled Water'];
  const rows = [
    { label: 'Sanitization & Hygiene', cells: [{ text: '8-Stage Cleanroom Wash' }, { ok: false, text: 'Unverified manual rinse' }, { text: 'Factory sealed' }] },
    { label: 'BPA-Free Polycarbonate', cells: [{ text: 'Certified Food-Grade' }, { ok: false, text: 'Low-grade degraded plastic' }, { ok: false, text: 'Single-use PET (microplastics)' }] },
    { label: 'Tamper-Evident Sleeve', cells: [{ text: 'Heat-sealed 45° sleeve' }, { ok: false, text: 'Missing or re-used caps' }, { text: 'Standard plastic cap' }] },
    { label: 'Scheduled Reliability', cells: [{ text: 'Automated morning slots' }, { ok: false, text: 'Irregular vendor calls' }, { ok: false, text: 'Daily grocery run needed' }] },
    { label: 'Environmental Impact', cells: [{ text: '100% Circular Return Loop' }, { ok: false, text: 'High breakage / dump' }, { ok: false, text: 'Enormous plastic landfill waste' }] },
    { label: 'Cost per Liter', cells: [{ text: 'Affordable (₹4 / Liter)' }, { ok: null, text: '₹3.5 – ₹4 / Liter' }, { ok: false, text: 'Expensive (₹20 / Liter)' }] },
  ];
  return <section className="s-wrap s-sec">
    <SectionHead tag="Why Aqualoop" title="Compare it to what you use now." lead="A reliable service built on verifiable hygiene, scheduled consistency, and circular responsibility." />
    <Reveal variant="scale" className="cmp" style={{ marginTop: 56 }}>
      <div className="cmp-scroll">
        <table>
          <thead><tr><th scope="col">Feature / Guarantee</th>{columns.map((c, i) => <th key={c} scope="col" className={i === 0 ? 'hi' : ''}>{i === 0 ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}><img src="assets/logo-wordmark-white.png" alt="" style={{ height: 18 }} />20L</span> : c}</th>)}</tr></thead>
          <tbody>{rows.map(r => <tr key={r.label}>
            <th scope="row">{r.label}</th>
            {r.cells.map((c, i) => <td key={i} className={i === 0 ? 'hi' : ''}><span className="cmp-cell">{c.ok !== null && <span className={'cmp-ic ' + (c.ok === false ? 'no' : 'ok')}><Icon name={c.ok === false ? 'x' : 'check'} size={13} stroke={3} /></span>}<span>{c.text}</span></span></td>)}
          </tr>)}</tbody>
        </table>
      </div>
    </Reveal>
  </section>;
}

function HomePlans({ go }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  return <section className="s-wrap">
    <SectionHead tag="Plans" title="Plans that fit how you drink." lead="Same water, same 12-hour promise. A ₹200 refundable deposit covers your first can." />
    <div className="g3" style={{ marginTop: 64, alignItems: 'stretch' }}>
      <Reveal><PlanTile name="Pay per can" price="₹60" period="per can" note="Minimum 2 cans per order · ₹200 refundable deposit" features={['Delivered within 12 hours', 'Empty cans collected on next delivery', 'No commitment']} cta="Order 2 cans" action={routeLink(go, 'plans', 'single')} /></Reveal>
      <Reveal delay={90}><PlanTile featured badge="Most popular" name="Monthly refills" price="₹1,500" period="/ 30 days" note="One can a day, or spread as you like" features={['30 refills, scheduled or on demand', 'Priority morning slots', 'Pause or cancel any time']} cta="Start refills" action={routeLink(go, 'plans', 'monthly')} /></Reveal>
      <Reveal delay={180}><PlanTile name="Custom schedule" price="₹60" period="per can" note="Only the dates you pick. Deposit ₹200." features={['Any dates, across any month', 'From 2 cans a date, up as you need', 'Patterns: weekdays, alternate days, every Monday']} cta="Build a schedule" icon="calendar" action={routeLink(go, 'plans', 'custom')} /></Reveal>
    </div>
    <Reveal style={{ textAlign: 'center', marginTop: 28 }}><a className="s-link" {...routeLink(go, 'business')}>Ordering for a café or office? See business plans<Icon name="arrow-right" size={16} /></a></Reveal>
  </section>;
}

function AreaBand() {
  return <section className="s-wrap s-sec">
    <div className="area">
      <Reveal className="s-card s-card--brand area-board">
        <div><Pill onBrand dot>Delivery areas</Pill></div>
        <h2 className="s-display s-h2" style={{ maxWidth: '12ch' }}>Do we deliver to you?</h2>
        <div className="board-head" aria-hidden="true"><span>Locality</span><span>Morning route</span></div>
        <ul className="board" aria-label="Localities we deliver to">{['Thane', 'Mira Bhayandar', 'Dahisar', 'Borivali', 'Kandivali'].map(a => <li key={a}><span>{a}</span><span>On route</span></li>)}</ul>
      </Reveal>
      <Reveal delay={100} className="s-card" style={{ padding: 'clamp(28px,4vw,48px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 20 }}>
        <h3 className="s-h3">Check your area or pincode</h3>
        <p className="s-body">Five localities today, more as the routes grow. Order before 6 pm and the first can arrives the next morning.</p>
        <AreaCheck />
      </Reveal>
    </div>
  </section>;
}

function HomeFaq({ go }) {
  return <section className="s-wrap">
    <SectionHead tag="FAQs" title="Deposit, delivery, dispensers." />
    <div style={{ marginTop: 56 }}>
      <FaqGrid items={[
        { q: 'Is the ₹200 deposit refundable?', a: 'Yes. It comes back to you when you return the can, or it carries over to your next order.' },
        { q: 'How fast is delivery?', a: 'Within 12 hours of ordering. Order before 6 pm and it arrives the next morning.' },
        { q: 'Do I need a dispenser?', a: 'Any standard 20L dispenser works. If you need one, add it to your first order for ₹1,200.' },
        { q: 'Can cafés order in bulk?', a: 'Yes. Business plans start at 30 cans a month with a fixed morning slot and a GST invoice.' },
        { q: 'How do I pay?', a: 'UPI when you order, or cash to the delivery partner. Business accounts are invoiced monthly.' },
        { q: 'Can I skip a delivery?', a: 'Yes. Tell us any time before the slot. Skipping a single delivery costs nothing.' },
      ]} />
    </div>
    <Reveal as="p" className="s-body" style={{ textAlign: 'center', marginTop: 32 }}>Got more questions? <a className="s-link" {...routeLink(go, 'faq')}>See all FAQs</a></Reveal>
  </section>;
}

function Places({ go }) {
  return <section className="s-wrap s-sec">
    <div className="s-row-head">
      <SectionHead left tag="Where our cans go" title="Homes, offices and kitchens." />
      <Reveal><Cta variant="soft" noIcon {...routeLink(go, 'plans')}>Explore plans</Cta></Reveal>
    </div>
    <div className="g2" style={{ marginTop: 48 }}>
      <Reveal><ImageCard img="assets/jar-kitchen.png" alt="Aqualoop can in a home kitchen" tag="For homes" title="Monthly refills from ₹1,500" {...routeLink(go, 'plans')} /></Reveal>
      <Reveal delay={100}><ImageCard img="assets/jar-office.png" alt="Aqualoop can in an office" tag="For offices and cafés" title="30 cans a month, one GST invoice" {...routeLink(go, 'business')} /></Reveal>
    </div>
  </section>;
}

function Home({ go }) {
  return <main>
    <HomeHero go={go} />
    <TrustStrip />
    <Journey />
    <Purification go={go} />
    <Purity go={go} />
    <Bento />
    <Story go={go} />
    <Testimonials go={go} />
    <Timeline />
    <Compare />
    <HomePlans go={go} />
    <AreaBand />
    <HomeFaq go={go} />
    <Places go={go} />
  </main>;
}
Object.assign(window, { Home });