// Services — the ten capabilities

const ServiceRow = ({ s, onClick }) => (
  <div className="service-row" onClick={onClick}>
    <span className="service-row__num">{s.num}</span>
    <h3 className="service-row__name">{s.name}</h3>
    <p className="service-row__desc">{s.desc}</p>
    <div className="service-row__cta"><span className="circle"><ArrowUpRight /></span></div>
  </div>
);

const Services = ({ go }) => (
  <div className="page" data-screen-label="04 Services">
    <section className="bg-paper" style={{ paddingTop: "clamp(80px, 10vw, 140px)", paddingBottom: "clamp(48px, 6vw, 80px)" }}>
      <div className="container">
        <Kicker>Index 04 / Services · 10 disciplines</Kicker>
        <h1 className="t-h1" style={{ marginTop: 16, maxWidth: 1100 }}>
          One in-house team. Concept &rarr; build &rarr; <span style={{ color: "var(--muted)" }}>live delivery</span>.
        </h1>
        <p className="t-lead" style={{ marginTop: 24, maxWidth: 720, color: "var(--muted)" }}>
          Ten capabilities under a single producer-led model. No subcontracting the
          critical path — design, build, run-of-show, crowd safety and broadcast
          sit in the same room.
        </p>
      </div>
    </section>

    <Section tone="paper">
      <div className="service-list" style={{ borderTop: "1px solid var(--line)" }}>
        {SERVICES.map(s => (
          <ServiceRow key={s.slug} s={s} onClick={() => window.openBrief && window.openBrief(s.slug.split("-")[0])} />
        ))}
      </div>
    </Section>

    {/* Process band */}
    <section className="bg-ink">
      <div className="container" style={{ padding: "clamp(72px, 10vw, 128px) var(--pad)" }}>
        <SecHead
          eyebrow="How we work"
          title="A producer-led model."
          lead="One named producer accountable across concept, build and live delivery — backed by an in-house engineering, design and operations bench. The brief never gets handed over a wall."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line-dk)", border: "1px solid var(--line-dk)", borderRadius: 18, overflow: "hidden" }}>
          {[
            { n: "01", t: "Brief / Discovery", d: "Category-qualified intake. Producer, regional lead, and the right specialist on the first call." },
            { n: "02", t: "Concept / Design", d: "Creative, technical, hospitality, broadcast — designed against your KPIs, not ours." },
            { n: "03", t: "Build / Pre-prod", d: "Engineering, fabrication, content production, crew. Compliance and rights baked in." },
            { n: "04", t: "Live / Wrap", d: "Run-of-show. Crowd ops. Broadcast. Post-event measurement against the outcomes layer." },
          ].map((p, i) => (
            <div key={i} style={{ background: "var(--ink)", padding: 36, minHeight: 260, display: "flex", flexDirection: "column", justifyContent: "space-between", color: "var(--paper)" }}>
              <div>
                <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, color: "var(--accent)", letterSpacing: "0.08em" }}>STAGE {p.n}</div>
                <div style={{ fontWeight: 700, fontSize: 26, letterSpacing: "-0.015em", marginTop: 12, lineHeight: 1.05 }}>{p.t}</div>
              </div>
              <div style={{ fontSize: 13, color: "rgba(246,245,239,0.7)", lineHeight: 1.5 }}>{p.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* CTA */}
    <section className="bg-bone">
      <div className="container" style={{ padding: "80px var(--pad)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
        <div>
          <h2 className="t-h2">Need a hybrid of these?</h2>
          <p style={{ color: "var(--muted)", marginTop: 12, maxWidth: 520 }}>
            Most briefs span 2-4 of these disciplines. Pick the closest in the brief flow — we'll route accordingly.
          </p>
        </div>
        <BriefBtn variant="ink" size="xl" />
      </div>
    </section>
  </div>
);

Object.assign(window, { Services });