// One reusable template for every service page under Our Expertise.
// Each service HTML sets window.__PAGE_DATA__ before mounting; this reads it.
//
// Shape: { eyebrow, title, tagline, intro, whatWeDo:[{t,d}], process:[{t,d}],
//          proof:[string], quote, galleryHeading, galleryKey, galleryCount,
//          related:[{label,href}] }
//
// Built from the same pieces as the work-category pages (PageHero, BigQuote,
// PlaceholderGallery, CTASection) so the two families of page stay visually
// identical without sharing a component that has to serve both.
function ServicePage() {
  const { PageHero, PlaceholderGallery, CTASection, BigQuote, Reveal, useMediaQuery } = window.JMK;
  const d = window.__PAGE_DATA__ || {};
  const isMobile = useMediaQuery("(max-width: 640px)");

  const section = (background) => ({
    background: background || "#ffffff",
    padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px)",
  });

  const heading = {
    fontFamily: "var(--font-editorial)",
    fontSize: "clamp(28px,4vw,48px)",
    margin: "0 0 clamp(32px,5vw,48px)",
    color: "var(--ink-900)",
  };

  return (
    <React.Fragment>
      <PageHero eyebrow={d.eyebrow || "Our Expertise"} title={d.title} tagline={d.tagline} />

      {d.intro && (
        <section style={{ ...section(), paddingBottom: 0 }}>
          <Reveal from="left" distance={36}>
            <p style={{
              fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)",
              lineHeight: "var(--leading-relaxed)", color: "var(--ink-700)", maxWidth: 720, margin: 0,
            }}>
              {d.intro}
            </p>
          </Reveal>
        </section>
      )}

      {d.whatWeDo && d.whatWeDo.length > 0 && (
        <section style={section()}>
          <Reveal><h2 style={heading}>{d.whatWeDoHeading || "What we do"}</h2></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 28 : 40 }}>
            {d.whatWeDo.map((s, i) => (
              <Reveal key={i} delay={i * 60} from={isMobile ? "up" : (i % 2 === 0 ? "left" : "right")}>
                <div style={{ display: "flex", gap: 16 }}>
                  <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--color-primary)", fontWeight: 700, paddingTop: 4 }}>
                    0{i + 1}
                  </span>
                  <div>
                    <h3 style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", color: "var(--ink-900)", margin: "0 0 8px" }}>{s.t}</h3>
                    <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)", margin: 0 }}>{s.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </section>
      )}

      {d.quote && <BigQuote text={d.quote} attribution={d.quoteBy} />}

      {d.process && d.process.length > 0 && (
        <section style={section("var(--color-surface-sunken)")}>
          <Reveal><h2 style={heading}>{d.processHeading || "How it runs"}</h2></Reveal>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fit, minmax(220px, 1fr))", gap: isMobile ? 28 : 32 }}>
            {d.process.map((s, i) => (
              <Reveal key={i} delay={i * 70}>
                <div style={{ borderTop: "2px solid var(--ink-900)", paddingTop: 20 }}>
                  <div style={{
                    fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)",
                    textTransform: "uppercase", color: "var(--color-primary)", fontWeight: 600, marginBottom: 12,
                  }}>
                    Step {i + 1}
                  </div>
                  <h3 style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", color: "var(--ink-900)", margin: "0 0 10px" }}>{s.t}</h3>
                  <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)", margin: 0 }}>{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </section>
      )}

      {d.proof && d.proof.length > 0 && (
        <section style={section()}>
          <Reveal><h2 style={heading}>{d.proofHeading || "What you walk away with"}</h2></Reveal>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, maxWidth: 820 }}>
            {d.proof.map((line, i) => (
              <Reveal key={i} delay={i * 50}>
                <li style={{
                  display: "flex", gap: 16, alignItems: "flex-start",
                  padding: "18px 0", borderBottom: "1px solid var(--color-border)",
                  fontFamily: "var(--font-ui)", fontSize: "var(--text-base)",
                  lineHeight: "var(--leading-relaxed)", color: "var(--ink-700)",
                }}>
                  <span aria-hidden="true" style={{ color: "var(--color-primary)", fontWeight: 700 }}>&mdash;</span>
                  <span>{line}</span>
                </li>
              </Reveal>
            ))}
          </ul>
        </section>
      )}

      <PlaceholderGallery
        heading={d.galleryHeading || "Selected Work"}
        count={d.galleryCount}
        galleryKey={d.galleryKey}
      />

      {d.related && d.related.length > 0 && (
        <section style={{ ...section(), paddingTop: 0 }}>
          <Reveal>
            <div style={{
              fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)",
              textTransform: "uppercase", color: "var(--ink-500)", fontWeight: 600, marginBottom: 20,
            }}>
              Often paired with
            </div>
          </Reveal>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
            {d.related.map((r, i) => (
              <Reveal key={r.href} delay={i * 40}>
                <a href={r.href} data-cursor="link" style={{
                  display: "inline-block", padding: "10px 20px", borderRadius: "var(--radius-pill)",
                  border: "1px solid var(--color-border)", textDecoration: "none",
                  fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--ink-900)",
                }}>
                  {r.label}
                </a>
              </Reveal>
            ))}
          </div>
        </section>
      )}

      <section style={{ background: "#ffffff", padding: "0 clamp(20px,5vw,64px) clamp(64px,9vw,96px)" }}>
        <a href="/our-expertise" data-cursor="link" style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--color-secondary)", textDecoration: "none" }}>
          &larr; All six service lines
        </a>
      </section>

      <CTASection />
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.ServicePage = ServicePage;