// One reusable template for every "Our Work" category page.
// Each category HTML sets window.__PAGE_DATA__ before mounting; this reads it.
// Shape: { eyebrow, title, tagline, videos:[{id,title}], clients:[name],
//          galleryCount, galleryLabels:[], note }
function CategoryPage() {
  const { PageHero, PlaceholderGallery, CTASection, VideoEmbed, Reveal, useMediaQuery } = window.JMK;
  const d = window.__PAGE_DATA__ || {};
  const isMobile = useMediaQuery("(max-width: 640px)");
  const isTablet = useMediaQuery("(max-width: 1024px)");

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

      {d.note && (
        <section style={{ background: "#ffffff", padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px) 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.note}
            </p>
          </Reveal>
        </section>
      )}

      {d.services && d.services.length > 0 && (
        <section style={{ background: "#ffffff", padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px)" }}>
          <Reveal>
            <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(28px,4vw,48px)", margin: "0 0 clamp(32px,5vw,48px)", color: "var(--ink-900)" }}>
              {d.servicesHeading || "What we do"}
            </h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 28 : 40 }}>
            {d.services.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.videos && d.videos.length > 0 && (
        <section style={{ background: "#ffffff", padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px)" }}>
          <Reveal>
            <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(28px,4vw,48px)", margin: "0 0 40px", color: "var(--ink-900)" }}>Selected Films</h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 28 }}>
            {d.videos.map((v, i) => (
              <Reveal key={v.id} delay={i * 80}>
                <VideoEmbed id={v.id} title={v.title} />
                {v.title && (
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--ink-500)", marginTop: 12 }}>{v.title}</div>
                )}
              </Reveal>
            ))}
          </div>
        </section>
      )}

      {d.clients && d.clients.length > 0 && (
        <section style={{ background: "var(--color-surface-sunken)", padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px)" }}>
          <Reveal>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--ink-500)", fontWeight: 600, marginBottom: 8 }}>
              Selected Clients
            </div>
            <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", color: "var(--ink-500)", margin: "0 0 40px" }}>
              Storefronts we've built to captivate, engage and convert.
            </p>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : isTablet ? "repeat(3, 1fr)" : "repeat(4, 1fr)", gap: 16 }}>
            {d.clients.map((c, i) => (
              <Reveal key={c} delay={i * 40}>
                <div style={{ aspectRatio: "3/2", background: "var(--color-surface)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-md)", display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", padding: 20 }}>
                  <span style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-lg)", color: "var(--ink-900)" }}>{c}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </section>
      )}

      <PlaceholderGallery
        heading={d.galleryHeading || "From the Archive"}
        count={d.galleryCount}
        labels={d.galleryLabels}
      />

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

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