function ServicesPage({ onGo }) {
  const D = window.DATA;
  return (
    <>
      <section className="wrap">
        <div style={{padding: "clamp(40px, 6vw, 80px) 0 clamp(32px, 5vw, 60px)"}}>
          <Reveal><span className="hero__kicker">Services · ways to work together</span></Reveal>
          <Reveal delay={80}>
            <h1 className="about-hero__title" style={{marginTop: 24, maxWidth: 1100}}>
              Four engagements. One <em>operator</em>. No junior layers.
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{color: "var(--fg-2)", fontSize: 18, maxWidth: 640, lineHeight: 1.55}}>
              Pick the shape that fits. Or don't — most engagements are a hybrid, scoped in writing after the first call.
            </p>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="services">
          {D.services.map((s, i) => (
            <Reveal key={i} delay={i * 80} className="service" as="div">
              <div className="service__head">
                <span className="service__num">{String(i + 1).padStart(2, "0")} · Service</span>
                <span className="service__icon">{s.icon}</span>
              </div>
              <div>
                <h3 className="service__title">{s.title}</h3>
                <p className="service__desc" style={{marginTop: 16}}>{s.desc}</p>
              </div>
              <div className="service__body">
                <div className="service__out">
                  <strong>What you get</strong>
                  <ul>{s.outs.map(o => <li key={o}>{o}</li>)}</ul>
                </div>
                <div className="service__for">
                  <strong>Who it's for</strong>
                  {s.for}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead num="02 / How it works" titleHtml="A <em>simple</em> four-step rhythm." lede="Every engagement, every size. Same shape." />
        </div>
        <div className="process">
          {D.process.map((p, i) => (
            <Reveal key={i} delay={i * 80} className="process__step" as="div">
              <div className="process__num">STEP {String(i + 1).padStart(2, "0")}</div>
              <h3 className="process__title">{p.title}</h3>
              <p className="process__desc">{p.desc}</p>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead num="03 / Engagement models" titleHtml="Three <em>shapes</em> of partnership." />
          <Reveal>
            <div className="services" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
              {[
                { t: "Sprint", p: "2–4 weeks", d: "Tight-scoped problem. LP teardown, creative audit, 30-day roadmap. For founders who need a second pair of eyes.", f: "From ₹1.5L" },
                { t: "Retainer", p: "3–6 months", d: "Embedded. I run growth alongside your team. Weekly cadence, monthly reviews, quarterly bets.", f: "From ₹2.5L / mo" },
                { t: "Outcome", p: "6–12 months", d: "Retainer + skin in the game. Tied to MRR, CAC, or ROAS targets. Available for founders I've worked with before.", f: "Custom" },
              ].map((x, i) => (
                <div key={i} className="service" style={{minHeight: 320}}>
                  <div className="service__head">
                    <span className="service__num">{x.p}</span>
                  </div>
                  <h3 className="service__title">{x.t}</h3>
                  <p className="service__desc">{x.d}</p>
                  <div className="service__for" style={{marginTop: "auto"}}>
                    <strong>Investment</strong>
                    {x.f}
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="cta-big">
        <div className="wrap">
          <Reveal><h2 className="cta-big__title">Book a <em>consultation.</em></h2></Reveal>
          <Reveal delay={120}>
            <div className="cta-big__row">
              <button className="btn btn--primary" onClick={() => onGo("contact")}>Start here <span className="arr">↗</span></button>
              <button className="btn btn--ghost" onClick={() => alert("Calendly placeholder")}>Book 30 min ↗</button>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}

window.ServicesPage = ServicesPage;