// Case Study — the core additive deliverable
// Structured: chips · title · meta row · narrative (brief / concept / production / live)
// · outcomes layer · gallery · credit

const FEI_NARRATIVE = {
  brief:     "The Fédération Équestre Internationale brought its flagship Final to the Middle East for the first time. The mandate: deliver a championship-grade competition field, ceremonial moments and a televised gala — entirely on a temporary build inside a city venue, with broadcast partners flying in from twelve markets.",
  concept:   "We treated Riyadh as the asset, not a backdrop. The competition floor read 'Riyadh-first' to a global audience while keeping FEI's brand frame intact: lighting cued to the rider, broadcast positions composed for the wide shot, hospitality designed for guests who'd never been to a regional jumping final.",
  production:"Eight weeks of build. A footing system shipped, laid and removed. Stables, vet boxes, warm-up arena, broadcast compound, hospitality pavilions. Two ceremonies, one awards gala, three competition days. RTD broadcast feed managed in parallel with floor operations.",
  live:      "Three days, sold out. Nine thousand seats. FEI-broadcast feed live to twelve territories. Awards gala on the closing night, transformed from competition floor to black-tie venue inside four hours.",
};

const FEI_OUTCOMES = [
  { num: "1st",        em: true, key: "Middle-East Final", note: "First FEI World Cup Finals staged in the region. Independently citable." },
  { num: "9,000",      em: false, key: "Live attendance", note: "Across three competition days · sold-out seating bowl" },
  { num: "12",         em: true, key: "Broadcast markets", note: "Feed delivered to twelve broadcast territories" },
  { num: "8 wks",      em: false, key: "Build window", note: "From concept signoff to riders-on-course · temporary venue" },
];

const GALLERY = [
  { src: "media/work-fei-rtd-detail.webp",       size: "lg" },
  { src: "media/work-detail-15a2343.webp",        size: "md" },
  { src: "media/work-detail-a7s04977.webp",       size: "md" },
  { src: "media/work-detail-dsc0202.webp",        size: "sm" },
  { src: "media/work-detail-dsc02926.webp",       size: "sm" },
  { src: "media/work-detail-dsc04934.webp",       size: "sm" },
];

const CaseStudy = ({ slug, go }) => {
  const project = PROJECTS.find(p => p.slug === slug) || PROJECTS[0];
  const others = PROJECTS.filter(p => p.slug !== project.slug && p.category === project.category).slice(0, 3);
  if (others.length < 3) {
    const more = PROJECTS.filter(p => p.slug !== project.slug && !others.includes(p)).slice(0, 3 - others.length);
    others.push(...more);
  }

  return (
    <div className="page" data-screen-label={`03 Case · ${project.title}`}>
      {/* Hero */}
      <section className="cs-hero">
        <div style={{ padding: "32px var(--pad) 24px", maxWidth: "var(--maxw)", margin: "0 auto" }}>
          <button onClick={() => go({ page: "work" })} style={{ color: "rgba(246,245,239,0.7)", fontFamily: "JetBrains Mono, monospace", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ transform: "scaleX(-1)", display: "inline-block" }}><ArrowRight /></span> All work
          </button>
        </div>
        <div className="cs-hero__media">
          <img src={project.image} alt="" />
        </div>
        <div className="cs-hero__title-wrap">
          <div className="cs-hero__chips">
            <span className="chip chip--accent"><PinDot/>{CATEGORIES.find(c => c.id === project.category)?.label}</span>
            <span className="chip">{project.year}</span>
            {project.credibility && <span className="chip chip--ghost" style={{ color: "var(--paper)" }}>{project.credibility}</span>}
          </div>
          <h1 className="cs-hero__title">{project.title}</h1>
          <p className="t-lead" style={{ marginTop: 18, maxWidth: 720, color: "rgba(246,245,239,0.78)" }}>
            {project.blurb}
          </p>
        </div>
        <div className="container">
          <div className="cs-meta">
            <div className="cs-meta__item">
              <span className="cs-meta__key">Category</span>
              <span className="cs-meta__val">{CATEGORIES.find(c => c.id === project.category)?.label}</span>
            </div>
            <div className="cs-meta__item">
              <span className="cs-meta__key">Client</span>
              <span className="cs-meta__val">{project.client}</span>
            </div>
            <div className="cs-meta__item">
              <span className="cs-meta__key">Location</span>
              <span className="cs-meta__val">{project.location}</span>
            </div>
            <div className="cs-meta__item">
              <span className="cs-meta__key">Year</span>
              <span className="cs-meta__val">{project.year}</span>
            </div>
            <div className="cs-meta__item">
              <span className="cs-meta__key">Blink's role</span>
              <span className="cs-meta__val">{project.role}</span>
            </div>
          </div>
          {/* Rights notice */}
          <div style={{ display: "flex", gap: 12, alignItems: "center", padding: "20px 0 56px", color: "rgba(246,245,239,0.55)", fontSize: 12, fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.05em" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--c-yellow)" }}></span>
            Imagery shown reference-only · per-project usage permission &amp; photographer credit pending client confirmation
          </div>
        </div>
      </section>

      {/* Narrative */}
      <section className="cs-narrative">
        <div className="container">
          <div style={{ maxWidth: 1100 }}>
            <div className="cs-stage">
              <div className="cs-stage__label">
                <span className="cs-stage__num">01 / Brief</span>
                <span className="cs-stage__label-text">What landed on the desk.</span>
              </div>
              <div className="cs-stage__body"><p>{FEI_NARRATIVE.brief}</p></div>
            </div>
            <div className="cs-stage">
              <div className="cs-stage__label">
                <span className="cs-stage__num">02 / Concept</span>
                <span className="cs-stage__label-text">The line we held to.</span>
              </div>
              <div className="cs-stage__body"><p>{FEI_NARRATIVE.concept}</p></div>
            </div>
            <div className="cs-stage">
              <div className="cs-stage__label">
                <span className="cs-stage__num">03 / Production</span>
                <span className="cs-stage__label-text">What it took to build.</span>
              </div>
              <div className="cs-stage__body"><p>{FEI_NARRATIVE.production}</p></div>
            </div>
            <div className="cs-stage">
              <div className="cs-stage__label">
                <span className="cs-stage__num">04 / Live</span>
                <span className="cs-stage__label-text">What happened in the room.</span>
              </div>
              <div className="cs-stage__body"><p>{FEI_NARRATIVE.live}</p></div>
            </div>
          </div>
        </div>
      </section>

      {/* Outcomes layer — the structured deliverable the brief flags as missing on the live site */}
      <section style={{ padding: "0 0 clamp(64px, 9vw, 128px)", background: "var(--paper)" }}>
        <div className="container">
          <div className="sec__head" style={{ marginBottom: 32 }}>
            <div>
              <Eyebrow>Outcomes layer</Eyebrow>
              <h2 className="t-h2">Measured, not implied.</h2>
            </div>
            <p style={{ maxWidth: 360, color: "var(--muted)", fontSize: 14 }}>
              Only figures confirmed by the client are published. Where a metric isn't cleared, it's flagged for follow-up — not invented.
            </p>
          </div>
          <div className="cs-outcomes">
            {FEI_OUTCOMES.map((o, i) => (
              <div key={i} className="cs-outcome">
                <div>
                  <div className="cs-outcome__key">{o.key}</div>
                  <div className="cs-outcome__num" style={{ marginTop: 8 }}>
                    {o.em ? <em>{o.num}</em> : o.num}
                  </div>
                </div>
                <div className="cs-outcome__note">{o.note}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section style={{ padding: "0 0 clamp(64px, 9vw, 128px)", background: "var(--paper)" }}>
        <div className="container">
          <SecHead
            eyebrow="Gallery"
            title="On the floor."
            right={<span className="t-mono" style={{ color: "var(--muted)" }}>{GALLERY.length} stills · credits pending</span>}
          />
          <div className="cs-gallery">
            {GALLERY.map((g, i) => (
              <div key={i} className={`cs-gallery__item cs-gallery__item--${g.size}`}>
                <img src={g.src} alt="" loading="lazy" />
              </div>
            ))}
          </div>
          <p style={{ marginTop: 24, color: "var(--muted)", fontSize: 13, fontFamily: "JetBrains Mono, monospace", letterSpacing: "0.05em" }}>
            Credit line: <span style={{ color: "var(--ink)" }}>© Photographer name pending · Used by permission of [Client]</span>
          </p>
        </div>
      </section>

      {/* Related */}
      <section className="bg-bone">
        <div className="container" style={{ padding: "clamp(64px, 8vw, 112px) var(--pad)" }}>
          <SecHead eyebrow="Related work" title="More in this category." />
          <div className="work-grid">
            {others.slice(0, 3).map((p) => (
              <div key={p.slug} className="work-card work-card--m" onClick={() => { go({ page: "case", slug: p.slug }); window.scrollTo(0, 0); }} style={{ cursor: "pointer" }}>
                <div className="work-card__media">
                  <img src={p.image} alt="" loading="lazy" />
                  <div className="work-card__overlay">
                    <div className="work-card__overlay-top"><span className="chip"><PinDot/>{p.year}</span></div>
                    <div className="work-card__overlay-bot">
                      <div className="work-card__rights"><span className="rights-dot"></span> Rights: pending</div>
                      <div className="arrow"><ArrowUpRight /></div>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="work-card__title">{p.title}</div>
                  <div className="work-card__meta" style={{ marginTop: 8 }}>
                    <span>{p.client}</span><span className="sep"></span><span>{p.location}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-yellow">
        <div className="container" style={{ padding: "80px var(--pad)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
          <h2 style={{ fontSize: "clamp(36px, 5vw, 72px)", fontWeight: 800, letterSpacing: "-0.025em", lineHeight: 0.95, margin: 0, maxWidth: 700, textWrap: "balance" }}>
            Got a brief in this category?
          </h2>
          <BriefBtn variant="ink" size="xl" category={project.category} />
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { CaseStudy });