// Reusable building blocks shared across the multi-page site.
// PageHero — dark banner at the top of an interior page (clears the fixed nav).
// PlaceholderGallery — grid of "media coming soon" tiles for gallery-heavy pages.
// CTASection — the closing "let's work together" call-to-action.
// BigQuote — editorial pull-quote band (matches the home Quote look).

function PageHero({ eyebrow, title, tagline, minHeight, bgImage, highlight, center }) {
  const { useScrollY, useMediaQuery } = window.JMK;
  const y = useScrollY();
  const isMobile = useMediaQuery("(max-width: 768px)");

  // "highlight" = page name in caps with a solid black marker behind the text.
  const titleStyle = highlight
    ? {
        fontFamily: "var(--font-editorial)", fontWeight: 600,
        fontSize: "clamp(40px,8.5vw,110px)", lineHeight: 1.18, margin: 0,
        textTransform: "uppercase", letterSpacing: "0.01em",
        color: "var(--white)", display: "inline",
        background: "#111111",
        WebkitBoxDecorationBreak: "clone", boxDecorationBreak: "clone",
        padding: "0.08em 0.22em",
        boxShadow: "0.22em 0 0 #111111, -0.22em 0 0 #111111",
      }
    : {
        fontFamily: "var(--font-editorial)", fontWeight: 500,
        fontSize: "clamp(44px,9vw,120px)", lineHeight: 0.98, margin: 0, color: "var(--white)",
      };

  return (
    <section
      style={{
        position: "relative", background: "#111111", overflow: "hidden",
        minHeight: minHeight || (isMobile ? "62vh" : "72vh"),
        display: "flex", flexDirection: "column", justifyContent: "center",
        alignItems: center ? "center" : "flex-start", textAlign: center ? "center" : "left",
        padding: "clamp(140px,20vh,200px) clamp(20px,5vw,64px) clamp(64px,10vh,96px)",
      }}
    >
      {bgImage && (
        <React.Fragment>
          <img src={bgImage} alt="" aria-hidden="true" style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center",
            transform: `translateY(${y * 0.14}px) scale(1.08)`, willChange: "transform",
          }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.4) 45%, rgba(17,17,17,0.72) 100%)" }} />
        </React.Fragment>
      )}
      <div style={{ position: "absolute", top: "16%", right: "10%", width: 320, height: 320, borderRadius: "50%", background: "var(--color-primary)", opacity: bgImage ? 0.22 : 0.16, filter: "blur(44px)", animation: "heroDrift1 16s ease-in-out infinite", transform: `translateY(${y * 0.12}px)` }} />
      <div style={{ position: "absolute", bottom: "8%", left: "6%", width: 220, height: 220, borderRadius: "50%", background: "var(--color-secondary)", opacity: bgImage ? 0.2 : 0.14, filter: "blur(44px)", animation: "heroDrift2 13s ease-in-out infinite", transform: `translateY(${-y * 0.08}px)` }} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: 1000 }}>
        {eyebrow && (
          <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--color-primary)", fontWeight: 600, marginBottom: 20 }}>
            {eyebrow}
          </div>
        )}
        <h1 style={{ margin: 0 }}><span style={titleStyle}>{title}</span></h1>
        {tagline && (
          <p style={{ fontFamily: "var(--font-editorial)", fontStyle: "italic", fontSize: "clamp(18px,2.6vw,30px)", lineHeight: 1.3, color: "rgba(255,255,255,0.82)", maxWidth: 760, margin: "32px auto 0", marginLeft: center ? "auto" : 0, marginRight: center ? "auto" : 0 }}>
            {tagline}
          </p>
        )}
      </div>
    </section>
  );
}

function PlaceholderTile({ label, ratio }) {
  return (
    <div className="jmk-shimmer" style={{
      position: "relative", aspectRatio: ratio || "4/3", borderRadius: "var(--radius-md)",
      background: "linear-gradient(135deg, var(--color-surface-sunken), #ececec)",
      border: "1px dashed var(--color-border)", overflow: "hidden",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, textAlign: "center", padding: 20,
    }}>
      {label && (
        <span style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-lg)", color: "var(--ink-700)" }}>{label}</span>
      )}
      <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--ink-300)" }}>
        Media coming soon
      </span>
    </div>
  );
}

function PlaceholderGallery({ count, labels, ratio, cols, heading }) {
  const { Reveal, useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 640px)");
  const isTablet = useMediaQuery("(max-width: 1024px)");
  const gridCols = cols || (isMobile ? "1fr" : isTablet ? "repeat(2, 1fr)" : "repeat(3, 1fr)");
  const items = labels && labels.length ? labels : Array.from({ length: count || 6 }, () => null);
  return (
    <section style={{ background: "#ffffff", padding: "clamp(72px,10vw,120px) clamp(20px,5vw,64px)" }}>
      {heading && (
        <Reveal>
          <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(28px,4vw,48px)", margin: "0 0 40px", color: "var(--ink-900)" }}>{heading}</h2>
        </Reveal>
      )}
      <div style={{ display: "grid", gridTemplateColumns: gridCols, gap: 24 }}>
        {items.map((label, i) => (
          <Reveal key={i} delay={i * 45}>
            <PlaceholderTile label={label} ratio={ratio} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function BigQuote({ text, attribution, sub }) {
  const { Reveal, useParallax } = window.JMK;
  const [driftRef, driftY] = useParallax(0.14);
  return (
    <section style={{ background: "var(--color-primary)", padding: "clamp(80px,12vw,120px) clamp(20px,5vw,64px)", overflow: "hidden" }}>
      <div ref={driftRef} style={{ maxWidth: 900 }}>
        <Reveal from="left" distance={40}>
          <p style={{ fontFamily: "var(--font-editorial)", fontStyle: "italic", fontSize: "clamp(28px,4.4vw,52px)", lineHeight: 1.12, color: "var(--ink-900)", margin: 0, transform: `translateY(${driftY * -0.6}px)`, willChange: "transform" }}>
            &ldquo;{text}&rdquo;
          </p>
        </Reveal>
        {attribution && (
          <Reveal from="up" distance={24} delay={140}>
            <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-sm)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "rgba(17,17,17,0.6)", margin: "24px 0 0" }}>
              &mdash; {attribution}
            </p>
          </Reveal>
        )}
        {sub && (
          <Reveal from="up" distance={28} delay={160}>
            <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", lineHeight: "var(--leading-relaxed)", color: "rgba(17,17,17,0.75)", maxWidth: 640, margin: "28px 0 0", transform: `translateY(${driftY * 0.4}px)`, willChange: "transform" }}>
              {sub}
            </p>
          </Reveal>
        )}
      </div>
    </section>
  );
}

function CTASection({ title, sub }) {
  const { Reveal } = window.JMK;
  const { Button } = window.JMKStudiosDesignSystem_f6070b;
  return (
    <section style={{ background: "#111111", padding: "clamp(96px,14vw,160px) clamp(20px,5vw,64px)", textAlign: "center" }}>
      <Reveal>
        <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(36px,6vw,80px)", lineHeight: 1.02, margin: "0 auto 24px", color: "var(--white)", maxWidth: 900 }}>
          {title || "Let's create a masterpiece together."}
        </h2>
      </Reveal>
      <Reveal delay={120}>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", color: "rgba(255,255,255,0.7)", maxWidth: 560, margin: "0 auto 40px" }}>
          {sub || "Tell us what you're building. We'll bring the art and the science."}
        </p>
      </Reveal>
      <Reveal delay={200}>
        <a href="/contact" data-cursor="link" style={{ textDecoration: "none" }}>
          <Button variant="primary" size="lg">Get in Touch&hellip;</Button>
        </a>
      </Reveal>
    </section>
  );
}

function VideoEmbed({ id, title }) {
  return (
    <div style={{ position: "relative", aspectRatio: "16/9", background: "#111111", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
      <iframe
        src={`https://www.youtube-nocookie.com/embed/${id}`}
        title={title || "JMK Studios film"}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    </div>
  );
}

window.JMK = window.JMK || {};
window.JMK.PageHero = PageHero;
window.JMK.PlaceholderTile = PlaceholderTile;
window.JMK.PlaceholderGallery = PlaceholderGallery;
window.JMK.BigQuote = BigQuote;
window.JMK.CTASection = CTASection;
window.JMK.VideoEmbed = VideoEmbed;