const MEDIA_FRAMES = [
  { w: 220, ratio: "4/5", tone: "warm", cap: "lake street, rain — hp5, frame 03", note: "Neon in the puddles, the bus late again.", track: "Blood Orange — Charcoal Baby" },
  { w: 300, ratio: "16/9", tone: "cool", video: true, dur: "0:48", cap: "studio session — digital, cut 02", note: "A chorus recorded in one take, kept the room noise.", track: "Mk.gee — Are You Looking Up" },
  { w: 180, ratio: "4/5", tone: "sienna", cap: "the studio, late afternoon — tri-x, frame 07, minneapolis", note: "The hour the desk turns gold and nothing gets done.", track: "Alex G — Runner" },
  { w: 320, ratio: "3/2", tone: "ink", cap: "kitchen window — portra, frame 21", note: "Dust in the light, coffee going cold.", track: "Sade — Cherish the Day" },
  { w: 200, ratio: "4/5", tone: "rose", cap: "her, mid-sentence — tri-x, frame 12", note: "The one where she looks away and laughs.", track: "Frank Ocean — Ivy" },
  { w: 280, ratio: "1/1", tone: "cool", video: true, dur: "1:22", cap: "lake walk, february — digital, cut 05", note: "Ice along the shore, breath held for the shot.", track: "Nilüfer Yanya — Stabilise" },
  { w: 240, ratio: "4/5", tone: "pine", cap: "station platform — hp5, frame 09", note: "Waiting, half-lit, everyone somewhere else.", track: "Alex G — Runner" },
  { w: 190, ratio: "4/5", tone: "warm", cap: "back porch, dusk — gold, frame 33", note: "Last light bleeding through the screen door.", track: "Mk.gee — Rockman" },
];

function MediaWip() {
  return (
    <section id="media" className="section" style={{ background: "var(--paper-bright)" }}>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
        <div>
          <Kicker>— Photographs &amp; video edits</Kicker>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(3rem,8vw,6.5rem)",
            lineHeight: 0.9, letterSpacing: "-0.03em", color: "var(--ink)", margin: "8px 0 0" }}>Media</h2>
        </div>
        <p style={{ textAlign: "right", maxWidth: 320, fontFamily: "var(--font-body)", fontSize: "clamp(1rem,1.2vw,1.15rem)",
          lineHeight: 1.5, color: "var(--ink-2)", margin: 0 }}>Rolls in the tank, edits on the timeline.</p>
      </div>
      <WipPanel
        title="The darkroom isn't open yet."
        note="I'm still scanning rolls and cutting the first edits. Each frame will arrive with its camera, the light it was shot in, and the song it was made to."
        items={["Film scans — Minneapolis, winter", "Two video edits in the cut", "Camera + light notes per frame", "Full gallery view"]}
      />
    </section>
  );
}

function Media({ onGallery }) {
  const [active, setActive] = React.useState(2);
  if (SHOW_WIP) return <MediaWip />;
  const frame = MEDIA_FRAMES[active];
  const num = String(active + 1).padStart(2, "0");

  return (
    <section id="media" className="section" style={{ background: "var(--paper-bright)" }}>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
        <div>
          <Kicker>— Photographs &amp; video edits</Kicker>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(3rem,8vw,6.5rem)",
            lineHeight: 0.9, letterSpacing: "-0.03em", color: "var(--ink)", margin: "8px 0 0" }}>Media</h2>
        </div>
        <div style={{ textAlign: "right", maxWidth: 320 }}>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1rem,1.2vw,1.15rem)", lineHeight: 1.5,
            color: "var(--ink-2)", margin: 0 }}>Tap a frame for my notes, the camera and the song.</p>
          <div style={{ fontFamily: "var(--font-annotation)", fontSize: 20, color: "var(--vermilion)",
            marginTop: 8, transform: "rotate(-2deg)" }}>← drag me →</div>
        </div>
      </div>

      <Reveal style={{ marginTop: "clamp(32px,4vw,52px)" }}>
        <div className="filmstrip" style={{ display: "flex", alignItems: "flex-start", gap: 14, overflowX: "auto", paddingBottom: 14 }}>
          {MEDIA_FRAMES.map((f, i) => (
            <div key={i} onClick={() => setActive(i)}
              style={{ flex: `0 0 ${f.w}px`, width: f.w, scrollSnapAlign: "center", cursor: "pointer",
                outline: active === i ? "1.5px solid var(--vermilion)" : "none", outlineOffset: 3,
                opacity: active === i ? 1 : 0.72, transition: "opacity 320ms var(--ease-soft)" }}>
              <Plate ratio={f.ratio} tone={f.tone} frame={`0${i + 1}`} video={f.video} dur={f.dur} />
            </div>
          ))}
        </div>
      </Reveal>

      <div className="cols cols--media" style={{ marginTop: "clamp(32px,4vw,52px)" }}>
        <div>
          <Micro size={10} color="var(--vermilion)">({num})</Micro>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(1.5rem,3vw,2.4rem)",
            lineHeight: 1.05, letterSpacing: "-0.02em", color: "var(--ink)", marginTop: 10 }}>{frame.cap}</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(0.95rem,1.1vw,1.05rem)", lineHeight: 1.5,
            color: "var(--ink-3)", margin: "14px 0 0", maxWidth: "46ch" }}>{frame.note}</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <Pictograph kind="vinyl" size={20} color="var(--ink-3)" />
            <span style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{frame.track}</span>
          </div>
          <Micro size={9} color="var(--ink-4)">{num} / 08</Micro>
          <ArrowLink onClick={onGallery}>Full gallery</ArrowLink>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Media });