function Footer({ go, route }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  const areas = ['Thane', 'Mira Bhayandar', 'Dahisar', 'Borivali', 'Kandivali'];
  const link = id => routeLink(go, id);
  const ordering = route === 'plans' || route === 'business';
  const motionPaused = useMotionPaused();
  return <footer className="ft">
    <div className={'ft-card' + (ordering ? ' ft-card--compact' : '')}>
      {!ordering && <>
        <div className="ft-cta">
          <Reveal><Pill onBrand dot>Order by 6 pm, drink by 7 am</Pill></Reveal>
          <Reveal as="h2" delay={80} className="s-display s-h1" style={{ maxWidth: '14ch' }}>{route === 'contact' ? 'Prefer to order now?' : 'Your first can arrives tomorrow morning.'}</Reveal>
          <Reveal delay={160} className="s-actions s-actions--center">
            <Cta variant="light" icon="plus" {...link('plans')}>Order now</Cta>
            <Cta variant="outline" noIcon {...link('business')}>Business plans</Cta>
          </Reveal>
        </div>
        <Reveal variant="scale" delay={200} className="ft-can"><img src="assets/jar-20l-studio-cutout.png" alt="" /></Reveal>
      </>}
      <div className="ft-panel">
        <div className="ft-grid">
          <div className="ft-col" style={{ gap: 18 }}>
            <img src="assets/logo-wordmark.png" alt="Aqualoop" style={{ height: 30, alignSelf: 'flex-start' }} />
            <p className="s-body" style={{ maxWidth: '36ch' }}>Fresh 20L packaged drinking water for homes and cafés in Mumbai and Thane. The can comes back; that's the loop.</p>
          </div>
          <nav className="ft-col" aria-label="Company"><b>Company</b><a {...link('how')}>How it works</a><a {...link('plans')}>Plans</a><a {...link('business')}>For business</a><a {...link('about')}>About</a><a {...link('faq')}>FAQs</a><a {...link('contact')}>Contact</a></nav>
          <div className="ft-col"><b>Delivery areas</b>{areas.map(a => <span key={a}>{a}</span>)}</div>
          <div className="ft-col"><b>Quality</b><a {...routeLink(go, 'how', 'lab')} style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}><Icon name="flask-conical" size={16} />Latest lab report</a><span>IS 14543:2016</span><span>FSSAI licensed</span><a href="mailto:hello@aqualoopwater.com">hello@aqualoopwater.com</a></div>
        </div>
        <div className="ft-base"><span>© 2026 Aqualoop. Packaged drinking water.</span><span className="s-actions" style={{ gap: 20 }}><button type="button" className="s-link" aria-pressed={motionPaused} onClick={() => setMotionPaused(!motionPaused)}>{motionPaused ? 'Play animations' : 'Pause animations'}</button><span>Mumbai · Thane</span></span></div>
      </div>
    </div>
  </footer>;
}
Object.assign(window, { Footer });