function HomePage({ onGo }) {
  const D = window.DATA;
  return (
    <>
      {/* Hero */}
      <section className="hero">
        <div className="wrap hero__grid">
          <div className="hero__left">
            <Reveal>
              <span className="hero__kicker">Available · May 2026 onwards</span>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="hero__title">
                I help businesses grow by communicating their <em>value</em> to the <span className="u">right audience</span>.
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="hero__sub">Growth across performance, creative strategy, funnels, and product-led thinking. Built for founders who want outcomes, not dashboards.


              </p>
            </Reveal>
            <Reveal delay={220}>
              <div className="hero__cta">
                <button className="btn btn--primary" onClick={() => onGo("work")}>
                  View my work <span className="arr">↗</span>
                </button>
                <button className="btn btn--ghost" onClick={() => onGo("contact")}>
                  Strategy call <span className="arr">→</span>
                </button>
              </div>
            </Reveal>
            <Reveal delay={300}>
              <div className="hero__avail">
                <span className="dot" />
                <span>Currently consulting with 4 D2C brands + 1 Series-A SaaS — slots open May 2026</span>
              </div>
            </Reveal>
          </div>
          <div className="hero__right">
            <Reveal delay={140}>
              <div className="hero__portrait">
                <div className="hero__portrait-tag">
                  <span className="hero__portrait-label">Stanzin</span>
                  <span className="hero__portrait-sub">Growth Partner · BLR</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Logos marquee */}
      <Marquee items={D.logos} />

      {/* Metrics */}
      <div className="metrics">
        {D.metrics.map((m, i) =>
        <Reveal key={i} delay={i * 80} className="metrics__cell">
            <div className="metrics__num">{m.num}<sup>{m.unit}</sup></div>
            <div className="metrics__label">{m.label}</div>
          </Reveal>
        )}
      </div>

      {/* Featured work */}
      <section className="section" id="work-preview">
        <div className="wrap">
          <SectionHead num="01 / Featured work" titleHtml='Case studies, <em>not</em> portfolio shots.' lede="Four engagements where the numbers did the talking. Read the full teardowns in Work." />
          <Reveal>
            <div className="cases">
              {D.cases.map((c, i) =>
              <div className="case" key={c.id} onClick={() => onGo("work")}>
                  <div className="case__top">
                    <span>{String(i + 1).padStart(2, "0")} · {c.tag}</span>
                    <span>{c.year}</span>
                  </div>
                  <h3 className="case__title">{c.name}</h3>
                  <dl className="case__rows">
                    <dt>Problem</dt><dd>{c.problem}</dd>
                    <dt>Strategy</dt><dd>{c.strategy}</dd>
                  </dl>
                  <div className="case__result">
                    <b>{c.hero}</b>
                    <span>in {c.year}</span>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ marginTop: 32, display: "flex", justifyContent: "flex-end" }}>
              <button className="btn btn--ghost" onClick={() => onGo("work")}>All case studies <span className="arr">→</span></button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Approach */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="02 / The approach" titleHtml="Three pillars. <em>No secrets.</em>" lede="What I do on every engagement, whether it's a D2C brand stuck at ₹40L MRR or a B2B SaaS building 0-to-1 pipeline." />
        </div>
        <div className="wrap">
          <div className="pillars">
            {[
            { t: "Understand the product", b: "Before I touch ads, I learn the product. Audits, user calls, competitor teardowns. Most growth problems are positioning problems in disguise.", bs: ["Funnel audit", "Unit economics", "User interviews", "Competitor teardown"] },
            { t: "Craft the message", b: "One sharp sentence beats forty blurry ones. I turn what the product does into what the customer believes — in ads, on the LP, in the onboarding.", bs: ["Messaging map", "LP rewrite", "Creative briefs", "Hook libraries"] },
            { t: "Scale distribution", b: "The right channel at the right time. Performance for velocity, SEO for compounding, creative for breakout. Incrementality, not last-click.", bs: ["Paid media", "Programmatic SEO", "Creative sprints", "Measurement stack"] }].
            map((p, i) =>
            <Reveal key={i} delay={i * 100} className="pillar">
                <div className="pillar__num">{String(i + 1).padStart(2, "0")} — PILLAR</div>
                <h3 className="pillar__title">{p.t}</h3>
                <p className="pillar__body">{p.b}</p>
                <div className="pillar__bullet">{p.bs.map((x) => <span key={x}>{x}</span>)}</div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="03 / Testimonials" titleHtml="Words from people who <em>paid the bills</em>." lede="" />
          <Reveal>
            <div className="quotes">
              {D.testimonials.map((q, i) =>
              <div key={i} className="quote">
                  <p className="quote__body">{q.body}</p>
                  <div className="quote__who">
                    <div className="quote__avatar">{q.initial}</div>
                    <div>
                      <div className="quote__name">{q.name}</div>
                      <div className="quote__role">{q.role}</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </section>

      {/* CTA big */}
      <section className="cta-big" style={{ backgroundColor: "rgb(64, 63, 63)" }}>
        <div className="wrap">
          <Reveal>
            <h2 className="cta-big__title">Let's build something <em>worth scaling.</em></h2>
          </Reveal>
          <Reveal delay={120}>
            <div className="cta-big__row">
              <button className="btn btn--primary" onClick={() => onGo("contact")}>
                Start a project <span className="arr">↗</span>
              </button>
              <button className="btn btn--ghost" onClick={() => onGo("services")}>
                See services <span className="arr">→</span>
              </button>
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div className="cta-big__meta">
              <span>Avg reply within 24h</span>
              <span>HELLO@STANZIN.ME</span>
              <span>Bengaluru · IST</span>
            </div>
          </Reveal>
        </div>
      </section>
    </>);

}

window.HomePage = HomePage;