// "Our Originals" page — films crafted in-house, plus the "not essential but appreciated" awards note.
// Featured film uses the confirmed YouTube ID; the other two are placeholders until IDs are supplied.
const ORIGINALS_FILMS = [
  { id: "UHNLNIUJnLA", title: "Featured Original" },
  { id: null, title: "Paths" },
  { id: null, title: "Check Halt" },
];

function PageOriginals() {
  const { PageHero, VideoEmbed, PlaceholderTile, CTASection, Reveal, useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 640px)");

  return (
    <React.Fragment>
      <PageHero eyebrow="In-House" title="Our Originals" tagline="Pieces we've crafted with passion — storytelling with the power to drive change." />

      <section style={{ background: "#ffffff", padding: "clamp(72px,10vw,120px) clamp(20px,5vw,64px)" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: 28 }}>
          {ORIGINALS_FILMS.map((f, i) => (
            <Reveal key={f.title} delay={i * 80} style={i === 0 ? { gridColumn: isMobile ? "auto" : "1 / -1" } : undefined}>
              {f.id ? <VideoEmbed id={f.id} title={f.title} /> : <PlaceholderTile ratio="16/9" label={f.title} />}
              <div style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-xl)", color: "var(--ink-900)", marginTop: 12 }}>{f.title}</div>
            </Reveal>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--color-primary)", padding: "clamp(80px,12vw,120px) clamp(20px,5vw,64px)" }}>
        <Reveal from="left" distance={36}>
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "rgba(17,17,17,0.6)", fontWeight: 600, marginBottom: 16 }}>
            Not Essential&hellip; But Totally Appreciated
          </div>
          <p style={{ fontFamily: "var(--font-editorial)", fontStyle: "italic", fontSize: "clamp(26px,4vw,44px)", lineHeight: 1.14, color: "var(--ink-900)", maxWidth: 820, margin: 0 }}>
            A few of our originals have picked up laurels along the way. We don't make them for the trophies &mdash; but we won't pretend it doesn't feel good.
          </p>
        </Reveal>
      </section>

      <CTASection title="Got a story that deserves to be told?" />
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.PageOriginals = PageOriginals;