function About({ go }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  const quote = { text: 'We did not want to sell water in plastic that gets thrown away. We wanted a route: the same can, cleaned properly, coming back every week.', name: 'Founder, Aqualoop', role: 'Thane · placeholder attribution' };
  const specs = [['factory', 'One plant', 'Thane, all 10 stages on site'], ['route', 'Fixed routes', 'Same partner, same hour'], ['recycle', 'Return loop', 'Empty collected every trip'], ['flask-conical', 'Batch testing', 'Before anything leaves']];
  return <main>
    <PageHero
      tag="About"
      title="We started with one question: where does the can go?"
      lead="Most packaged water is a one-way trip. Aqualoop began in Thane with a simple promise: the same can, cleaned and refilled, on a route that comes back to your door every time."
      meta={['Est. Thane', 'Same can, same route']}
      actions={<Cta icon="plus" {...routeLink(go, 'plans')}>Order now</Cta>}
      media={<Passport kicker="Route card" id="RT-THANE-07" size="Morning" delay={600} note="Example route" label="Example morning route: leaves the Thane plant at 5:40, then Mira Bhayandar, Dahisar and Borivali, now heading to Kandivali" rows={[
        { time: '05:40', label: 'Leaves the plant', place: 'Thane', done: true },
        { time: '06:55', label: 'Mira Bhayandar', place: '14 drops · 9 empties', done: true },
        { time: '07:20', label: 'Dahisar', place: '11 drops · 11 empties', done: true },
        { time: '07:42', label: 'Borivali', place: 'On the way to Kandivali', current: true },
      ]} />}
    />

    <section className="s-wrap" style={{ paddingTop: 16 }}>
      <div className="g4">
        <StatTile brand value={1} label="Plant in Thane, where every can is washed, filled and tested." />
        <StatTile delay={80} value={5} label="Localities served today." />
        <StatTile delay={160} value={10} label="Purification stages on site." />
        <StatTile delay={240} value={12} suffix=" hrs" label="From order to door." />
      </div>
    </section>

    <section className="s-wrap s-sec">
      <div className="g2" style={{ alignItems: 'stretch' }}>
        <Reveal variant="scale" className="s-card" style={{ padding: 0, minHeight: 440 }}>
          <img src="assets/jar-mountain.png" alt="Aqualoop can outdoors on a mountain ridge" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '30% 50%' }} />
        </Reveal>
        <Reveal as="figure" delay={100} className="s-card s-card--brand" style={{ margin: 0, padding: 'clamp(28px,4vw,56px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28 }}>
          <span className="s-icon-dot s-icon-dot--cyan"><Icon name="quote" size={20} /></span>
          <blockquote style={{ margin: 0, font: '700 clamp(24px,2.4vw,34px)/1.2 var(--font-display)', letterSpacing: '-.025em', color: '#fff', textWrap: 'pretty' }}>“{quote.text}”</blockquote>
          <figcaption><b style={{ display: 'block', fontSize: 16 }}>{quote.name}</b><span style={{ fontSize: 14, color: 'var(--logo-cyan-glint)' }}>{quote.role}</span></figcaption>
        </Reveal>
      </div>
    </section>

    <section className="s-wrap">
      <div className="split">
        <div className="s-head s-head--left">
          <Reveal><Pill>How we work</Pill></Reveal>
          <Reveal as="h2" delay={80} className="s-display s-h2">A route, not a delivery.</Reveal>
          <Reveal as="p" delay={160} className="s-lead" style={{ maxWidth: '48ch' }}>Cans are washed, filled, sealed and tested at our Thane plant every morning, then run on fixed routes so the same partner reaches you at the same hour. Empties come back on the same trip, which is why nothing is thrown away.</Reveal>
          <Reveal delay={240} style={{ width: '100%', marginTop: 8 }}>
            {specs.map(([ic, k, v]) => <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '16px 0', borderTop: '1px solid var(--s-line)' }}>
              <span className="s-icon-dot s-icon-dot--soft"><Icon name={ic} size={20} /></span>
              <span style={{ flex: 1 }}><b className="s-h4" style={{ display: 'block' }}>{k}</b><span className="s-body" style={{ fontSize: 14 }}>{v}</span></span>
            </div>)}
          </Reveal>
          <Reveal delay={300}><Cta {...routeLink(go, 'how')}>See all 10 stages</Cta></Reveal>
        </div>
        <Reveal variant="scale" className="pf-media" style={{ aspectRatio: '.92' }}>
          <img src="assets/jar-20l-studio.jpg" alt="Aqualoop 20L can" style={{ objectPosition: '50% 30%' }} />
          <div className="pf-tags"><Tag tone="white" icon="route">Morning route · 7–9 am</Tag><Tag tone="white" icon="package-check">Empty collected on the same trip</Tag></div>
        </Reveal>
      </div>
    </section>

    <section className="s-wrap s-sec">
      <div className="s-row-head">
        <SectionHead left tag="Where our cans go" title="Homes, offices, kitchens, gyms." />
        <Reveal><Cta variant="soft" noIcon {...routeLink(go, 'business')}>Business plans</Cta></Reveal>
      </div>
      <div className="g2" style={{ marginTop: 48 }}>
        <Reveal><ImageCard img="assets/jar-gym.png" alt="Aqualoop can at a gym" tag="Gyms and studios" title="High turnover, early slots" {...routeLink(go, 'business')} /></Reveal>
        <Reveal delay={100}><ImageCard img="assets/jar-cap-closeup.png" alt="Sealed Aqualoop cap" tag="Sealed for your safety" title="Tamper-evident, after ozonation" {...routeLink(go, 'how')} /></Reveal>
      </div>
    </section>

    <section className="s-inset">
      <Reveal variant="scale" className="s-card s-card--lg" style={{ padding: 'clamp(56px,7vw,104px) 24px', textAlign: 'center' }}>
        <div className="s-head">
          <Pill dot>What's next</Pill>
          <h2 className="s-display s-h1">More sizes, same loop.</h2>
          <p className="s-lead">The 20L can is where we started. Smaller returnable sizes for homes and desks are on the way, on the same collect-and-refill route.</p>
          <div className="s-actions s-actions--center">
            <Badge tone="accent" icon="check">20L · available now</Badge>
            <Tag tone="white">10L · coming soon</Tag>
            <Tag tone="white">5L · coming soon</Tag>
          </div>
        </div>
      </Reveal>
    </section>
  </main>;
}
Object.assign(window, { About });