// Work tiles — compact image-first grid with caption footers.

function WorkTile({
  no,
  name,
  project,
  year,
  note,
  kind = "image",
  ratio = "1",
  mockup = false,
  hudR,
  asset,
  onCursor,
}) {
  return (
    <figure className="wt">
      <MediaPlaceholder
        kind={kind}
        ratio={ratio}
        hud={no}
        hudR={mockup ? "MOCKUP" : hudR}
        fn={[`${(name || "untitled").toLowerCase().replace(/\s+/g, "_")}.tif`, ""]}
        label={name}
        asset={asset}
        onCursor={onCursor}
      />
      <figcaption className="wt-cap">
        <span className="wt-name">{name}</span>
        {project && <span className="wt-proj">{project}</span>}
        <span className="wt-year">{year}</span>
        {note && <span className="wt-note">{note}</span>}
      </figcaption>
    </figure>
  );
}

// A sub-section under "Selected Works"
function WorkSubsection({ tag, title, count, children, cols }) {
  const gridCls = cols ? `ws-grid ws-grid-${cols}` : "ws-grid";
  return (
    <div className="ws" id={`sub-${tag.toLowerCase().replace(/\s+/g, "-")}`}>
      <div className="ws-head">
        <span className="ws-tag">§ {tag}</span>
        <span className="ws-title">{title}</span>
        <span className="ws-count">{count} {count === 1 ? "piece" : "pieces"}</span>
      </div>
      <div className={gridCls}>{children}</div>
    </div>
  );
}

/* --- SELECTED WORKS blocks --- */

function LogosGrid() {
  return (
    <WorkSubsection tag="L" title="LOGOS & MARKS" count={1}>
      <div className="ws-full">
        <WorkTile
          no="L.01"
          name="Logo wall — selected marks"
          project="Band & project identities · 2019 —"
          year="archive"
          ratio="16x9"
          asset="assets/logo_wall.jpeg"
          note="hand-drawn · doom / metal / film / editorial"
        />
      </div>
    </WorkSubsection>
  );
}

function PostersGrid() {
  return (
    <WorkSubsection tag="P" title="POSTERS" count={1} cols={3}>
      <WorkTile
        no="P.01"
        name="100. Yıl — Türkiye Cumhuriyeti"
        project="Personal poster · anniversary of the Turkish Republic"
        year="2023"
        ratio="2x3"
        asset="assets/tr100_poster.jpeg"
        note="diagonal weave · crescent & star"
      />
    </WorkSubsection>
  );
}

function AlbumsGrid() { return null; }

function PrintsGrid() {
  return (
    <WorkSubsection tag="S" title="SCREEN PRINTS" count={2} cols={2}>
      <WorkTile
        no="S.01"
        name="WAKE UP"
        project="2-color screen print · duotone photo collage"
        year="2024"
        ratio="3x2"
        asset="assets/print_wakeup.jpeg"
        note="magenta / purple · hand-pulled edition"
      />
      <WorkTile
        no="S.02"
        name="Bilkent Center — 1998"
        project="4-color CMYK halftone · personal series"
        year="2023"
        ratio="3x2"
        asset="assets/print_bilkent.jpeg"
        note="registration marks left as-printed"
      />
    </WorkSubsection>
  );
}

function MerchGrid() {
  const items = [
    { no: "M.01", name: "Anadolu Doom — Flag", project: "ANADOLU DOOM", year: "2024", ratio: "4x5", asset: "assets/anadolu_doom_flag.png" },
    { no: "M.02", name: "Anadolu Doom — Mugs", project: "ANADOLU DOOM", year: "2024", ratio: "1", asset: "assets/anadolu_doom_mug.png" },
    { no: "M.03", name: "Anadolu Doom — Dad Cap", project: "ANADOLU DOOM", year: "2024", ratio: "4x5", asset: "assets/anadolu_doom_cap.png" },
  ];
  return (
    <>
      <WorkSubsection tag="M" title="MERCH — ANADOLU DOOM" count={items.length} cols={2}>
        {items.map((it, i) => (
          <WorkTile key={i} {...it} />
        ))}
      </WorkSubsection>

      <WorkSubsection tag="M2" title="MERCH — ASTROID × PALE CIRCUS" count={2} cols={2}>
        <WorkTile
          no="M2.01"
          name="Astroid × Pale Circus — Tee (back)"
          project="CONCERT CONCEPT"
          year="2024"
          ratio="3x2"
          asset="assets/astrocircus_tee_back.webp"
        />
        <WorkTile
          no="M2.02"
          name="Astroid × Pale Circus — Tee (front)"
          project="CONCERT CONCEPT"
          year="2024"
          ratio="3x2"
          asset="assets/astrocircus_tee_front.webp"
        />
      </WorkSubsection>

      <WorkSubsection tag="PC" title="PALE CIRCUS" count={2} cols={2}>
        <WorkTile no="PC.01" name=" " year=" " ratio="1" asset="assets/pale_circus_1.webp" />
        <WorkTile no="PC.02" name=" " year=" " ratio="1" asset="assets/pale_circus_2.webp" />
      </WorkSubsection>
    </>
  );
}

function FilmBlock({ onCursor }) {
  const videoRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [muted, setMuted] = React.useState(true);

  const toggle = () => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.muted = muted;
      v.play().then(() => setPlaying(true)).catch(() => {});
    } else {
      v.pause();
      setPlaying(false);
    }
  };

  const toggleMute = (e) => {
    e.stopPropagation();
    const v = videoRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
  };

  return (
    <WorkSubsection tag="F" title="FILM / VIDEO" count={1}>
      <div className="ws-full">
        <figure className="wt">
          <div
            className={`rr-player rr-player--16x9${playing ? " is-play" : ""}`}
            onClick={toggle}
            onMouseEnter={() => onCursor && onCursor(true)}
            onMouseLeave={() => onCursor && onCursor(false)}
          >
            <video
              ref={videoRef}
              src="assets/paketciler_doc.mp4"
              playsInline
              onEnded={() => setPlaying(false)}
              onPause={() => setPlaying(false)}
              onPlay={() => setPlaying(true)}
            />
            <div className="rr-overlay">
              <button className="rr-play" aria-label={playing ? "pause" : "play"}>
                {playing ? "■" : "▶"}
              </button>
              <div className="rr-hint">
                {playing ? "NOW PLAYING" : "CLICK TO PLAY"}
              </div>
              <button className="rr-mute" onClick={toggleMute} aria-label="mute">
                {muted ? "♪ MUTED" : "♪ SOUND ON"}
              </button>
            </div>
          </div>
          <figcaption className="wt-cap">
            <span className="wt-name">PAKETÇİLER</span>
            <span className="wt-proj">Short documentary · dir. Arda Başaran</span>
            <span className="wt-year">2024</span>
            <span className="wt-note">Turkish w/ Eng subs · poster + titles designed in-house</span>
          </figcaption>
        </figure>
      </div>
    </WorkSubsection>
  );
}

function RitualBlock({ onCursor }) {
  const videoRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [muted, setMuted] = React.useState(false);

  const toggle = () => {
    const v = videoRef.current;
    if (!v) return;
    if (v.paused) {
      v.muted = muted;
      v.play().then(() => setPlaying(true)).catch(() => {});
    } else {
      v.pause();
      setPlaying(false);
    }
  };

  const toggleMute = (e) => {
    e.stopPropagation();
    const v = videoRef.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
  };

  const screens = [
    { src: "assets/ritual_01.png", cap: "TITLE SCREEN",   sub: "160×144 · 4-tone palette" },
    { src: "assets/ritual_02.png", cap: "OPTIONS · STARTUP STYLE", sub: "MUSIC VOL · VFX VOL · BRIGHTNESS" },
    { src: "assets/ritual_03.png", cap: "GAMEPLAY / INVENTORY",    sub: "HUD · TIMER · ITEM BAR" },
  ];

  return (
    <WorkSubsection tag="G" title="GAME UI STUDY — RITUAL" count={4}>
      <div className="ritual-wrap">
        <div className="ritual-triptych">
          {screens.map((s, i) => (
            <figure key={i} className="pixel-screen">
              <div className="ps-frame">
                <img src={s.src} alt={s.cap} />
                <div className="ps-scan" />
              </div>
              <figcaption className="ps-cap">
                <span className="ps-no">G.0{i + 1}</span>
                <span className="ps-name">{s.cap}</span>
              </figcaption>
            </figure>
          ))}
        </div>

        <div className="ritual-row">
          <div className="ritual-brief">
            <div className="rb-lead">
              <span className="rb-tag">● CONCEPT — GAME UI / SOUND</span>
              <span className="rb-year">2024</span>
            </div>
            <h4 className="rb-title">RITUAL</h4>
            <p className="rb-p">
              A personal concept at Game Boy Color resolution (160×144). Title, options and gameplay screens drawn pixel-by-pixel — plus a short credits sequence with an <b style={{ color: "var(--red)" }}>original score</b> composed by the artist.
            </p>
            <p className="rb-p dim">
              Play with sound on — the music is the piece.
            </p>
          </div>

          <div
            className={`rr-player${playing ? " is-play" : ""}`}
            onClick={toggle}
            onMouseEnter={() => onCursor && onCursor(true)}
            onMouseLeave={() => onCursor && onCursor(false)}
          >
            <video
              ref={videoRef}
              src="assets/ritual_credits.mp4"
              playsInline
              onEnded={() => setPlaying(false)}
              onPause={() => setPlaying(false)}
              onPlay={() => setPlaying(true)}
            />

            <div className="rr-overlay">
              <button className="rr-play" aria-label={playing ? "pause" : "play"}>
                {playing ? "■" : "▶"}
              </button>
              <div className="rr-hint">
                {playing ? "NOW PLAYING — WITH SOUND" : "CLICK TO PLAY · SOUND ON"}
              </div>
              <button className="rr-mute" onClick={toggleMute} aria-label="mute">
                {muted ? "♪ MUTED" : "♪ SOUND ON"}
              </button>
            </div>

            <div className="rr-ticks">
              {Array.from({ length: 24 }).map((_, i) => <span key={i} />)}
            </div>
          </div>
        </div>
      </div>
    </WorkSubsection>
  );
}

function SelectedWorks({ onCursor }) {
  return (
    <section className="block" id="works_hdr" data-screen-label="Selected Works">
      <BlockHead no="06" title="SELECTED WORKS" meta="2022 — 2025" />
      <LogosGrid />
      <PostersGrid />
      <PrintsGrid />
      <MerchGrid />
      <FilmBlock onCursor={onCursor} />
      <RitualBlock onCursor={onCursor} />
    </section>
  );
}

/* --- HAYALETLER (dedicated band collection) --- */

function HayaletlerBlock({ onCursor }) {
  const albums = [
    { name: " ", year: " ", ratio: "1", asset: "assets/hayaletler_rec_1.webp" },
    { name: " ", year: " ", ratio: "1", asset: "assets/hayaletler_rec_2.webp" },
    { name: " ", year: " ", ratio: "1", asset: "assets/hayaletler_rec_3.webp" },
    { name: " ", year: " ", ratio: "1", asset: "assets/hayaletler_rec_4.webp" },
    { name: " ", year: " ", ratio: "1", asset: "assets/hayaletler_rec_5.webp" },
  ];

  const merch = [
    { name: "Balık tee — back print", year: "2024", ratio: "3x2", asset: "assets/hayaletler_balik_tee_back.webp" },
    { name: "Balık tee — front", year: "2024", ratio: "3x2", asset: "assets/hayaletler_balik_tee_front.webp" },
    { name: "Script logo tee", year: "2024", ratio: "3x2", asset: "assets/hayaletler_logo_tee.webp" },
    { name: "Woven scarf — full print", year: "2024", ratio: "16x9", asset: "assets/hayaletler_scarf.png" },
  ];

  return (
    <section className="block" id="hayaletler" data-screen-label="Works for HAYALETLER">
      <BlockHead no="04" title="WORKS FOR HAYALETLER" meta="BAND · 2022 — 2025" />

      <div className="hl-intro">
        <div className="hl-mark hl-mark--logo">
          <div className="hl-mark-logo">
            <img className="logo-dark" src="assets/hayaletler_logo_dark.svg" alt="HAYALETLER" />
            <img className="logo-light" src="assets/hayaletler_logo_light.svg" alt="HAYALETLER" />
          </div>
        </div>
        <div className="hl-copy">
          <p>
            <b style={{ color: "var(--fg)", fontWeight: 500 }}>HAYALETLER</b> — an alt rock band. The artist is responsible for their visual identity, album artworks and logo design.
          </p>
        </div>
      </div>

      <WorkSubsection tag="HL.A" title="ALBUM ARTWORKS" count={albums.length} cols={2}>
        {albums.map((it, i) => (
          <WorkTile key={i} no={`HL.A.0${i + 1}`} {...it} project="HAYALETLER" />
        ))}
      </WorkSubsection>

      <WorkSubsection tag="HL.M" title="MERCH" count={merch.length} cols={2}>
        {merch.map((it, i) => (
          <WorkTile key={i} no={`HL.M.0${i + 1}`} {...it} project="HAYALETLER" />
        ))}
      </WorkSubsection>
    </section>
  );
}

/* --- CASE STUDIES --- */

function MarblesunCase({ onCursor }) {
  const posters = [
    { name: "MARBLESUN × SÛLFÛR ENSEMBLE", ratio: "4x5", asset: "assets/marblesun_poster_sulfur.jpg", note: "17 Kasım · Kaybedenler Kulübü" },
    { name: "MARBLESUN × RAWBORNE — Tour", ratio: "2x3", asset: "assets/marblesun_poster_rawborne.jpg", note: "Ankara · İzmir · İstanbul" },
    { name: "MARBLESUN — Solo", ratio: "2x3", asset: "assets/marblesun_poster.jpeg", note: "tour poster" },
  ];
  const merch = [
    { name: "KTULU split — Tee (back, green)", ratio: "3x2", asset: "assets/marblesun_ktulu_tee_back_green.webp" },
    { name: "KTULU split — Tee (front, green)", ratio: "3x2", asset: "assets/marblesun_ktulu_tee_front_green.webp" },
    { name: "KTULU split — Tee (back, red)", ratio: "3x2", asset: "assets/marblesun_ktulu_tee_back_red.webp" },
    { name: "KTULU split — Tee (front, red)", ratio: "3x2", asset: "assets/marblesun_ktulu_tee_front_red.webp" },
  ];
  const stickers = [
    { name: "Flower mark — die-cut", ratio: "1", asset: "assets/marblesun_flower_sticker.png" },
    { name: "Wizards — primary sticker", ratio: "3x4", asset: "assets/marblesun_sticker.png", note: "playing-card format" },
  ];

  return (
    <section className="block" id="marblesun" data-screen-label="MARBLESUN">
      <BlockHead no="03" title="MARBLESUN" meta="BAND · FULL GRAPHIC SYSTEM · 2019 —" />

      <div className="hl-intro">
        <div className="hl-mark hl-mark--logo">
          <div className="hl-mark-logo">
            <img className="logo-dark" src="assets/marblesun_logo_dark.svg" alt="MARBLESUN" />
            <img className="logo-light" src="assets/marblesun_logo_light.svg" alt="MARBLESUN" />
          </div>
        </div>
        <div className="hl-copy">
          <p>
            <b style={{ color: "var(--fg)", fontWeight: 500 }}>MARBLESUN</b> — the artist plays drums and writes the songs for the band, and designs everything it looks like: logo and marks, record covers, tour posters, merch, stickers, and packaging.
          </p>
        </div>
      </div>

      <WorkSubsection tag="MS.P" title="POSTERS" count={posters.length} cols={2}>
        {posters.map((it, i) => (
          <WorkTile key={i} no={`MS.P.0${i + 1}`} {...it} project="MARBLESUN" onCursor={onCursor} />
        ))}
      </WorkSubsection>

      <WorkSubsection tag="MS.M" title="MERCH" count={merch.length} cols={2}>
        {merch.map((it, i) => (
          <WorkTile key={i} no={`MS.M.0${i + 1}`} {...it} project="MARBLESUN" onCursor={onCursor} />
        ))}
      </WorkSubsection>

      <WorkSubsection tag="MS.PK" title="MERCH PACKAGING" count={2} cols={2}>
        <WorkTile
          no="MS.PK.01"
          name="Kraft pack — tentacle print"
          project="MARBLESUN"
          ratio="3x4"
          asset="assets/marblesun_bag_1.jpg"
          note="1-color screen on kraft"
          onCursor={onCursor}
        />
        <WorkTile
          no="MS.PK.02"
          name="Pack detail — 'heavy music since 2019'"
          project="MARBLESUN"
          ratio="3x4"
          asset="assets/marblesun_bag_2.jpg"
          note="base seam tagline"
          onCursor={onCursor}
        />
      </WorkSubsection>

      <WorkSubsection tag="MS.S" title="STICKERS" count={stickers.length} cols={3}>
        {stickers.map((it, i) => (
          <WorkTile key={i} no={`MS.S.0${i + 1}`} {...it} project="MARBLESUN" onCursor={onCursor} />
        ))}
      </WorkSubsection>

      <WorkSubsection tag="MS.B" title="PINS / BUTTONS" count={1}>
        <div className="ws-full">
          <WorkTile
            no="MS.B.01"
            name="Pin set — wordmark + sigil"
            project="MARBLESUN"
            ratio="16x9"
            asset="assets/marblesun_pin.png"
            note="38mm · 3 designs"
            onCursor={onCursor}
          />
        </div>
      </WorkSubsection>
    </section>
  );
}

/* --- TORTÜR PRINTHOUSE --- */

function TorturBlock({ onCursor }) {
  const stickers = [
    { name: "Primary lockup — black", year: "2024", ratio: "2x3", asset: "assets/tortur_sticker_black.png", note: "die-cut · red on black" },
    { name: "Primary lockup — white", year: "2024", ratio: "2x3", asset: "assets/tortur_sticker_white.png", note: "die-cut · red on white" },
    { name: "Wordmark — AYRANCI / ANKARA", year: "2024", ratio: "1", asset: "assets/tortur_sticker_og.png", note: "shop locator slap" },
  ];

  return (
    <section className="block" id="tortur" data-screen-label="TORTÜR PRINTHOUSE">
      <BlockHead no="01" title="TORTÜR PRINTHOUSE" meta="STUDIO · 2025 —" />

      <figure className="tp-header">
        <img src="assets/tortur_pencere.png" alt="TORTÜR shopfront — Çankaya, Ankara" />
        <figcaption>
          <span className="tp-header-tag">TP.HDR</span>
          <span className="tp-header-title">Shopfront — Çankaya, Ankara</span>
          <span className="tp-header-meta">2025 · Photograph</span>
        </figcaption>
      </figure>

      <div className="hl-intro">
        <div className="hl-mark hl-mark--logo">
          <div className="hl-mark-logo">
            <img src="assets/tortur_logo.svg" alt="TORTÜR PRINTHOUSE" />
          </div>
        </div>
        <div className="hl-copy">
          <p>
            <b style={{ color: "var(--fg)", fontWeight: 500 }}>TORTÜR PRINTHOUSE</b> — a collaborative screen-print studio in Çankaya, Ankara. Co-founded in early 2025. Editions, merch, artist collaborations, and a rolling program of sticker drops.
          </p>
          <p className="dim">
            Part workspace, part publishing house. Everything is hand-pulled on-site; editions are small and numbered.
          </p>
        </div>
      </div>

      <div className="ws collab-block">
        <div className="ws-head">
          <span className="ws-tag">§ TP.C1</span>
          <span className="ws-title">ESAT UNDERGROUND × TORTÜR — VISIONBOARD 2099</span>
          <span className="ws-count">2 pieces · 2025</span>
        </div>
        <p className="collab-note">
          A 5×5 grid of vernacular Ankara — rat poison labels, AVM signage, tuned Anadols, Namık stickers, a FARZETKİ tape. Pulled 1-color on heavyweight stock, signed edition.
        </p>
        <div className="ws-grid ws-grid-2">
          <WorkTile
            no="TP.C1.01"
            name="Visionboard 2099 — artwork"
            project="ESAT UNDERGROUND × TORTÜR"
            year="2025"
            ratio="1"
            asset="assets/tortur_esat_design.png"
            note="1-color separation"
            onCursor={onCursor}
          />
          <WorkTile
            no="TP.C1.02"
            name="Visionboard 2099 — print pull"
            project="ESAT UNDERGROUND × TORTÜR"
            year="2025"
            ratio="1"
            asset="assets/tortur_esat_print.png"
            note="signed · numbered"
            onCursor={onCursor}
          />
        </div>
      </div>

      <div className="ws collab-block">
        <div className="ws-head">
          <span className="ws-tag">§ TP.C2</span>
          <span className="ws-title">FATIH KARATEKİN — KAFA KAĞIDI</span>
          <span className="ws-count">2 pieces · 2025</span>
        </div>
        <p className="collab-note">
          CMYK-halftone portrait pulled as a misregistered, layered overprint — identity as interference pattern. Edition of 20.
        </p>
        <div className="ws-grid ws-grid-2">
          <WorkTile
            no="TP.C2.01"
            name="Kafa Kağıdı — artwork"
            project="FATIH KARATEKİN × TORTÜR"
            year="2025"
            ratio="3x4"
            asset="assets/tortur_fatih_design.png"
            note="4-color halftone"
            onCursor={onCursor}
          />
          <WorkTile
            no="TP.C2.02"
            name="Kafa Kağıdı — print pull (1/20)"
            project="FATIH KARATEKİN × TORTÜR"
            year="2025"
            ratio="1"
            asset="assets/tortur_fatih_print.png"
            note="signed · numbered"
            onCursor={onCursor}
          />
        </div>
      </div>

      <WorkSubsection tag="TP.X" title="STICKERS & SLAPS" count={stickers.length} cols={3}>
        {stickers.map((it, i) => (
          <WorkTile key={i} no={`TP.X.0${i + 1}`} {...it} project="TORTÜR" onCursor={onCursor} />
        ))}
      </WorkSubsection>

      <WorkSubsection tag="TP.A" title="STAMPS & CERTIFICATE OF AUTHENTICITY" count={2} cols={2}>
        <WorkTile
          no="TP.A.01"
          name="Shop stamps & test impressions"
          project="TORTÜR"
          year="2025"
          ratio="3x4"
          asset="assets/tortur_stamps.jpeg"
          onCursor={onCursor}
        />
        <WorkTile
          no="TP.A.02"
          name="Certificate of Authenticity — foil print + plate"
          project="TORTÜR"
          year="2025"
          ratio="3x4"
          asset="assets/tortur_certificate.jpeg"
          onCursor={onCursor}
        />
      </WorkSubsection>
    </section>
  );
}

function ShehrinCase({ onCursor }) {
  return (
    <section className="block" id="case_studies" data-screen-label="ŞEHRİN FAÇASI (Case Study)">
      <BlockHead no="02" title="ŞEHRİN FAÇASI — CASE STUDY" meta="GRAD PROJECT · BASE 9. EDİSYON 2025" />
      <CaseStudy onCursor={onCursor} />
    </section>
  );
}

/* --- RED DEATH (film branding case study) --- */

function RedDeathCase({ onCursor }) {
  return (
    <section className="block" id="reddeath" data-screen-label="RED DEATH (Case Study)">
      <BlockHead no="05" title="RED DEATH — CASE STUDY" meta="FILM · BRANDING & VISUAL IDENTITY · 2026" />

      <div className="hl-intro">
        <div className="hl-mark hl-mark--logo">
          <div className="hl-mark-logo" style={{ background: "var(--red)", borderRadius: 6 }}>
            <img src="assets/reddeath_logo_rd.jpeg" alt="RD monogram" style={{ background: "var(--red)" }} />
          </div>
        </div>
        <div className="hl-copy">
          <p>
            <b style={{ color: "var(--fg)", fontWeight: 500 }}>RED DEATH (2026)</b> — a comprehensive visual identity for the feature, ranging from conceptual physical designs to digital platforms. The work includes custom mask designs, typography, and original illustrations for the official posters, plus the official ticket website and a suite of commercial assets.
          </p>
        </div>
      </div>

      <WorkSubsection tag="RD.H" title="KEY ART" count={1}>
        <div className="ws-full">
          <WorkTile
            no="RD.H.01"
            name="Red Death (2026) — key art"
            project="RED DEATH"
            ratio="16x9"
            asset="assets/reddeath_header.jpeg"
            onCursor={onCursor}
          />
        </div>
      </WorkSubsection>

      <WorkSubsection tag="RD.L" title="WORDMARK" count={1}>
        <div className="ws-full">
          <WorkTile
            no="RD.L.01"
            name="Red Death — primary wordmark"
            project="RED DEATH"
            ratio="16x9"
            asset="assets/reddeath_wordmark.png"
            note="custom blackletter lockup"
            onCursor={onCursor}
          />
        </div>
      </WorkSubsection>

      <WorkSubsection tag="RD.M" title="MASK DESIGNS" count={1}>
        <div className="ws-full">
          <WorkTile
            no="RD.M.01"
            name="Mask concept sheet vs. on-set stills"
            project="RED DEATH"
            ratio="16x9"
            asset="assets/reddeath_masks.jpeg"
            note="illustrated concepts · final film stills"
            onCursor={onCursor}
          />
        </div>
      </WorkSubsection>

      <WorkSubsection tag="RD.P" title="POSTERS" count={1}>
        <div className="ws-full">
          <WorkTile
            no="RD.P.01"
            name="First digital collage sketch → final movie poster"
            project="RED DEATH"
            ratio="16x9"
            asset="assets/reddeath_poster.jpeg"
            note="concept to final · stained-glass illustration"
            onCursor={onCursor}
          />
        </div>
      </WorkSubsection>

      <WorkSubsection tag="RD.W" title="TICKET WEBSITE" count={2} cols={2}>
        <WorkTile
          no="RD.W.01"
          name="Tabula Zero — homepage (pixel-grid hero)"
          project="RED DEATH"
          ratio="16x9"
          asset="assets/reddeath_webpage.png"
          note="tabulazero.com · event landing"
          onCursor={onCursor}
        />
        <WorkTile
          no="RD.W.02"
          name="Tabula Zero — events hero variant"
          project="RED DEATH"
          ratio="16x9"
          asset="assets/reddeath_webpage_2.png"
          note="alt hero treatment"
          onCursor={onCursor}
        />
      </WorkSubsection>
    </section>
  );
}

Object.assign(window, {
  WorkTile, WorkSubsection,
  LogosGrid, PostersGrid, AlbumsGrid, PrintsGrid, MerchGrid, FilmBlock, RitualBlock,
  SelectedWorks,
  MarblesunCase, ShehrinCase, RedDeathCase,
  HayaletlerBlock,
  TorturBlock,
});