// Sanity-CMS-shaped placeholder blog/editorial content ("Our Originals") — this is the site's blog section.
// Set a real YouTube video ID to show the featured video embed (the only YT embed on the site).
const FEATURED_YOUTUBE_ID = "UHNLNIUJnLA";

function Originals() {
  const { Reveal } = window.JMK;
  return (
    <section id="our-originals" className="jmk-stage" style={{ background: "#ffffff", padding: "140px clamp(20px,5vw,64px)" }}>
      <Reveal>
        <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(36px,5vw,64px)", margin: "0 0 12px", color: "var(--ink-900)" }}>Our Originals</h2>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", color: "var(--ink-500)", margin: "0 0 48px", maxWidth: 520 }}>
          Thinking from inside the studio — culture, strategy and craft, published as it happens.
        </p>
      </Reveal>

      <Reveal>
        <div style={{ position: "relative", aspectRatio: "16/9", background: "#111111", borderRadius: "var(--radius-md)", overflow: "hidden", marginBottom: 0 }}>
          {FEATURED_YOUTUBE_ID ? (
            <iframe
              src={`https://www.youtube-nocookie.com/embed/${FEATURED_YOUTUBE_ID}`}
              title="Featured video"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          ) : (
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.4)", fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", textAlign: "center", padding: 24 }}>
              Set FEATURED_YOUTUBE_ID in Originals.jsx to embed the studio reel here.
            </div>
          )}
        </div>
      </Reveal>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Originals = Originals;