// Services page — minimal, typographic
function ServicesPage() {
  const [active, setActive] = React.useState(SERVICES[0].id);
  const s = SERVICES.find(x => x.id === active);

  return (
    <div className="page" data-screen-label="05 Services">
      <section style={{ paddingTop: "calc(var(--pad) + 120px)", paddingBottom: 60 }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>Services</div>
          <h1 style={{ fontSize: "clamp(56px, 8vw, 140px)", lineHeight: .96 }}>
            What we do, <span className="italic" style={{ color: "var(--bronze-2)" }}>and how we do it.</span>
          </h1>
          <p style={{ marginTop: 40, color: "var(--bone-2)", fontSize: 17, maxWidth: 720, lineHeight: 1.7 }}>
            Six disciplines, held to one standard. Each is led by senior practitioners with decades inside the practice and across the region.
          </p>
        </div>
      </section>

      {/* Service detail with split layout */}
      <section className="section tight">
        <div className="container">
          <div className="grid grid-12" style={{ alignItems: "start", gap: 48 }}>
            {/* List */}
            <div style={{ gridColumn: "1 / span 5", position: "sticky", top: 96 }}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Six Disciplines</div>
              {SERVICES.map(svc => (
                <div key={svc.id}
                  onClick={() => setActive(svc.id)}
                  style={{
                    borderTop: "1px solid var(--line)",
                    padding: "22px 0",
                    display: "grid", gridTemplateColumns: "60px 1fr 24px", gap: 16, alignItems: "center",
                    cursor: "pointer",
                  }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".14em", color: active === svc.id ? "var(--bronze-2)" : "var(--bone-3)" }}>—{svc.num}</span>
                  <span style={{
                    fontFamily: "var(--serif)",
                    fontSize: active === svc.id ? "clamp(28px, 3vw, 40px)" : "clamp(24px, 2.4vw, 32px)",
                    color: active === svc.id ? "var(--bone)" : "var(--bone-3)",
                    transition: "all .3s ease",
                    lineHeight: 1.1,
                  }}>
                    {svc.title}
                  </span>
                  <span style={{ color: active === svc.id ? "var(--bronze)" : "var(--bone-4)", textAlign: "right" }}>
                    {active === svc.id ? "●" : "○"}
                  </span>
                </div>
              ))}
              <div style={{ borderTop: "1px solid var(--line)" }} />
            </div>

            {/* Detail */}
            <div style={{ gridColumn: "7 / span 6" }}>
              <ServiceDetail s={s} />
            </div>
          </div>
        </div>
      </section>

      {/* Process flow */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <SectionTitle
            eyebrow="From inquiry to closeout"
            title={<>The arc of a <span className="italic" style={{ color: "var(--bronze-2)" }}>typical engagement.</span></>}
            sub="Every project is its own, but the rhythm is consistent. Below is the broad shape of how a commission moves through the office."
          />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
            {[
              { n: "00", t: "Conversation", d: "First meeting · site walk · intent" },
              { n: "01", t: "Preconstruction", d: "Estimating · constructability · phasing" },
              { n: "02", t: "Mobilization", d: "Trade procurement · logistics · permitting" },
              { n: "03", t: "Build", d: "Field leadership · weekly cadence · owner visibility" },
              { n: "04", t: "Commissioning", d: "Testing · training · documentation" },
              { n: "05", t: "Stewardship", d: "Warranty · seasonal walks · long-term care" },
            ].map((p, i, a) => (
              <div key={p.n} style={{ padding: "32px 22px", borderRight: i === a.length - 1 ? "0" : "1px solid var(--line)" }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".2em", color: "var(--bronze-2)" }}>—{p.n}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--bone)", marginTop: 16 }}>{p.t}</div>
                <div style={{ marginTop: 12, color: "var(--bone-3)", fontSize: 12, letterSpacing: ".04em", lineHeight: 1.5 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ServiceDetail({ s }) {
  return (
    <div key={s.id} style={{ animation: "fade-in .4s ease both" }}>
      <div className="eyebrow"><span className="dot"></span>Service · {s.num}</div>
      <h2 style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 22, lineHeight: 1.05 }}>{s.title}</h2>
      <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(22px, 2vw, 28px)", lineHeight: 1.4, color: "var(--bone-2)", margin: "30px 0 0", fontWeight: 300 }}>
        {s.blurb}
      </p>

      <div className="img ar-16-9" style={{ marginTop: 40, backgroundImage: `url(${s.img})` }} />

      <div style={{ marginTop: 48 }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>What's included</div>
        <div style={{ borderTop: "1px solid var(--line)" }}>
          {s.deliverables.map((d, i) => (
            <div key={d} style={{ display: "grid", gridTemplateColumns: "40px 1fr", gap: 20, padding: "20px 0", borderBottom: "1px solid var(--line)" }}>
              <span style={{ fontFamily: "var(--mono)", color: "var(--bone-3)", fontSize: 11, letterSpacing: ".14em" }}>{String(i + 1).padStart(2, "0")}</span>
              <span style={{ color: "var(--bone)", fontSize: 16 }}>{d}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 40, padding: 28, background: "var(--bg-2)", border: "1px solid var(--line)" }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>Engagement Notes</div>
        <p style={{ color: "var(--bone-2)", margin: 0, lineHeight: 1.7, fontSize: 14 }}>
          Engagements can be open-book, fixed-fee, or hybrid — structured around what fits the project, the owner, and the design team.
          We routinely begin with a small, paid feasibility study so the conversation has real numbers and a real schedule in it.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { ServicesPage });