// Sanity-CMS-shaped placeholder data: title / excerpt / cover / tags — swap for a real Sanity query of this shape.
const WORK_ITEMS = [
  { title: "Simba & KSI \"Loose\" Activation Campaign", service: "Commercial", excerpt: "A high-energy retail activation built to launch Simba & KSI's Loose drink.", cover: "assets/photography/photo-work-01.jpg" },
  { title: "St. Luce Brothers", service: "Music Videos", excerpt: "A music video production capturing raw performance and energy.", cover: "assets/photography/work-music-videos.jpg" },
  { title: "Kickers Campaign", service: "Commercial", excerpt: "Product-led commercial work spotlighting the brand's heritage silhouette.", cover: "assets/photography/photo-work-commercial.jpg" },
  { title: "Behind the Scenes - Tom Bryan", service: "Documentary/BTS", excerpt: "On-location behind-the-scenes coverage of Tom Bryan's creative process.", cover: "assets/photography/work-documentary-bts.jpg" },
  { title: "SALT - Halloween Party 2022", service: "Corporate/Live Events", excerpt: "Full event coverage from set-up through to last dance.", cover: "assets/photography/work-corporate-events.jpg" },
  { title: "OG Emmy - Editorial Shoot", service: "Editorial", excerpt: "Styled editorial photography built around bold, contrast-driven visuals.", cover: "assets/photography/work-editorial.jpg" },
  { title: "Behind the Scenes - Mercy Worldwide 2018", service: "Lifestyle/Fashion", excerpt: "Lifestyle storytelling shot on the road with Mercy Worldwide.", cover: "assets/photography/work-lifestyle-fashion.jpg" },
  { title: "Wedding Photography", service: "Personal/Life Events", excerpt: "Candid, unscripted moments from a real celebration day.", cover: "assets/photography/work-personal-life-events.jpg" },
];
function Work() {
  const { Reveal, useMediaQuery } = window.JMK;
  const { Tag, Badge } = window.JMKStudiosDesignSystem_f6070b;
  const isMobile = useMediaQuery("(max-width: 640px)");
  const isTablet = useMediaQuery("(max-width: 1024px)");
  const workCols = isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)";
  const filters = ["All", "Web Design", "Music Videos", "Commercial", "Documentary/BTS", "Corporate/Live Events", "Editorial", "Lifestyle/Fashion", "Personal/Life Events"];
  const [active, setActive] = React.useState("All");
  const items = active === "All" ? WORK_ITEMS : WORK_ITEMS.filter((w) => w.service === active);
  const tones = ["pink", "blue", "dark"];

  return (
    <section id="our-work" className="jmk-stage" style={{ background: "var(--color-surface-sunken)", padding: "clamp(80px,12vw,140px) clamp(20px,5vw,64px)", overflow: "hidden" }}>
      <Reveal>
        <div style={{ marginBottom: 48 }}>
          <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(36px,5vw,64px)", margin: "0 0 32px", color: "var(--ink-900)" }}>Our Work</h2>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {filters.map((f) => (
              <Tag key={f} active={active === f} onClick={() => setActive(f)}>{f}</Tag>
            ))}
          </div>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: workCols, gap: 24, marginBottom: isMobile ? 64 : 96 }}>
        {items.map((item, i) => (
          <Reveal key={item.title + i} delay={i * 50}>
            <a href="#" data-cursor="link" className="jmk-lift" style={{ textDecoration: "none", display: "block" }}>
              <div className="jmk-zoom" style={{ aspectRatio: "4/3", background: "#111111", borderRadius: "var(--radius-md)", marginBottom: 16, overflow: "hidden" }}>
                <img src={item.cover} alt={item.service} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ marginBottom: 8 }}><Badge tone={tones[i % tones.length]}>{item.service}</Badge></div>
              <div style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-xl)", color: "var(--ink-900)", marginBottom: 4 }}>{item.title}</div>
              <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", color: "var(--ink-500)" }}>{item.excerpt}</div>
            </a>
          </Reveal>
        ))}
      </div>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Work = Work;