// All page components live here.
// They consume tokens + components from styles.css, layout.jsx, pinwheel.jsx.

// scroll-reveal helper
function Reveal({ children, delay = 0, as: As = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Fallback — if IO doesn't fire (some iframe contexts swallow it),
    // reveal after a short delay so content is never permanently hidden.
    const fallback = setTimeout(() => setVisible(true), 200);

    // Reveal immediately if already in viewport on mount
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) {
      setVisible(true);
    }

    let io;
    if (typeof IntersectionObserver !== 'undefined') {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setVisible(true);
        });
      }, { threshold: 0.05 });
      io.observe(el);
    }
    return () => {
      clearTimeout(fallback);
      if (io) io.disconnect();
    };
  }, []);
  return (
    <As
      ref={ref}
      className={`reveal ${visible ? 'is-visible' : ''} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </As>
  );
}

/* ============================================================
   HOME
   ============================================================ */
function HomePage() {
  return (
    <div className="page" data-screen-label="Home">
      {/* HERO */}
      <section className="hero">
        <div className="hero-bgmark" aria-hidden="true">
          <svg viewBox="200 180 580 480">
            <path fill="var(--aswe-azure-blue)" d="M515.46,205.15c71.55-5.5,135.09,14.54,114.19,100.29-10.93,44.82-50.29,74.22-86.72,97.44-8.47-8.53-13.24-19.41-21.06-28.58-47.42-55.58-129.67-49.18-180.82-1.98-3.52,3.25-17.97,24.16-15.01,4.95,13.85-89.97,99.68-165.22,189.42-172.12Z"/>
            <path fill="var(--aswe-bright-orange)" d="M651.93,232.36c7.03-1.44,49.31,45.71,55.4,53.79,34.93,46.38,54.47,106.91,44.36,165.16-12.43,71.64-100.76,92.32-157.04,56.74-20.93-13.24-44.44-48.21-38.65-73.71,3.95-17.4,50.69-43.02,65.1-58.02,26.98-28.08,45.57-77.78,36.85-116.26-1.61-7.12-6.63-15.39-8.15-21.69-.62-2.59-.66-5.44,2.13-6.01Z"/>
            <path fill="var(--aswe-cool-gray)" d="M482.08,625.59c-.05,3.28-8.37,3.66-10.41,3.47-63.15-5.92-139.13-99.95-144.44-161.41-7.63-88.27,112.81-146.01,174.78-75.48,4.65,5.29,18.53,21.35,14.06,27.92-3.03,4.45-22.03,16.11-28.04,21.75-39.67,37.27-54.52,93.72-33.45,144.72,5.01,12.13,15.93,33.57,27.51,39.03Z"/>
            <path fill="var(--aswe-forest-moss-green)" d="M523.29,447.13c1.85-.46,2.83-.32,4.5.57,3.19,1.7,10.62,30.38,14.12,37.62,25.54,52.71,87.7,73.23,142.81,61.87,8.19-1.69,32.45-13.01,34.79-12.97,2.61.04,5.44,2.22,4.82,4.89-.44,1.92-22.39,26.47-25.73,29.9-35.24,36.18-95.55,71.66-147.76,66.23-83-8.64-103.82-126.06-43.98-176.55,2.92-2.46,13.72-10.91,16.41-11.58Z"/>
          </svg>
        </div>

        <div className="container-wide">
          <div className="hero-grid">
            <div className="hero-copy">
              <Reveal delay={80}>
                <h1 className="display-1">
                  Everything we make is <span className="accent-moss">exactly</span> what it claims to be.
                </h1>
              </Reveal>
              <Reveal delay={180}>
                <p className="lede" style={{ marginTop: 32 }}>
                  Building a group of businesses in India, on a single principle —
                  transparency. Pure, essential, and exactly as it is.
                </p>
              </Reveal>
              <Reveal delay={260}>
                <div className="hero-actions">
                  <button className="btn btn-primary"
                          onClick={(e) => navigateTo(e, '#/about')}>
                    Discover ASWE <ArrowRight />
                  </button>
                  <button className="btn btn-secondary"
                          onClick={(e) => navigateTo(e, '#/business')}>
                    Our business <ArrowRight />
                  </button>
                </div>
              </Reveal>
            </div>

            <div className="hero-mark">
              <Pinwheel
                interactive={false}
                showElements={true}
                spin={true}
                speed={32}
              />
            </div>
          </div>
        </div>
      </section>

      {/* WHO WE ARE */}
      <section className="bg-subtle">
        <div className="container-wide">
          <div className="split reverse">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow eyebrow-quiet">Orientation</div>
                <h2 className="display-2">Who we are.</h2>
                <p style={{ marginTop: 24 }}>
                  ASWE is building a group of businesses in India, rooted in
                  decades of enterprise and built for what comes next.
                </p>
                <p>
                  Every business we build is held to one standard —
                  transparency — so that whatever we make is exactly what
                  it says it is.
                </p>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <p className="split-quote">
                  One standard. <em>Transparency.</em>
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* MEANING OF ASWE */}
      <section>
        <div className="container-wide">
          <div className="split">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow">The meaning of ASWE</div>
                <h2 className="display-2">
                  <span className="aswe-letters colored">
                    <span>A</span><span>S</span><span>W</span><span>E</span>
                  </span>
                </h2>
                <p style={{ marginTop: 28, fontSize: 'var(--fs-lg)' }}>
                  Air. Sun. Water. Earth. The four elements — pure,
                  essential, nothing added and nothing hidden.
                </p>
                <p>
                  Read another way, ASWE is simply <em style={{ color: 'var(--aswe-azure-blue)', fontStyle: 'italic' }}>as it is, we</em> — the same idea
                  in different words: to show our work, and ourselves,
                  exactly as they are.
                </p>
                <div className="cta-row">
                  <button className="btn btn-secondary"
                          onClick={(e) => navigateTo(e, '#/about')}>
                    Read our story <ArrowRight />
                  </button>
                </div>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <div style={{ aspectRatio: '1/1', position: 'relative', maxWidth: 520, marginLeft: 'auto' }}>
                  <Pinwheel interactive={false} showElements={true} spin={true} speed={32} />
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT DRIVES US */}
      <section className="bg-azure">
        <div className="container-wide">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <Reveal>
              <div className="eyebrow">What drives us</div>
              <h2 className="display-2" style={{ maxWidth: 18 + 'ch' }}>
                To do the <span className="accent-orange">best</span> of whatever we take on.
              </h2>
              <p className="lede" style={{ marginTop: 28 }}>
                Better products people can rely on, made sustainably, and
                built in India for the world.
              </p>
              <div className="cta-row">
                <button className="btn btn-primary"
                        onClick={(e) => navigateTo(e, '#/about')}>
                  Our mission &amp; vision <ArrowRight />
                </button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* TICKER — rhythm break + branded energy */}
      <Ticker items={[
        { text: 'Pure as elements', tone: 'orange' },
        { text: 'Water', tone: 'azure'  },
        { text: 'Sun',   tone: 'orange' },
        { text: 'Air',   tone: 'gray'   },
        { text: 'Earth', tone: 'moss'   },
        { text: 'As it is. As it should be.', tone: 'azure' },
      ]} />

      {/* OUR BUSINESS */}
      <section>
        <div className="container-wide">
          <div className="section-head">
            <Reveal>
              <div className="eyebrow">Our business</div>
              <h2 className="display-2">Today, our focus is <span className="accent-azure">consumer</span>.</h2>
              <p className="lede" style={{ marginTop: 24 }}>
                ASWE CONSUMERS INDIA PVT LTD is building a family of everyday
                products — each with its own brand, all sharing the same
                promise: clean, better, and exactly what they claim to be.
              </p>
            </Reveal>
          </div>

          <Reveal delay={100}>
            <div className="business-card">
              <div>
                <div className="bc-eyebrow">A business of ASWE</div>
                <h3>ASWE CONSUMERS INDIA PVT LTD</h3>
                <p>
                  Our first business. Everyday products built to the ASWE
                  standard, each under its own brand.
                </p>
                <button className="btn-link"
                        onClick={(e) => navigateTo(e, '#/business/consumer')}>
                  Explore the consumer business <ArrowRight />
                </button>
              </div>
              <div className="bc-art">
                <Pinwheel interactive={false} spin={true} speed={32} rings={false} />
              </div>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div className="cta-row" style={{ justifyContent: 'flex-start', marginTop: 28 }}>
              <a className="btn btn-secondary"
                 href="https://shop.aswe.in"
                 target="_blank" rel="noreferrer noopener">
                Shop products <ExternalIcon />
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

/* ============================================================
   ABOUT
   ============================================================ */
function AboutPage() {
  return (
    <div className="page" data-screen-label="About">
      {/* Intro */}
      <section style={{ paddingTop: 144, paddingBottom: 96 }}>
        <div className="container-wide">
          <Reveal>
            <div className="eyebrow">About ASWE</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display-1" style={{ maxWidth: 17 + 'ch' }}>
              Named for the things that need <span className="accent-moss">nothing added</span>.
            </h1>
          </Reveal>
          <Reveal delay={180}>
            <p className="lede" style={{ marginTop: 32, maxWidth: 64 + 'ch' }}>
              ASWE is building a group of businesses in India, on a single
              principle: transparency.
            </p>
          </Reveal>
        </div>
      </section>

      {/* The Meaning of ASWE — fuller */}
      <section className="bg-subtle">
        <div className="container-wide">
          <div className="split">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow">The meaning of ASWE</div>
                <h2 className="display-2">Two meanings,<br />really one.</h2>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <p style={{ fontSize: 'var(--fs-lg)', lineHeight: 1.65 }}>
                  ASWE carries two meanings that are really one. It is named
                  for the four elements — <strong>Air, Sun, Water, Earth</strong> — the most
                  essential things there are: pure, complete, with nothing
                  hidden.
                </p>
                <p style={{ fontSize: 'var(--fs-lg)', lineHeight: 1.65, marginTop: 18 }}>
                  And read aloud, ASWE is{' '}
                  <em style={{ color: 'var(--aswe-azure-blue)' }}>as it is, we</em>
                  {' '}— a way of saying that we show our businesses, our work, and
                  ourselves exactly as they are. Both meanings point to the
                  same truth: the truest things need no disguise.
                </p>
              </Reveal>

              <Reveal delay={200}>
                <div className="elements-row">
                  {[
                    {
                      letter: 'A', label: 'Air', body: 'What we breathe.',
                      color: 'var(--aswe-cool-gray)',
                      tint:  'var(--gray-100)',
                      icon: (
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M3 8h11a3 3 0 1 0-3-3" />
                          <path d="M3 13h17a3 3 0 1 1-3 3" />
                          <path d="M3 18h8" />
                        </svg>
                      ),
                    },
                    {
                      letter: 'S', label: 'Sun', body: 'What sustains.',
                      color: 'var(--aswe-bright-orange)',
                      tint:  'var(--orange-50)',
                      icon: (
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M12 2v2M5.6 6.6l1.4 1.4M18.4 6.6l-1.4 1.4M2 13h2M20 13h2M7 13a5 5 0 0 1 10 0" />
                          <path d="M2 19h20" />
                        </svg>
                      ),
                    },
                    {
                      letter: 'W', label: 'Water', body: 'What carries.',
                      color: 'var(--aswe-azure-blue)',
                      tint:  'var(--azure-50)',
                      icon: (
                        <svg viewBox="0 0 24 24" fill="currentColor">
                          <path d="M12 2.5c4 5 7 9 7 12a7 7 0 0 1-14 0c0-3 3-7 7-12z" />
                        </svg>
                      ),
                    },
                    {
                      letter: 'E', label: 'Earth', body: 'What grounds.',
                      color: 'var(--aswe-forest-moss-green)',
                      tint:  'var(--moss-50)',
                      icon: (
                        <svg viewBox="0 0 24 24" fill="currentColor">
                          <path d="M2 22 9 9l5 6 2-3 6 10z" />
                        </svg>
                      ),
                    },
                  ].map((el) => (
                    <div key={el.label} className="element-card" style={{ color: el.color }}>
                      <span className="letter">{el.letter}</span>
                      <div className="el-icon" style={{ background: el.tint }}>
                        {el.icon}
                      </div>
                      <h4 style={{ color: 'var(--fg1)' }}>{el.label}</h4>
                      <p>{el.body}</p>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Our story */}
      <section>
        <div className="container-wide">
          <div className="split reverse">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow">Our story</div>
                <h2 className="display-2">Heritage is the root.<br /><span className="accent-orange">ASWE</span> is the leap.</h2>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <p style={{ fontSize: 'var(--fs-md)', lineHeight: 1.7 }}>
                  ASWE grows from decades of enterprise across generations
                  and industries — textiles for over twenty years, bakery
                  from 2007, FMCG from 2015, and restaurants from 2024.
                </p>
                <p style={{ fontSize: 'var(--fs-md)', lineHeight: 1.7, marginTop: 18 }}>
                  That drive has never faded. ASWE is the next step:
                  bringing all of that experience together as a single,
                  formal company group, built to grow.
                </p>

                <ul className="inline-list">
                  <li><span className="num">01</span> <span>Textiles &middot; <span style={{ color: 'var(--fg3)' }}>20+ years</span></span></li>
                  <li><span className="num">02</span> <span>Bakery &middot; <span style={{ color: 'var(--fg3)' }}>from 2007</span></span></li>
                  <li><span className="num">03</span> <span>FMCG &middot; <span style={{ color: 'var(--fg3)' }}>from 2015</span></span></li>
                  <li><span className="num">04</span> <span>Restaurants &middot; <span style={{ color: 'var(--fg3)' }}>from 2024</span></span></li>
                  <li><span className="num">05</span> <span>ASWE &middot; <span style={{ color: 'var(--aswe-azure-blue)', fontWeight: 600 }}>today</span></span></li>
                </ul>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Our principle */}
      <section className="bg-moss">
        <div className="container-wide">
          <div className="split">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow">Our principle</div>
                <h2 className="display-2">
                  <span className="accent-moss">Transparency.</span><br />Above all else.
                </h2>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <p style={{ fontSize: 'var(--fs-lg)', lineHeight: 1.65, color: 'var(--fg2)' }}>
                  We hold to one principle: transparency. It shapes what
                  we make, how we make it, and how we treat the people we
                  make it for.
                </p>
                <p style={{ fontSize: 'var(--fs-lg)', lineHeight: 1.65, color: 'var(--fg2)', marginTop: 18 }}>
                  When something is exactly what it claims to be, it needs
                  nothing else.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Mission + Vision */}
      <section>
        <div className="container-wide">
          <div className="split">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow">Our mission</div>
                <h3 className="display-3" style={{ marginBottom: 24 }}>The best of whatever we take on.</h3>
                <p style={{ fontSize: 'var(--fs-md)', lineHeight: 1.7 }}>
                  Better, healthier products people can rely on, made
                  sustainably and with respect for those who make them and
                  those who use them.
                </p>
                <p style={{ fontSize: 'var(--fs-md)', lineHeight: 1.7, marginTop: 18 }}>
                  We build in India, for the world.
                </p>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <div className="eyebrow">Our vision</div>
                <h3 className="display-3" style={{ marginBottom: 24 }}>A name known in homes across India. And around the world.</h3>
                <p style={{ fontSize: 'var(--fs-md)', lineHeight: 1.7 }}>
                  Over the next decade, we will grow ASWE into a
                  diversified group of businesses, built to stand among the
                  country's respected institutions.
                </p>
                <p style={{ fontSize: 'var(--fs-md)', lineHeight: 1.7, marginTop: 18 }}>
                  Becoming a public company is the milestone we are working
                  toward.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

/* ============================================================
   OUR BUSINESS (overview)
   ============================================================ */
function BusinessPage() {
  return (
    <div className="page" data-screen-label="Our Business">
      <section style={{ paddingTop: 144, paddingBottom: 80 }}>
        <div className="container-wide">
          <Reveal>
            <div className="eyebrow">Our business</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display-1" style={{ maxWidth: 16 + 'ch' }}>
              One group.<br /><span className="accent-moss">One standard.</span>
            </h1>
          </Reveal>
          <Reveal delay={180}>
            <p className="lede" style={{ marginTop: 32, maxWidth: 64 + 'ch' }}>
              ASWE brings its enterprises together as a single group. Each
              business runs as its own company and is held to the group's
              standard of transparency.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <p style={{ marginTop: 16, color: 'var(--fg3)', fontSize: 'var(--fs-md)' }}>
              Today, our work is focused on consumer products.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="bg-subtle" style={{ paddingTop: 64, paddingBottom: 120 }}>
        <div className="container-wide">
          <Reveal delay={80}>
            <div className="business-card">
              <div>
                <div className="bc-eyebrow">Consumer products</div>
                <h3>ASWE CONSUMERS INDIA PVT LTD</h3>
                <p>
                  A consumer products business building a family of everyday
                  products — each with its own brand, all built to the same
                  standard.
                </p>
                <button className="btn-link"
                        onClick={(e) => navigateTo(e, '#/business/consumer')}>
                  Learn more <ArrowRight />
                </button>
              </div>
              <div className="bc-art">
                <Pinwheel interactive={false} spin={true} speed={32} rings={false} />
              </div>
            </div>
          </Reveal>

          <Reveal delay={180}>
            <div style={{ marginTop: 48, color: 'var(--fg3)', fontSize: 'var(--fs-sm)', fontStyle: 'italic' }}>
              More to come, in time. Built deliberately.
            </div>
          </Reveal>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

/* ============================================================
   CONSUMER (under Our Business)
   ============================================================ */
function ConsumerPage() {
  return (
    <div className="page" data-screen-label="Consumer">
      {/* Breadcrumb-ish */}
      <section style={{ paddingTop: 120, paddingBottom: 60 }}>
        <div className="container-wide">
          <Reveal>
            <div style={{ fontSize: 'var(--fs-xs)', textTransform: 'uppercase',
                          letterSpacing: 'var(--tracking-cap)', color: 'var(--fg3)',
                          fontWeight: 700, marginBottom: 24 }}>
              <button onClick={(e) => navigateTo(e, '#/business')}
                      style={{ background: 'none', border: 0, padding: 0,
                               cursor: 'pointer', color: 'var(--fg3)',
                               fontSize: 'inherit', letterSpacing: 'inherit',
                               textTransform: 'inherit', fontWeight: 'inherit',
                               fontFamily: 'inherit' }}>
                Our Business
              </button>
              <span style={{ margin: '0 10px', opacity: 0.5 }}>/</span>
              <span style={{ color: 'var(--aswe-azure-blue)' }}>Consumer</span>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display-1" style={{ maxWidth: 17 + 'ch' }}>
              ASWE CONSUMERS INDIA PVT LTD.
            </h1>
          </Reveal>
          <Reveal delay={180}>
            <p className="lede" style={{ marginTop: 28, fontSize: 'clamp(22px, 2.4vw, 32px)', maxWidth: 32 + 'ch' }}>
              Everyday products, built clean and built better.
            </p>
          </Reveal>
        </div>
      </section>

      {/* What we are */}
      <section className="bg-subtle">
        <div className="container-wide">
          <div className="split">
            <div className="split-copy">
              <Reveal>
                <div className="eyebrow">What we are</div>
                <h2 className="display-2">A family of brands.<br />One standard.</h2>
              </Reveal>
            </div>
            <div className="split-art">
              <Reveal delay={120}>
                <p style={{ fontSize: 'var(--fs-lg)', lineHeight: 1.65 }}>
                  ASWE CONSUMERS INDIA PVT LTD is the group's consumer products
                  business. We are building a family of everyday products —
                  each with its own brand, every one held to the same
                  promise:
                </p>
                <p style={{ fontSize: 'var(--fs-2xl)', lineHeight: 1.3, marginTop: 24,
                            fontWeight: 'var(--fw-medium)', letterSpacing: '-0.015em',
                            color: 'var(--fg1)' }}>
                  Clean, better, and exactly what it claims to be.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* How we build */}
      <section>
        <div className="container-wide">
          <div className="section-head">
            <Reveal>
              <div className="eyebrow">How we build</div>
              <h2 className="display-2" style={{ maxWidth: 18 + 'ch' }}>Each product, its own brand. One shared standard.</h2>
              <p className="lede" style={{ marginTop: 24 }}>
                We give every product its own brand and identity, so each
                can stand on its own. What they all share is the ASWE
                standard.
              </p>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <div className="feature-grid">
              {[
                {
                  label: 'Clean ingredients',
                  body: "Nothing added that doesn't belong. What's on the label is what's inside.",
                  tint: 'azure',
                  letter: '01',
                },
                {
                  label: 'Better choices',
                  body: 'Made with care, made sustainably, made to last — for those who make them and those who use them.',
                  tint: 'orange',
                  letter: '02',
                },
                {
                  label: 'Nothing hidden',
                  body: 'No fine print, no quiet substitutions. Every product is exactly what it claims to be.',
                  tint: 'moss',
                  letter: '03',
                },
              ].map((row) => (
                <div key={row.label} className="feature-card">
                  <div className="feature-icon"
                       style={{
                         background: `var(--${row.tint}-50)`,
                         color: `var(--${row.tint}-600)`,
                       }}>
                    {row.letter}
                  </div>
                  <h4>{row.label}</h4>
                  <p>{row.body}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Where to find products */}
      <section className="bg-azure">
        <div className="container-wide">
          <div className="section-head center">
            <Reveal>
              <div className="eyebrow">Our products</div>
              <h2 className="display-2">
                Our products, and where to buy them, live at our shop.
              </h2>
              <div className="cta-row" style={{ justifyContent: 'center', marginTop: 40 }}>
                <a className="btn btn-primary"
                   href="https://shop.aswe.in"
                   target="_blank" rel="noreferrer noopener">
                  Visit the shop <ExternalIcon />
                </a>
              </div>
              <div style={{ marginTop: 24, fontSize: 'var(--fs-sm)', color: 'var(--fg3)' }}>
                shop.aswe.in
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

/* ============================================================
   CONTACT
   ============================================================ */
function ContactPage() {
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const [sent, setSent] = useState(false);
  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4500);
    setForm({ name: '', email: '', message: '' });
  };

  return (
    <div className="page" data-screen-label="Contact">
      <section style={{ paddingTop: 144, paddingBottom: 96 }}>
        <div className="container-wide">
          <div className="contact-grid">
            <div>
              <Reveal>
                <div className="eyebrow">Contact</div>
              </Reveal>
              <Reveal delay={80}>
                <h1 className="display-1" style={{ maxWidth: 14 + 'ch' }}>
                  We'd be glad to hear from you.
                </h1>
              </Reveal>
              <Reveal delay={180}>
                <p className="lede" style={{ marginTop: 28 }}>
                  Whether you're a customer, a partner, or simply curious
                  about what we're building.
                </p>
              </Reveal>

              <Reveal delay={260}>
                <div className="contact-details">
                  <div className="contact-row">
                    <div className="label">Email</div>
                    <div className="value placeholder">[placeholder — add email]</div>
                  </div>
                  <div className="contact-row">
                    <div className="label">Location</div>
                    <div className="value placeholder">[placeholder — add address]</div>
                  </div>
                  <div className="contact-row">
                    <div className="label">Phone</div>
                    <div className="value placeholder">[placeholder — add number]</div>
                  </div>
                </div>
              </Reveal>
            </div>

            <Reveal delay={120}>
              <form className="contact-form" onSubmit={onSubmit}>
                <h4>Send us a note</h4>
                <div className="field">
                  <label htmlFor="ct-name">Name</label>
                  <input id="ct-name" type="text" value={form.name}
                         onChange={onChange('name')} required
                         placeholder="Your name" />
                </div>
                <div className="field">
                  <label htmlFor="ct-email">Email</label>
                  <input id="ct-email" type="email" value={form.email}
                         onChange={onChange('email')} required
                         placeholder="you@example.com" />
                </div>
                <div className="field">
                  <label htmlFor="ct-message">Message</label>
                  <textarea id="ct-message" value={form.message}
                            onChange={onChange('message')} required
                            placeholder="Your message" />
                </div>
                <button type="submit" className="btn btn-primary">
                  Send <ArrowRight />
                </button>
                {sent && (
                  <div className="form-success">
                    Thank you — your note is on its way. We'll be in touch.
                  </div>
                )}
              </form>
            </Reveal>
          </div>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

/* ============================================================
   PRIVACY POLICY
   Template/placeholder copy — to be reviewed by counsel.
   ============================================================ */
function PrivacyPage() {
  return (
    <div className="page" data-screen-label="Privacy">
      <section style={{ paddingTop: 144, paddingBottom: 40 }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow">Legal</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display-2">Privacy Policy</h1>
          </Reveal>
          <Reveal delay={140}>
            <p className="legal-meta">Last updated: [placeholder — add date]</p>
          </Reveal>
          <Reveal delay={180}>
            <p className="legal-note">
              This is template language, not legal advice. Please have it reviewed
              by qualified counsel and replace the bracketed placeholders before
              publishing.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container">
          <Reveal>
            <div className="legal-prose">
              <p>
                This Privacy Policy explains how ASWE CONSUMERS INDIA PVT LTD
                ("ASWE", "we", "us") handles information when you visit this
                website. By using the site, you agree to the practices described
                here.
              </p>

              <h2>1. Who we are</h2>
              <p>
                ASWE CONSUMERS INDIA PVT LTD is a company incorporated in India
                [placeholder — CIN], with its registered office at
                [placeholder — registered address]. This policy applies to this
                corporate website only; purchases made on shop.aswe.in are
                covered by the policies published there.
              </p>

              <h2>2. Information we collect</h2>
              <p>We keep collection to a minimum. Depending on how you use the site, we may collect:</p>
              <ul>
                <li>Details you provide directly — for example, your name, email, and message when you use our contact form.</li>
                <li>Basic technical data your browser sends automatically, such as IP address, device and browser type, and the pages you view.</li>
                <li>Information from cookies and similar technologies, as described below.</li>
              </ul>

              <h2>3. How we use your information</h2>
              <p>We use the information we collect to:</p>
              <ul>
                <li>Respond to your enquiries and requests.</li>
                <li>Operate, maintain, and improve the website.</li>
                <li>Keep the site secure and prevent misuse.</li>
                <li>Meet legal and regulatory obligations.</li>
              </ul>

              <h2>4. Cookies and analytics</h2>
              <p>
                The site may use cookies and similar technologies to remember
                your preferences and understand how the site is used. You can
                control or disable cookies through your browser settings; some
                features may not work as intended if you do.
                [placeholder — name any analytics providers used.]
              </p>

              <h2>5. Sharing and disclosure</h2>
              <p>
                We do not sell your personal information. We may share it with
                service providers who help us run the site, or where required by
                law, regulation, or legal process. Any provider we use is expected
                to handle your information consistently with this policy.
              </p>

              <h2>6. Data security</h2>
              <p>
                We take reasonable technical and organisational measures to
                protect the information we hold. No method of transmission or
                storage is completely secure, so we cannot guarantee absolute
                security.
              </p>

              <h2>7. Your rights</h2>
              <p>
                Subject to applicable law, you may have the right to access,
                correct, or delete your personal information, or to object to or
                restrict certain processing. To make a request, contact us using
                the details below.
              </p>

              <h2>8. Children's privacy</h2>
              <p>
                This site is not directed at children, and we do not knowingly
                collect personal information from them. If you believe a child has
                provided us information, please contact us and we will take
                appropriate steps.
              </p>

              <h2>9. Changes to this policy</h2>
              <p>
                We may update this policy from time to time. When we do, we will
                revise the date at the top of this page. Continued use of the site
                after changes take effect means you accept the updated policy.
              </p>

              <h2>10. Contact us</h2>
              <p>
                Questions about this policy or your information? Write to us at
                [placeholder — add email], or reach us through our{' '}
                <a href="#/contact" onClick={(e) => navigateTo(e, '#/contact')}>contact page</a>.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

/* ============================================================
   TERMS OF USE
   Template/placeholder copy — to be reviewed by counsel.
   ============================================================ */
function TermsPage() {
  return (
    <div className="page" data-screen-label="Terms">
      <section style={{ paddingTop: 144, paddingBottom: 40 }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow">Legal</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display-2">Terms of Use</h1>
          </Reveal>
          <Reveal delay={140}>
            <p className="legal-meta">Last updated: [placeholder — add date]</p>
          </Reveal>
          <Reveal delay={180}>
            <p className="legal-note">
              This is template language, not legal advice. Please have it reviewed
              by qualified counsel and replace the bracketed placeholders before
              publishing.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 0, paddingBottom: 96 }}>
        <div className="container">
          <Reveal>
            <div className="legal-prose">
              <p>
                These Terms of Use govern your access to and use of this website,
                operated by ASWE CONSUMERS INDIA PVT LTD ("ASWE", "we", "us").
                By using the site, you agree to these terms.
              </p>

              <h2>1. Acceptance of these terms</h2>
              <p>
                If you do not agree with any part of these terms, please do not use
                the site. We may update these terms from time to time, and your
                continued use means you accept the changes.
              </p>

              <h2>2. Use of the site</h2>
              <p>
                You agree to use the site lawfully and not to interfere with its
                operation, attempt unauthorised access, or use it in any way that
                could harm ASWE or others. This site is informational; it is not an
                offer to sell products.
              </p>

              <h2>3. Intellectual property</h2>
              <p>
                The ASWE name, logo, brand mark, text, design, and other content on
                this site are owned by ASWE or its licensors and are protected by
                applicable laws. You may not copy, reproduce, or reuse them without
                our prior written permission.
              </p>

              <h2>4. Third-party links</h2>
              <p>
                The site links to other destinations, including our shop at
                shop.aswe.in. Those destinations have their own terms and policies,
                and we are not responsible for their content or practices.
              </p>

              <h2>5. Disclaimers</h2>
              <p>
                The site is provided on an "as is" and "as available" basis. While
                we work to keep information accurate and current, we make no
                warranties that the site will be uninterrupted, error-free, or free
                of harmful components.
              </p>

              <h2>6. Limitation of liability</h2>
              <p>
                To the fullest extent permitted by law, ASWE will not be liable for
                any indirect, incidental, or consequential loss arising from your
                use of, or inability to use, the site.
              </p>

              <h2>7. Governing law and jurisdiction</h2>
              <p>
                These terms are governed by the laws of India. Any dispute relating
                to the site or these terms is subject to the exclusive jurisdiction
                of the courts at [placeholder — city], India.
              </p>

              <h2>8. Changes to these terms</h2>
              <p>
                We may revise these terms at any time by updating this page. The
                date at the top shows when they were last changed.
              </p>

              <h2>9. Contact</h2>
              <p>
                Questions about these terms? Write to us at [placeholder — add
                email], or reach us through our{' '}
                <a href="#/contact" onClick={(e) => navigateTo(e, '#/contact')}>contact page</a>.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      <ClosingLine />
    </div>
  );
}

Object.assign(window, {
  Reveal,
  HomePage, AboutPage, BusinessPage, ConsumerPage, ContactPage,
  PrivacyPage, TermsPage,
});