// Project section renderers

function BlockHead({ no, title, meta, id }) {
  return (
    <div className="block-head" id={id ? `${id}_head` : undefined}>
      <span className="bh-no">§ {no}</span>
      <span className="bh-title">{title}</span>
      <span className="bh-meta">{meta}</span>
    </div>
  );
}

function ProjMeta({ no, year, type, ed }) {
  return (
    <div className="proj-meta">
      <span className="pm-no">§ {no}</span>
      <span className="pm-year">{year}</span>
      <span className="pm-type">{type}</span>
      {ed && <span className="pm-type" style={{ color: "#3A3A3A" }}>{ed}</span>}
    </div>
  );
}

function ProjCaption({ k, mid, r }) {
  return (
    <div className="proj-caption">
      <span className="pc-k">{k}</span>
      <span>{mid}</span>
      <span className="pc-r">{r}</span>
    </div>
  );
}

function ProjectKafa({ onCursor }) {
  return (
    <section className="proj" id="kafa" data-screen-label="Kafa Kağıdı">
      <ProjMeta no="001" year="2024" type="SCREEN PRINT · POSTER" ed="ED. 25" />
      <div className="proj-body">
        <h3 className="proj-title">Kafa Kağıdı <span className="pt-badge">SCREEN PRINT</span></h3>
        <p className="proj-sub">
          A series of four screen-printed posters that treat the Turkish ID card as a bureaucratic zine — scanned, scaled, overprinted. Pulled by hand on 300gsm Munken in a run of 25.
        </p>
        <div className="grid-2-uneven">
          <MediaPlaceholder kind="image" ratio="4x5" hud="PL. 01" hudR="4-COLOR" fn={["kafa_01_front.tif", "2480×3508"]} label="Poster 01 — front" onCursor={onCursor} />
          <div style={{ display: "grid", gap: "var(--gutter)" }}>
            <MediaPlaceholder kind="image" ratio="1" hud="PL. 02" fn={["kafa_02.tif", "A3"]} label="Poster 02 — detail" onCursor={onCursor} />
            <MediaPlaceholder kind="image" ratio="1" hud="PL. 03" fn={["kafa_03.tif", "A3"]} label="Poster 03 — detail" onCursor={onCursor} />
          </div>
        </div>
        <ProjCaption k="FORMAT — A2 / 420×594" mid="MUNKEN PURE 300G · FLUORESCENT RED + BLACK" r="2024" />
      </div>
    </section>
  );
}

function ProjectVisionboard({ onCursor }) {
  return (
    <section className="proj" id="vision" data-screen-label="VISIONBOARD 2099">
      <ProjMeta no="002" year="2024" type="BRAND · PRINT" />
      <div className="proj-body">
        <h3 className="proj-title">VISIONBOARD 2099 <span className="pt-badge">BRAND</span></h3>
        <p className="proj-sub">
          Speculative identity for a fictional retrofuturist magazine. Masthead, cover studies, a typographic manifesto, and a short motion teaser.
        </p>
        <div className="grid-full-r">
          <MediaPlaceholder kind="video" ratio="16x9" hud="REEL 01" hudR="LOOP" fn={["vb2099_teaser.mov", "00:24 · 1080p"]} label="Teaser — motion identity" onCursor={onCursor} />
        </div>
        <div className="grid-3">
          <MediaPlaceholder kind="image" ratio="3x4" hud="CVR 01" fn={["cover_01.tif"]} label="Cover — issue 01" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="3x4" hud="CVR 02" fn={["cover_02.tif"]} label="Cover — issue 02" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="3x4" hud="CVR 03" fn={["cover_03.tif"]} label="Cover — issue 03" onCursor={onCursor} />
        </div>
        <ProjCaption k="DELIVERABLES — 12" mid="MASTHEAD · COVER × 3 · POSTER × 4 · MOTION · TYPE SPEC" r="SYSTEM" />
      </div>
    </section>
  );
}

function ProjectSheep({ onCursor }) {
  return (
    <section className="proj" id="sheep" data-screen-label="SHEEP FEST">
      <ProjMeta no="003" year="2023" type="POSTER SERIES · 1 COLOR" ed="ED. 60 EA." />
      <div className="proj-body">
        <h3 className="proj-title">SHEEP FEST</h3>
        <p className="proj-sub">
          Three-poster run for a small-venue festival in Ankara. Single red over black, hand-lettered, with a flat halftone illustration per night.
        </p>
        <div className="grid-3">
          <MediaPlaceholder kind="image" ratio="2x3" hud="N.01" fn={["sheep_n1.tif"]} label="Night 01 poster" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="2x3" hud="N.02" fn={["sheep_n2.tif"]} label="Night 02 poster" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="2x3" hud="N.03" fn={["sheep_n3.tif"]} label="Night 03 poster" onCursor={onCursor} />
        </div>
        <ProjCaption k="3 POSTERS · 3 NIGHTS" mid="BADA BING — ANKARA · 14–16.07.23" r="SELECTED — POSTERHOUSE NYC" />
      </div>
    </section>
  );
}

function ProjectWakeUp({ onCursor }) {
  return (
    <section className="proj" id="wake" data-screen-label="WAKE UP">
      <ProjMeta no="004" year="2023" type="ALBUM ART · VIDEO" />
      <div className="proj-body">
        <h3 className="proj-title">WAKE UP — HELLA <span className="pt-badge">ALBUM</span></h3>
        <p className="proj-sub">
          Full artwork package for HELLA's debut LP — gatefold cover, inner sleeve, label art, and a 60-second motion teaser cut to the lead single. 500 copies pressed on black vinyl.
        </p>
        <div className="grid-2">
          <MediaPlaceholder kind="image" ratio="1" hud="LP A" hudR="GATEFOLD" fn={["wakeup_front.tif", "12″"]} label="Cover — front" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="LP B" fn={["wakeup_back.tif", "12″"]} label="Cover — back" onCursor={onCursor} />
        </div>
        <div className="detail-row">
          <div className="dr-text">
            <h4>Tracklist A/B</h4>
            <ul>
              <li>A1. long way out — 04:12</li>
              <li>A2. wake up — 03:48</li>
              <li>A3. saline drip — 05:02</li>
              <li>A4. afiyet — 02:38</li>
              <li>B1. no signal — 06:11</li>
              <li>B2. pale hotel — 04:45</li>
              <li>B3. the fade — 08:24</li>
            </ul>
          </div>
          <div style={{ display: "grid", gap: 14 }}>
            <AudioPlayer title="hella_—_wake_up_A2.wav" meta="WAV · 44.1k · 03:48" dur="3:48" seed={2} />
            <AudioPlayer title="hella_—_saline_drip_A3.wav" meta="WAV · 44.1k · 05:02" dur="5:02" seed={7} />
            <MediaPlaceholder kind="video" ratio="16x9" hud="TEASER" fn={["wakeup_teaser.mov", "00:60 · 1080p"]} label="Music video — single cut" onCursor={onCursor} />
          </div>
        </div>
        <ProjCaption k="500 COPIES · BLACK VINYL" mid="PRESSED AT MIHRAP RECORDS · ISTANBUL" r="FEATURED — IT'S NICE THAT" />
      </div>
    </section>
  );
}

function ProjectBilkent({ onCursor }) {
  return (
    <section className="proj" id="bilkent" data-screen-label="Bilkent Center 1998">
      <ProjMeta no="005" year="2023" type="SCREEN PRINT · ZINE" ed="ED. 40" />
      <div className="proj-body">
        <h3 className="proj-title">Bilkent Center 1998 <span className="pt-badge">PERSONAL</span></h3>
        <p className="proj-sub">
          Eleven pieces reconstructing a childhood shopping mall from memory — each poster is dated by the receipt it references. A small risograph zine ties the series into a reader.
        </p>
        <div className="grid-2">
          <MediaPlaceholder kind="image" ratio="4x5" hud="P. 01" hudR="1998.04.12" fn={["bilkent_01.tif"]} label="Food court — recalled" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="4x5" hud="P. 02" hudR="1998.11.03" fn={["bilkent_02.tif"]} label="Escalator bank" onCursor={onCursor} />
        </div>
        <div className="grid-3">
          <MediaPlaceholder kind="image" ratio="1" hud="P. 03" fn={["bilkent_03.tif"]} label="Cinema corridor" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="P. 04" fn={["bilkent_04.tif"]} label="Arcade — first floor" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="ZINE" hudR="A5" fn={["bilkent_zine.tif"]} label="Zine — cover" onCursor={onCursor} />
        </div>
        <ProjCaption k="11 POSTERS + 1 ZINE · A3 / A5" mid="RISOGRAPH · TORTÜR PRINTHOUSE" r="PERSONAL · SERIES" />
      </div>
    </section>
  );
}

function ProjectSatan({ onCursor }) {
  return (
    <section className="proj" id="satan" data-screen-label="SATAN">
      <ProjMeta no="006" year="2022" type="POSTER · 1 COLOR" ed="ED. 80" />
      <div className="proj-body">
        <h3 className="proj-title">SATAN</h3>
        <p className="proj-sub">
          One-off tour poster for an Istanbul doom outfit. Fluorescent red on uncoated black. Type hand-cut and scanned for screen separation.
        </p>
        <div className="grid-2-uneven">
          <MediaPlaceholder kind="image" ratio="2x3" hud="TOUR POSTER" hudR="ED. 80" fn={["satan_01.tif", "A2"]} label="Full poster" onCursor={onCursor} />
          <div style={{ display: "grid", gap: "var(--gutter)" }}>
            <MediaPlaceholder kind="image" ratio="4x5" hud="DET. 01" fn={["satan_type.tif"]} label="Type detail" onCursor={onCursor} />
            <AudioPlayer title="satan_—_tour_intro.wav" meta="WAV · 01:48" dur="1:48" seed={13} />
          </div>
        </div>
        <ProjCaption k="A2 · FLUO RED + BLACK" mid="BANDROOM COLLECTIVE · 09.11.23" r="1 NIGHT · 4 CITIES" />
      </div>
    </section>
  );
}

function ProjectGurkan({ onCursor }) {
  return (
    <section className="proj" id="gurkan" data-screen-label="w/ Gürkan Gürler">
      <ProjMeta no="007" year="2024" type="COLLAB · SCREEN PRINT" />
      <div className="proj-body">
        <h3 className="proj-title">w/ Gürkan Gürler <span className="pt-badge">COLLAB</span></h3>
        <p className="proj-sub">
          Ongoing print series with illustrator Gürkan Gürler. We exchange layers — one draws, one separates, one prints. Six episodes and counting.
        </p>
        <div className="grid-3">
          <MediaPlaceholder kind="image" ratio="1" hud="EP. 01" fn={["gg_ep1.tif"]} label="Episode 01" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="EP. 02" fn={["gg_ep2.tif"]} label="Episode 02" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="EP. 03" fn={["gg_ep3.tif"]} label="Episode 03" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="EP. 04" fn={["gg_ep4.tif"]} label="Episode 04" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="EP. 05" fn={["gg_ep5.tif"]} label="Episode 05" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="EP. 06" hudR="LATEST" fn={["gg_ep6.tif"]} label="Episode 06" onCursor={onCursor} />
        </div>
        <ProjCaption k="6 EPISODES · ONGOING" mid="TRADE — LAYER-BY-LAYER · TORTÜR PRINTHOUSE" r="w/ @gurkangurler" />
      </div>
    </section>
  );
}

function ProjectAfiyet({ onCursor }) {
  return (
    <section className="proj" id="afiyet" data-screen-label="AFİYET OLSUN">
      <ProjMeta no="008" year="2023" type="BRAND · MENU · VIDEO" />
      <div className="proj-body">
        <h3 className="proj-title">AFİYET OLSUN <span className="pt-badge">BRAND</span></h3>
        <p className="proj-sub">
          Identity for a takeaway concept — meze culture reframed through receipt-paper ephemera. Menus, bags, stickers, and a 60-second motion reel that prints on every receipt.
        </p>
        <div className="grid-2">
          <MediaPlaceholder kind="image" ratio="1" hud="BAG" fn={["afiyet_bag.tif"]} label="Takeaway bag" onCursor={onCursor} />
          <MediaPlaceholder kind="image" ratio="1" hud="MENU" hudR="THERMAL" fn={["afiyet_menu.tif"]} label="Menu — thermal print" onCursor={onCursor} />
        </div>
        <div className="grid-full-r">
          <MediaPlaceholder kind="video" ratio="16x9" hud="REEL" fn={["afiyet_loop.mov", "00:60 · loop"]} label="Motion reel — identity loop" onCursor={onCursor} />
        </div>
        <ProjCaption k="14 TOUCHPOINTS" mid="PRIMARY — THERMAL PRINT + RISO" r="OPENED 06.2023 · ANKARA" />
      </div>
    </section>
  );
}

// Digital Works - compact grid style
function DigitalWorksBlock({ onCursor }) {
  const items = [
    { no: "D.01", slug: "reddeath", title: "Red Death", type: "POSTER · DIGITAL", year: "2024" },
    { no: "D.02", slug: "yuzyil", title: "100 YIL", type: "TYPE · EDITORIAL", year: "2023" },
    { no: "D.03", slug: "bandcollabs", title: "Band Collabs", type: "SERIES · POSTER", year: "2022–" },
    { no: "D.04", slug: "ktulu", title: "Ktulu Tee", type: "APPAREL · DIGITAL", year: "2023" },
    { no: "D.05", slug: "logos", title: "Hand-drawn Logos", type: "ARCHIVE", year: "2019–" },
  ];
  return (
    <section className="block" id="digital" data-screen-label="Digital Works">
      <BlockHead no="D" title="DIGITAL WORKS" meta="2019 — ONGOING" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "calc(var(--gutter) * 1.6)" }}>
        {items.map((it, i) => (
          <article key={it.slug} id={"d_" + it.slug} data-screen-label={it.title} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <MediaPlaceholder
              kind={it.slug === "bandcollabs" ? "video" : "image"}
              ratio={i % 2 === 0 ? "4x5" : "1"}
              hud={it.no}
              hudR={it.year}
              fn={[`${it.slug}.tif`, ""]}
              label={it.title}
              onCursor={onCursor}
            />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", fontSize: 11 }}>
              <span style={{ color: "var(--fg)", letterSpacing: "0.02em", fontSize: 14 }}>{it.title}</span>
              <span style={{ color: "var(--fg-dim)", letterSpacing: "0.14em", fontSize: 10 }}>{it.type}</span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, {
  BlockHead, ProjMeta, ProjCaption,
  ProjectKafa, ProjectVisionboard, ProjectSheep, ProjectWakeUp,
  ProjectBilkent, ProjectSatan, ProjectGurkan, ProjectAfiyet,
  DigitalWorksBlock,
});