// Reusable service-page template. Pass in service-specific content.
const ServicePage = ({
  eyebrow, title, lead,
  capabilities,
  process,
  deliverables,
  stats,
  faqs,
  related,
}) => (
  <>
    <Nav current="Services"/>
    <PageHero eyebrow={eyebrow} title={title} lead={lead}/>

    {/* Capabilities */}
    <section style={{ padding: "80px 48px 120px", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ marginBottom: 56 }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--cobalt-700)", marginBottom: 18,
          }}>What's included</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: 0,
          }}>
            Capabilities <span style={{ fontStyle: "italic" }}>under this engagement.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {capabilities.map((c, i) => (
            <div key={i} data-reveal-scroll style={{
              padding: "30px 28px", border: "1px solid var(--border)",
              borderRadius: 22, background: "var(--paper-raised)",
              minHeight: 220,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12, marginBottom: 22,
                background: `color-mix(in oklab, ${c.tint || 'var(--brand-cobalt)'} 14%, transparent)`,
                color: c.tint || 'var(--brand-cobalt)',
                display: "grid", placeItems: "center",
                border: `1px solid color-mix(in oklab, ${c.tint || 'var(--brand-cobalt)'} 30%, transparent)`,
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  {c.icon}
                </svg>
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400,
                letterSpacing: "-0.015em", margin: "0 0 10px",
              }}>{c.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", margin: 0 }}>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Stats */}
    {stats && (
      <section style={{ padding: "60px 48px", background: "var(--ink-950)", color: "var(--paper)" }}>
        <div style={{
          maxWidth: 1280, margin: "0 auto",
          display: "grid", gridTemplateColumns: `repeat(${stats.length}, 1fr)`, gap: 24,
        }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              padding: "12px 8px",
              borderLeft: i === 0 ? "none" : "1px solid rgba(250,248,244,0.12)",
              paddingLeft: i === 0 ? 0 : 24,
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 48, fontWeight: 500,
                letterSpacing: "-0.03em", lineHeight: 1, fontVariantNumeric: "tabular-nums",
                color: "var(--brand-cyan)",
              }}>{s.n}</div>
              <div style={{ fontSize: 14, color: "rgba(250,248,244,0.7)", marginTop: 10, maxWidth: 240 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>
    )}

    {/* Process */}
    <section style={{ padding: "120px 48px", background: "var(--ink-50)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--cobalt-700)", marginBottom: 18,
          }}>The process</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(40px, 5vw, 64px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: 0,
          }}>
            How we'll <span style={{ fontStyle: "italic" }}>actually run it.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${process.length}, 1fr)`, gap: 18 }}>
          {process.map((p, i) => (
            <div key={i} data-reveal-scroll>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
                color: "var(--cobalt-700)", marginBottom: 18,
              }}>{String(i+1).padStart(2,"0")}</div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 400,
                letterSpacing: "-0.015em", lineHeight: 1.15, margin: "0 0 10px",
              }}>{p.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Deliverables */}
    <section style={{ padding: "120px 48px", background: "var(--paper)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
        <div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--cobalt-700)", marginBottom: 18,
          }}>What you get</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(36px, 4.5vw, 56px)", lineHeight: 1.05,
            letterSpacing: "-0.02em", margin: 0,
          }}>
            Deliverables, <span style={{ fontStyle: "italic" }}>itemised.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--fg-muted)", maxWidth: 380, marginTop: 22 }}>
            Every engagement comes with a written scope. Here's what shows up in the
            shared folder.
          </p>
        </div>
        <div style={{ borderTop: "1px solid var(--border)" }}>
          {deliverables.map((d, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "60px 1fr",
              padding: "22px 0", borderBottom: "1px solid var(--border)",
              alignItems: "start", gap: 24,
            }}>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600,
                letterSpacing: "0.1em", color: "var(--fg-muted)", paddingTop: 4,
              }}>{String(i+1).padStart(2,"0")}</div>
              <div>
                <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 4 }}>{d.t}</div>
                <div style={{ fontSize: 15, color: "var(--fg-muted)", lineHeight: 1.55 }}>{d.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    <FAQ items={faqs} eyebrow="Service FAQ" title={<>What clients <span style={{ fontStyle: "italic" }}>actually ask.</span></>}/>

    {/* Related */}
    {related && (
      <section style={{ padding: "60px 48px 120px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--cobalt-700)", marginBottom: 24,
          }}>Pairs well with</div>
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${related.length}, 1fr)`, gap: 16 }}>
            {related.map((r, i) => (
              <a key={i} href={r.href} style={{
                padding: "26px 24px", border: "1px solid var(--border)",
                borderRadius: 18, background: "var(--paper-raised)",
                textDecoration: "none", color: "var(--ink-900)",
                transition: "border-color 200ms, transform 200ms",
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--brand-cobalt)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.transform = "translateY(0)"; }}
              >
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400, letterSpacing: "-0.01em" }}>{r.t}</div>
                  <div style={{ fontSize: 13, color: "var(--fg-muted)", marginTop: 4 }}>{r.d}</div>
                </div>
                <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 8h10M9 4l4 4-4 4"/>
                </svg>
              </a>
            ))}
          </div>
        </div>
      </section>
    )}

    <CTA/>
    <Footer/>
  </>
);

window.ServicePage = ServicePage;