// case-detail.jsx — univerzální detail případové studie
// Image-first. Bloky: hero · brief · full · 2-up · 3-up · stack · quote · full · reel · 3-up · results · stats · next
// Placeholdery = solid color, doplníme reálné fotky/videa později.

function Ph({ tone='coral', label='product shot', idx, ratio, style }) {
  const cls = `ph ph--${tone}` + (ratio ? ` ph--${ratio}` : '');
  return (
    <div className={cls} style={style}>
      <span className="ph__tag">{label}</span>
      {idx && <span className="ph__idx">{idx}</span>}
    </div>
  );
}

// === 01 Hero ==========================================================
function CsHero({ onNav }) {
  return (
    <section className="cs-hero" data-screen-label="CS 01 Hero">
      <div className="cs-hero__bg" />
      <div className="cs__shell">
        <div className="cs-hero__top" data-reveal>
          <button className="cs-hero__back" onClick={() => onNav && onNav('projekty')}>
            <span className="cs-hero__back-arrow">←</span>
            zpátky na projekty
          </button>
          <span className="cs-hero__kicker">případovka 04 / 16</span>
        </div>

        <div className="cs-hero__main">
          <div className="cs-hero__main-l">
            <h1 className="cs-hero__title" data-reveal>tylex<em>.</em></h1>
            <div className="cs-hero__lede">
              <p className="cs-hero__lede-l" data-reveal style={{ '--reveal-delay':'80ms' }}>
                Restart značky, která dělala 30 let stejnou věc — a najednou potřebovala mluvit s novou generací.
              </p>
              <p className="cs-hero__lede-r" data-reveal style={{ '--reveal-delay':'160ms' }}>
                Po dvouletém workshopu s vedením jsme přepsali brand i web. Pěkně popořádku: nejdřív strategie, pak vizuální identita, pak teprve web. Výsledek? Tylex přestal vypadat jako dodavatel a začal vypadat jako značka.
              </p>
            </div>
          </div>

          <div className="cs-hero__main-r" data-reveal style={{ '--reveal-delay':'200ms' }}>
            <div className="cs-hero__visual">
              <Ph tone="coral" label="hero portrait · 4:5" idx="cover.jpg" />
            </div>
          </div>
        </div>

        <div className="cs-meta" data-reveal style={{ '--reveal-delay':'260ms' }}>
          <div className="cs-meta__cell">
            <span className="cs-meta__lbl">klient</span>
            <span className="cs-meta__val">Tylex Letovice, a.s.</span>
          </div>
          <div className="cs-meta__cell">
            <span className="cs-meta__lbl">rok</span>
            <span className="cs-meta__val">2024–2025</span>
          </div>
          <div className="cs-meta__cell">
            <span className="cs-meta__lbl">obor</span>
            <span className="cs-meta__val">strojírenství &amp; výroba</span>
          </div>
          <div className="cs-meta__cell">
            <span className="cs-meta__lbl">služby</span>
            <span className="cs-meta__tags">
              <span className="cs-meta__tag">strategie</span>
              <span className="cs-meta__tag">rebranding</span>
              <span className="cs-meta__tag">web</span>
              <span className="cs-meta__tag">copy</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// === 02 Brief / zadání ===============================================
function CsBrief() {
  return (
    <section className="cs-brief" data-screen-label="CS 02 Brief">
      <div className="cs__shell">
        <div className="cs-brief__grid">
          <div className="cs-brief__lbl" data-reveal>zadání</div>
          <div className="cs-brief__body" data-reveal style={{ '--reveal-delay':'120ms' }}>
            <p>
              Tylex chtěl <em>mluvit jinak</em>. Třicet let stejné weby, stejné brožury, stejná řeč — a najednou trh, kde mladší inženýři rozhodují podle značky, ne podle obchoďáka.
            </p>
            <p>
              Společně jsme se zeptali deseti otázek z Justask 10 times®. Vyšlo, že problém není v marketingu, ale v sebepojetí. Tylex není dodavatel komponent. Je to firma, která drží českou výrobu při životě. To je úplně jiný příběh.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Full-bleed image (na šířku) =====================================
function CsFull({ tone='coral', label='full bleed shot', idx, ratio='21x9' }) {
  return (
    <section className="cs-full" data-screen-label={`CS Full ${idx||''}`} data-reveal>
      <div className="cs__shell">
        <div className={`ph ph--${tone} ph--${ratio}`} style={{ borderRadius:12 }}>
          <span className="ph__tag">{label}</span>
          {idx && <span className="ph__idx">{idx}</span>}
        </div>
      </div>
    </section>
  );
}

// === Two photos side by side =========================================
function Cs2up({ left, right, screenLabel='CS 2-up' }) {
  return (
    <section className="cs-2up" data-screen-label={screenLabel}>
      <div className="cs__shell">
        <div className="cs-2up__grid">
          <div data-reveal><Ph {...left} /></div>
          <div data-reveal style={{ '--reveal-delay':'120ms' }}><Ph {...right} /></div>
        </div>
      </div>
    </section>
  );
}

// === Three photos side by side =======================================
function Cs3up({ title, eyebrow, items, screenLabel='CS 3-up' }) {
  return (
    <section className="cs-3up" data-screen-label={screenLabel}>
      <div className="cs__shell">
        {(title || eyebrow) && (
          <div className="cs-3up__head">
            {title && <h2 className="cs-3up__title" data-reveal dangerouslySetInnerHTML={{__html:title}} />}
            {eyebrow && <span className="cs-3up__lbl" data-reveal style={{ '--reveal-delay':'80ms' }}>{eyebrow}</span>}
          </div>
        )}
        <div className="cs-3up__grid">
          {items.map((it, i) => (
            <div key={i} data-reveal style={{ '--reveal-delay': (i*100) + 'ms' }}>
              <Ph {...it} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Stack — fotky pod sebou + text vedle ============================
function CsStack() {
  return (
    <section className="cs-stack" data-screen-label="CS Stack">
      <div className="cs__shell">
        <div className="cs-stack__grid">
          <div className="cs-stack__col-imgs">
            <div data-reveal><Ph tone="graphite" label="web · hero" idx="screen 01" ratio="4x3" /></div>
            <div data-reveal style={{ '--reveal-delay':'100ms' }}><Ph tone="paper" label="web · katalog" idx="screen 02" ratio="4x3" /></div>
            <div data-reveal style={{ '--reveal-delay':'200ms' }}><Ph tone="rubin" label="web · case detail" idx="screen 03" ratio="4x3" /></div>
          </div>
          <div className="cs-stack__col-text">
            <span className="cs-stack__lbl" data-reveal>web</span>
            <h2 className="cs-stack__title" data-reveal style={{ '--reveal-delay':'80ms' }}>web jako <em>výkladní skříň</em></h2>
            <div className="cs-stack__text" data-reveal style={{ '--reveal-delay':'160ms' }}>
              <p>
                Nový web nestavíme dřív, než máme strategii. U Tylexu jsme tomu věnovali první čtyři měsíce — workshopy, audit, content audit.
              </p>
              <p>
                Architektura pak vyšla z toho, co návštěvníci skutečně hledají, ne z toho, co měl klient v starém menu. Sedm sekcí místo dvaceti dvou.
              </p>
            </div>
            <ol className="cs-stack__list" data-reveal style={{ '--reveal-delay':'220ms' }}>
              <li>Nová informační architektura — sedm sekcí, jeden flow.</li>
              <li>Vlastní fotbanka — produktové i in-situ záběry.</li>
              <li>Case studies poprvé v historii Tylexu.</li>
              <li>CMS, který klient sám zvládne udržovat.</li>
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Quote ============================================================
function CsQuote() {
  return (
    <section className="cs-quote" data-screen-label="CS Quote">
      <div className="cs__shell">
        <div className="cs-quote__grid">
          <blockquote className="cs-quote__text" data-reveal>
            Věděli jsme, že potřebujeme změnu. Nečekali jsme, že to bude tak <em>hluboké</em> — a tak rychlé.
          </blockquote>
          <div className="cs-quote__person" data-reveal style={{ '--reveal-delay':'160ms' }}>
            <div className="cs-quote__avatar" />
            <div>
              <div className="cs-quote__name">Martin Šebela</div>
              <div className="cs-quote__role">CEO · Tylex Letovice</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Reel — standalone video + testimonial ===========================
function CsReel() {
  return (
    <section className="cs-reel" data-screen-label="CS Reel">
      <div className="cs__shell">
        <div className="cs-reel__head">
          <div>
            <span className="cs-reel__lbl" data-reveal>video reel</span>
            <h2 className="cs-reel__title" data-reveal style={{ '--reveal-delay':'80ms' }}>
              referenční <em>reel</em>
            </h2>
          </div>
          <p className="cs-reel__caption" data-reveal style={{ '--reveal-delay':'160ms' }}>
            42 vteřin přímo od klienta. Co se změnilo, co jim spolupráce dala — bez scénáře.
          </p>
        </div>

        <div className="cs-reel__grid">
          <div className="cs-reel__video" data-reveal>
            <span className="cs-reel__time">REC · 00:42</span>
            <span className="cs-reel__chip">9:16</span>
            <div className="cs-reel__play">
              <button className="cs-reel__play-btn" aria-label="přehrát">▶</button>
            </div>
          </div>

          <aside className="cs-testi" data-reveal style={{ '--reveal-delay':'160ms' }}>
            <span className="cs-testi__chip">testimonial</span>
            <blockquote className="cs-testi__quote">
              Za 12 let podnikání první agentura, která se ptala dřív, než začala kreslit. Doporučujeme bez váhání každému, kdo má za sebou pár polovičatých pokusů.
            </blockquote>
            <div className="cs-testi__person">
              <div className="cs-testi__avatar" />
              <div>
                <div className="cs-testi__name">Martin Šebela</div>
                <div className="cs-testi__role">CEO · Tylex Letovice</div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

// === Results — 2 column text =========================================
function CsResults() {
  return (
    <section className="cs-results" data-screen-label="CS Results">
      <div className="cs__shell">
        <div className="cs-results__grid">
          <div className="cs-results__col">
            <span className="cs-results__lbl" data-reveal>co se povedlo</span>
            <h3 className="cs-results__h" data-reveal style={{ '--reveal-delay':'80ms' }}>výsledky, <em>které drží</em></h3>
            <div className="cs-results__body" data-reveal style={{ '--reveal-delay':'160ms' }}>
              <p>
                Tylex přestal být ve výběrových řízeních „ten nejlevnější" — a začal být „ten, kterému věří". To je posun, který se neukazuje hned, ale drží roky.
              </p>
              <p>
                Konkrétně: vyšší zájem o spolupráci ze strany inženýrů junior generace, lepší tisková viditelnost v oboru, příchod tří větších zakázek do roka po launchi.
              </p>
            </div>
          </div>
          <div className="cs-results__col">
            <span className="cs-results__lbl" data-reveal>co bychom udělali jinak</span>
            <h3 className="cs-results__h" data-reveal style={{ '--reveal-delay':'80ms' }}>poctivě, <em>i o tom</em></h3>
            <div className="cs-results__body" data-reveal style={{ '--reveal-delay':'160ms' }}>
              <p>
                Workshop s vedením jsme zkrátili o den. Vyplatilo by se to udělat pomaleji — pozdější změny v identitě vznikly přesně z toho, co jsme tam neměli čas pořádně rozebrat.
              </p>
              <p>
                A copy spustit s webem najednou, ne v iteracích. Náklady na pozdější přepisy by tím odpadly.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Stats — k závěru ================================================
function CsStats() {
  return (
    <section className="cs-stats" data-screen-label="CS Stats">
      <div className="cs__shell">
        <div className="cs-stats__head">
          <h2 className="cs-stats__title" data-reveal>výsledky <em>v číslech</em></h2>
          <p className="cs-stats__sub" data-reveal style={{ '--reveal-delay':'120ms' }}>
            první rok po launchi · zdroj: analytics klienta, interní reporting
          </p>
        </div>
        <div className="cs-stats__grid">
          <div className="cs-stats__cell" data-reveal>
            <span className="cs-stats__cell-num">01</span>
            <span className="cs-stats__num">+187<span className="unit">%</span></span>
            <span className="cs-stats__lbl">nárůst kvalifikovaných poptávek z webu</span>
          </div>
          <div className="cs-stats__cell" data-reveal style={{ '--reveal-delay':'80ms' }}>
            <span className="cs-stats__cell-num">02</span>
            <span className="cs-stats__num">5<span className="unit">×</span></span>
            <span className="cs-stats__lbl">delší průměrný čas na stránce</span>
          </div>
          <div className="cs-stats__cell" data-reveal style={{ '--reveal-delay':'160ms' }}>
            <span className="cs-stats__cell-num">03</span>
            <span className="cs-stats__num">0 → 1</span>
            <span className="cs-stats__lbl">značka od nuly · nová identita, hlas, web</span>
          </div>
          <div className="cs-stats__cell" data-reveal style={{ '--reveal-delay':'240ms' }}>
            <span className="cs-stats__cell-num">04</span>
            <span className="cs-stats__num">14<span className="unit">měs.</span></span>
            <span className="cs-stats__lbl">od první otázky po spuštěný web</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Next cases — 3 karty stejné kategorie ===========================
const NEXT_CASES = [
  { id:'zabiny',   num:'05', title:'žabiny brno', sub:'identita · kampaň',  tags:['rebranding','identity'], tone:'moss'  },
  { id:'adrick',   num:'06', title:'adrick',       sub:'brand strategy',     tags:['strategy','brand'],      tone:'clay'  },
  { id:'domoplan', num:'07', title:'domoplan',     sub:'rebranding · web',   tags:['rebranding','webdesign'],tone:'rubin' },
];

function CsNext({ onNav }) {
  return (
    <section className="cs-next" data-screen-label="CS Next cases">
      <div className="cs__shell">
        <div className="cs-next__head">
          <div data-reveal>
            <span className="cs-next__lbl">další případovky</span>
            <h2 className="cs-next__title">ze stejné <em>kategorie</em></h2>
          </div>
          <p className="cs-next__sub" data-reveal style={{ '--reveal-delay':'120ms' }}>
            podobné výzvy · podobné výsledky · podobné rozpočty
          </p>
        </div>

        <div className="cs-next__grid">
          {NEXT_CASES.map((c, i) => (
            <article
              key={c.id}
              className="cs-nextcard"
              data-reveal
              style={{ '--reveal-delay': (i*120) + 'ms' }}
              onClick={() => onNav && onNav('case')}
            >
              <div className="cs-nextcard__media">
                <span className="cs-nextcard__num">{c.num} / případovka</span>
                <span className="cs-nextcard__arrow">↗</span>
                <Ph tone={c.tone} label={`${c.title} · cover`} />
              </div>
              <div className="cs-nextcard__body">
                <div className="cs-nextcard__tags">
                  {c.tags.map((t,j) => <span key={j} className="cs-nextcard__tag">{t}</span>)}
                </div>
                <h3 className="cs-nextcard__title">{c.title}</h3>
                <p className="cs-nextcard__sub">{c.sub}</p>
              </div>
            </article>
          ))}
        </div>

        <div className="cs-next__foot">
          <button className="btn btn--ghost" onClick={() => onNav && onNav('projekty')}>
            Všech 500+ projektů
            <span className="arrow">↗</span>
          </button>
        </div>
      </div>
    </section>
  );
}

// === Page composer ==================================================
function CasePage({ onNav }) {
  useReveal();
  return (
    <main className="cs" data-screen-label="CASE Detail">
      <CsHero onNav={onNav} />

      {/* první vrstva: úvod + první vizuální blok */}
      <CsBrief />

      <CsFull tone="ink" label="key visual · full bleed · 21:9" idx="01 / cover" ratio="21x9" />

      {/* primární vizuální flow: 2-up + 3-up */}
      <Cs2up
        screenLabel="CS 2-up · brand"
        left={{ tone:'rubin', label:'brand book · zblízka', idx:'02 / 24' }}
        right={{ tone:'paper', label:'brand book · spread', idx:'03 / 24' }}
      />

      <Cs3up
        screenLabel="CS 3-up · identita"
        title="identita <em>v terénu</em>"
        eyebrow="brand applications"
        items={[
          { tone:'ink',   label:'vizitka · detail',    idx:'04' },
          { tone:'coral', label:'poster · in situ',     idx:'05' },
          { tone:'clay',  label:'merch · packaging',    idx:'06' },
        ]}
      />

      <CsStack />

      <CsQuote />

      {/* druhá vrstva: další vizuály + reel */}
      <CsFull tone="moss" label="prostředí · workshop · in-situ" idx="07 / cover" ratio="16x7" />

      <Cs2up
        screenLabel="CS 2-up · web"
        left={{ tone:'graphite', label:'web · mobile flow', idx:'08 / 24' }}
        right={{ tone:'coral',   label:'web · detail',      idx:'09 / 24' }}
      />

      <CsReel />

      <Cs3up
        screenLabel="CS 3-up · finální výstupy"
        title="finální <em>výstupy</em>"
        eyebrow="04 / outputs"
        items={[
          { tone:'paper',    label:'print · katalog',     idx:'10' },
          { tone:'obsidian', label:'social · campaign',   idx:'11' },
          { tone:'rubin',    label:'event · launch night',idx:'12' },
        ]}
      />

      <CsResults />

      {/* statistiky až ke konci */}
      <CsStats />

      {/* CTA na další případovky stejné kategorie */}
      <CsNext onNav={onNav} />

      <Contact />
      <Footer />
    </main>
  );
}

window.CasePage = CasePage;