// Case study long-scroll: ŞEHRİN FAÇASI

function CaseStudy({ onCursor }) {
  const C = window.PORTFOLIO_DATA.CASE;

  return (
    <section className="block case" id={C.slug} data-screen-label="ŞEHRİN FAÇASI (Case Study)">
      <div className="sehrin-header">
        <img src="assets/sehrin_header.png" alt="" />
      </div>
      <div className="case-hero">
        <div className="ch-tag">§ CS.01 — {C.tag}</div>
        <h2 className="ch-title">{C.title}<br /><em>{C.titleIt}</em></h2>
        <p className="ch-sub">{C.sub}</p>
      </div>

      <div className="case-exhibitions">
        <div className="case-exhibition">
          <span className="xh-tag">● FEATURED</span>
          <span className="xh-body">
            Selected for <b>BASE 9. Edisyon</b> — Turkey's leading showcase for graduating artists from design &amp; fine-art faculties. <span style={{ color: "var(--fg-dim)" }}>Şehrin Façası was exhibited and featured on base.ist as part of the 9th edition.</span>
          </span>
          <a className="xh-link" href="https://www.base.ist/eser/sehrin-facasi-face-of-the-city/" target="_blank" rel="noopener">View at BASE ↗</a>
        </div>

        <div className="case-exhibition">
          <span className="xh-tag">● PRESS</span>
          <span className="xh-body">
            Interview in <b>artistryofgood</b> — <span style={{ color: "var(--fg-dim)" }}>production stories from the young artists of BASE 9. Edisyon.</span>
          </span>
          <a className="xh-link" href="https://artistryofgood.com/base-9-edisyon-genc-sanatcilarin-uretim-hikayeleri/" target="_blank" rel="noopener">Read interview ↗</a>
        </div>
      </div>

      <div className="case-deck">
        {C.deck.map(([k, v]) => (
          <div key={k} className="cd-cell">
            <span className="cd-k">{k}</span>
            <span className="cd-v">{v.includes("BEST") ? <><span className="r">●</span> {v}</> : v}</span>
          </div>
        ))}
      </div>

      <SehrinGallery />

      <div style={{ marginTop: 48, padding: "24px 0", borderTop: "1px solid var(--rule-strong)", display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.14em" }}>
        <span>END OF CASE — ŞEHRİN FAÇASI / 2024–25</span>
        <span style={{ color: "var(--red)" }}>↗ REQUEST FULL BOOK PDF</span>
      </div>
    </section>
  );
}

const SEHRIN_WORKS = {
  1: { name: "SANAT APARTMANI",   meta: "NO. 44" },
  2: { name: "GÖRKMEN APARTMANI", meta: "NO. 24" },
  3: { name: "KÖRFEZ APARTMANI",  meta: "NO. 16" },
  4: { name: "MUTLU APARTMANI",   meta: "NO. 29" },
  5: { name: "ÖZLEM APARTMANI",   meta: "NO. 13" },
};

function SehrinFigure({ n, tilt = 0 }) {
  const w = SEHRIN_WORKS[n] || { name: `№ ${n}`, meta: "" };
  return (
    <figure className="sg-fig" style={{ transform: `rotate(${tilt}deg)` }}>
      <img src={`assets/sehrin_0${n}.png`} alt={w.name} />
      <figcaption>
        <span className="sf-no">№ {String(n).padStart(2, "0")} · {w.name}</span>
        <span className="sf-name">{w.meta} · SPRAY + MARKER + SCREENPRINT</span>
      </figcaption>
    </figure>
  );
}

function SehrinText({ tag, h, children }) {
  return (
    <div className="sg-text">
      {tag && <div className="sg-tag">{tag}</div>}
      {h && <h3 className="sg-h">{h}</h3>}
      <div className="sg-body">{children}</div>
    </div>
  );
}

function SehrinProcess() {
  return (
    <div className="sg-process">
      <div className="sg-process-head">
        <span className="sg-tag">§ PROCESS</span>
        <span>2 CLIPS · STUDIO · SILENT · LOOP</span>
      </div>
      <div className="sg-process-grid">
        {["assets/sehrin_process_01.mp4", "assets/sehrin_process_02.mp4"].map((src, i) => (
          <video
            key={i}
            className="sg-vid"
            src={src}
            muted
            loop
            playsInline
            preload="metadata"
            onMouseEnter={(e) => e.currentTarget.play().catch(() => {})}
            onMouseLeave={(e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; }}
            onClick={(e) => { const v = e.currentTarget; v.paused ? v.play() : v.pause(); }}
          />
        ))}
      </div>
    </div>
  );
}

function SehrinGallery() {
  return (
    <div className="sehrin-gal">

      <SehrinText tag="§ I — MANIFESTO" h="A lament for the fading voices of the city.">
        <p>
          <em>“Face of the City”</em> is a body of work concerned with the disappearance of apartment signs. Once, they formed a vital layer of the city’s graphic texture. Now, together with the human traces that clash with their language, they are being erased by urban transformation.
        </p>
      </SehrinText>

      <SehrinFigure n={1} tilt={-0.3} />

      <SehrinText>
        <p>
          These remnants, shaped by time and the street, are fading as new masses of concrete take their place. Often disconnected from the city’s remaining texture, these new structures rise without roots. This project seeks to keep alive the memory of their past, to hold on to what once stood before.
        </p>
        <p className="dim">
          Spray paint, markers, and screen printing — a stencil-based technique — are used to echo the spirit of the street. This series stands as a lament for the fading voices of the city.
        </p>
      </SehrinText>

      <div className="sg-pair">
        <SehrinFigure n={2} tilt={0.3} />
        <SehrinFigure n={3} tilt={-0.2} />
      </div>

      <blockquote className="sg-quote">
        “The façade is both the city’s makeup and its scar.”
        <cite>— artist statement</cite>
      </blockquote>

      <SehrinFigure n={4} tilt={0.25} />

      <SehrinText tag="§ II — ON THE WORD" h="Faça — the city’s skin, and the city’s scar.">
        <p>
          In Turkish slang, <em>“faça”</em> refers to someone’s overall vibe and sharp appearance, which connects directly to the visual skin of the city. When we look at the streets, the graffiti, street art, and layers of colorful posters act as the city’s fashion or makeup, giving these buildings a unique character and a raw, urban charisma.
        </p>
        <p>
          However, in Turkish, the wordplay goes deeper because <em>“faça”</em> also refers to razor cuts or scars on the skin, often associated with a rough street history. This means the graffiti and torn posters are more than just decorations — they are the scars of the city. Writing on a wall or sticking a poster acts like a cut into the building’s original surface, representing the city’s internal struggles and its voice.
        </p>
      </SehrinText>

      <SehrinFigure n={5} tilt={-0.3} />

      <SehrinProcess />
    </div>
  );
}

function PressBlock() {
  const P = window.PORTFOLIO_DATA.PRESS;
  return (
    <section className="block" id="press" data-screen-label="Press / Features">
      <BlockHead no="P" title="PRESS · FEATURES" meta="SELECTED 2023–25" />
      <div className="press-list">
        {P.map((row, i) => (
          <a key={i} href={row.href || "#"} target={row.href && row.href !== "#" ? "_blank" : undefined} rel="noopener" className="press-row">
            <span className="pr-date">{row.date}</span>
            <span className="pr-src">{row.src}</span>
            <span className="pr-head">{row.head}</span>
            <span className="pr-tag">{row.tag}</span>
            <span className="pr-ext">{row.ext}</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function TheEnd() {
  return (
    <section className="block" id="end" data-screen-label="THE END">
      <div className="the-end">
        <div className="te-big">THE <em>END</em>.</div>
        <div className="te-colo">
          <span>© ARDA BAŞARAN · OROBORUS · 2019 — 2026</span>
          <span>ANK · 39.93°N / 32.86°E</span>
          <span style={{ color: "var(--red)" }}>// THE END</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CaseStudy, PressBlock, TheEnd, SehrinGallery, SehrinFigure, SehrinText, SehrinProcess });