// Our Work — film-frame plates in a 2x2 ish editorial grid.
// Plates accept videoSrc; fall back to gradient placeholder.

const WORK_PLATES = [
  {
    tc: "00:00:00:00 · WW2",
    title: "Wartime exterior",
    sub: "Archival recreation.",
    role: "Generative environment, archival color match, comp.",
    grade: "warm",
    aspect: "21/9",
    span: 2,
    accent: "var(--jh-amber)",
  },
  {
    tc: "00:00:00:00 · BRIDGE",
    title: "Bridge",
    sub: "Set extension.",
    role: "Camera-matched geometry, atmospherics, integration.",
    grade: "trace",
    aspect: "16/9",
    span: 1,
    accent: "var(--jh-trace)",
  },
  {
    tc: "00:00:00:00 · STREETCAR",
    title: "Streetcar",
    sub: "Period reconstruction.",
    role: "Era-correct environment. Generative + comp pass.",
    grade: "scene",
    aspect: "16/9",
    span: 1,
    accent: "var(--jh-scene)",
  },
  {
    tc: "00:00:00:00 · ALLEYWAY",
    title: "Alleyway",
    sub: "Environment build.",
    role: "Set extension, atmospherics, integration with live-action plate.",
    grade: "comp",
    aspect: "16/9",
    span: 1,
    accent: "var(--jh-comp)",
  },
  {
    tc: "00:00:00:00 · STATION",
    title: "Train station",
    sub: "Period reconstruction.",
    role: "Set extension + archival match. Generative environment pass.",
    grade: "frame",
    aspect: "16/9",
    span: 1,
    accent: "var(--jh-frame)",
  },
];

const PLATE_GRADIENTS = {
  warm:  "linear-gradient(135deg, #2c1f12 0%, #1a1209 60%, #080604 100%)",
  trace: "linear-gradient(135deg, #2a261c 0%, #16130d 60%, #0a0805 100%)",
  scene: "linear-gradient(135deg, #2c2218 0%, #18120a 60%, #0a0805 100%)",
  comp:  "linear-gradient(135deg, #1f1f1f 0%, #131311 60%, #080706 100%)",
  frame: "linear-gradient(135deg, #2a2e34 0%, #14171b 60%, #08090b 100%)",
};

const Plate = ({ plate, videoSrc }) => {
  const [hover, setHover] = React.useState(false);
  const [loaded, setLoaded] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        gridColumn: `span ${plate.span}`,
        background: hover ? "var(--jh-bg-stage)" : "var(--jh-bg-raised)",
        border: "1px solid var(--jh-rule)",
        boxShadow: "var(--jh-inset)",
        transition: "background 180ms cubic-bezier(0.2,0,0.1,1)",
        cursor: "pointer",
      }}>
      {/* Reel well */}
      <div style={{
        aspectRatio: plate.aspect,
        background: PLATE_GRADIENTS[plate.grade],
        borderBottom: "1px solid var(--jh-rule)",
        position: "relative",
        overflow: "hidden",
      }}>
        {videoSrc && (
          <video
            src={videoSrc}
            autoPlay muted loop playsInline preload="auto"
            onLoadedData={() => setLoaded(true)}
            onCanPlay={() => setLoaded(true)}
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%",
              objectFit: "cover",
              filter: "brightness(0.7) saturate(0.9)",
              opacity: loaded ? 1 : 0,
              transition: "opacity 500ms cubic-bezier(0.2,0,0.1,1)",
            }}
          />
        )}
        {/* horizontal scan bands */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "repeating-linear-gradient(0deg, rgba(184,137,58,0.025) 0px, rgba(184,137,58,0.025) 1px, transparent 1px, transparent 5px)",
          pointerEvents: "none",
        }} />
        {/* film-frame border inset */}
        <div style={{
          position: "absolute",
          inset: 12,
          border: "1px solid rgba(237,230,216,0.07)",
          pointerEvents: "none",
        }} />
        {/* timecode top-left */}
        <span style={{
          position: "absolute",
          top: 14, left: 16,
          fontFamily: "var(--jh-font-mono)",
          fontSize: 10,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: plate.accent,
        }}>{plate.tc}</span>
        {/* frame counter top-right */}
        <span style={{
          position: "absolute",
          top: 14, right: 16,
          fontFamily: "var(--jh-font-mono)",
          fontSize: 10,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: "rgba(237,230,216,0.4)",
        }}>FR · 1A</span>
      </div>

      {/* Caption */}
      <div style={{
        padding: "20px 22px 22px",
        display: "flex", flexDirection: "column", gap: 8,
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
          <h3 style={{
            fontFamily: "var(--jh-font-display)",
            fontWeight: 800,
            fontSize: 24,
            textTransform: "uppercase",
            letterSpacing: "-0.005em",
            margin: 0,
            color: "var(--jh-fg)",
          }}>{plate.title}</h3>
          <span style={{
            fontFamily: "var(--jh-font-serif)",
            fontStyle: "italic",
            fontSize: 13,
            color: "var(--jh-fg-3)",
            whiteSpace: "nowrap",
          }}>{plate.sub}</span>
        </div>
        <p style={{
          fontFamily: "var(--jh-font-serif)",
          fontSize: 14,
          lineHeight: 1.5,
          color: "var(--jh-fg-2)",
          margin: 0,
          maxWidth: "62ch",
        }}>{plate.role}</p>
      </div>
    </article>
  );
};

const WorkSection = ({ heroVideoMap = {} }) => (
  <SectionWrap id="work" label="Our Work">
    <SectionHeader
      index="01"
      eyebrow="Our Work"
      title={<>Selected<br />work.</>}
      meta="UNDER NDA WHERE NOTED"
    />
    <div style={{
      display: "grid",
      gridTemplateColumns: "repeat(2, 1fr)",
      gap: 18,
    }}>
      {WORK_PLATES.map((p, i) => (
        <Plate key={i} plate={p} videoSrc={heroVideoMap[i]} />
      ))}
    </div>

    <div style={{
      marginTop: 48,
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      paddingTop: 24,
      borderTop: "1px solid var(--jh-rule)",
      flexWrap: "wrap",
      gap: 16,
    }}>
      <p style={{
        fontFamily: "var(--jh-font-serif)",
        fontStyle: "italic",
        fontSize: 16,
        color: "var(--jh-fg-2)",
        margin: 0,
        maxWidth: "62ch",
      }}>Shot breakdowns and additional work sent on request — under NDA where projects haven't aired yet.</p>
      <a href="#contact" onClick={(e) => { e.preventDefault(); document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" }); }} style={{
        fontFamily: "var(--jh-font-mono)",
        fontSize: 11,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        color: "var(--jh-amber)",
        borderBottom: "1px solid var(--jh-amber-soft)",
        paddingBottom: 2,
      }}>START A PROJECT →</a>
    </div>
  </SectionWrap>
);
window.WorkSection = WorkSection;