// "Our Work" hub — portfolio quote + grid of the 8 category pages.
const WORK_CATEGORIES = [
  { title: "Web Design", href: "/web-design", cover: null, label: "Digital" },
  { title: "Graphic Design", href: "/graphic-design", cover: null, label: "Design" },
  { title: "Music Videos", href: "/music-videos", cover: "assets/photography/work-music-videos.jpg", label: "Film" },
  { title: "Commercial", href: "/commercial", cover: "assets/photography/photo-work-commercial.jpg", label: "Film" },
  { title: "Documentary & BTS", href: "/documentary", cover: "assets/photography/work-documentary-bts.jpg", label: "Film" },
  { title: "Corporate & Live Events", href: "/events", cover: "assets/photography/work-corporate-events.jpg", label: "Events" },
  { title: "Personal & Life Events", href: "/personal-events", cover: "assets/photography/work-personal-life-events.jpg", label: "Events" },
  { title: "Editorial", href: "/editorial", cover: "assets/photography/work-editorial.jpg", label: "Photo" },
  { title: "Lifestyle & Fashion", href: "/lifestyle", cover: "assets/photography/work-lifestyle-fashion.jpg", label: "Photo" },
  { title: "Our Originals", href: "/our-originals", cover: null, label: "In-house" },
];

function PageOurWork() {
  const { PageHero, BigQuote, CTASection, PaintDivider, Reveal, PlaceholderTile, useMediaQuery } = window.JMK;
  const { Badge } = window.JMKStudiosDesignSystem_f6070b;
  const isMobile = useMediaQuery("(max-width: 640px)");
  const isTablet = useMediaQuery("(max-width: 1024px)");
  const cols = isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)";
  const tones = ["pink", "blue", "dark"];

  return (
    <React.Fragment>
      <PageHero eyebrow="Portfolio" title="Our Work" tagline="Eight disciplines, one obsession — work that resonates, not just reaches." />

      <BigQuote text="A portfolio is not just a collection of work; it's a testament to the footsteps we've left on the sands of creativity and innovation." />

      <section style={{ background: "#ffffff", padding: "clamp(72px,10vw,120px) clamp(20px,5vw,64px)" }}>
        <div style={{ display: "grid", gridTemplateColumns: cols, gap: 24 }}>
          {WORK_CATEGORIES.map((c, i) => (
            <Reveal key={c.title} delay={i * 45}>
              <a href={c.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)", overflow: "hidden", marginBottom: 16 }}>
                  {c.cover ? (
                    <img src={c.cover} alt={c.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  ) : (
                    <PlaceholderTile ratio="4/3" />
                  )}
                </div>
                <div style={{ marginBottom: 8 }}><Badge tone={tones[i % tones.length]}>{c.label || "Category"}</Badge></div>
                <div style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", color: "var(--ink-900)" }}>{c.title}</div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      <PaintDivider color="var(--color-primary)" />
      <CTASection />
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.PageOurWork = PageOurWork;