// case-studies.jsx — Detail case study pages for Služby & Akcie

const CASES = {
  svadby: {
    eyebrow: 'Case study · Svadby',
    title: ['Svadby v', 'Zruboch v Jáne.'],
    label: 'Zruby · svadobná tabuľa',
    heroImage: 'assets/zruby-night.jpg',
    lead: 'Drevené zruby, dolina Štiavnice za oknom, kapacita do 60 hostí v stojačky alebo 40 pri stoloch.',
    intro: 'Zruby v Liptovskom Jáne sú miestom pre svadby, ktoré sa nehrajú na hotelovú sálu. Drevený interiér, krb v centrálnej miestnosti, terasa s výhľadom do údolia a možnosť ubytovať najbližších priamo na mieste.',
    stats: [
      ['60', 'Hostí v stojačky'],
      ['40', 'Hostí pri stoloch'],
      ['24', 'Lôžok pre rodinu'],
      ['12 mes.', 'Pre obľúbené dátumy'],
    ],
    included: [
      ['Celý objekt na 2 noci', 'Piatok 14:00 — nedeľa 12:00, exkluzívne pre vás'],
      ['Svadobná miestnosť', 'Centrálny zrub, krb, ozvučenie, projektor'],
      ['Vonkajšia obradná zóna', 'Drevený obradný oblúk, lavičky pre 60 hostí'],
      ['Ubytovanie 24 osôb', 'Tri zruby pre najbližšiu rodinu'],
      ['Catering po dohode', 'Spolupracujeme s 3 osvedčenými spoločnosťami'],
      ['Welcome drink', 'Liptovská borovička alebo nealko domáci sirup'],
      ['Wedding planner', 'Kontaktná osoba 24/7 počas pobytu'],
      ['Fotograf na 2 hodiny', 'Bonus — fotenie obradu v doline'],
    ],
    program: [
      ['Piatok 14:00', 'Check-in, prípravná večera v menšej skupine'],
      ['Sobota 11:00', 'Príchod dodávateľov, výzdoba'],
      ['Sobota 15:00', 'Obrad v doline'],
      ['Sobota 16:00', 'Welcome drink, gratulácie, fotenie'],
      ['Sobota 18:00', 'Slávnostná večera'],
      ['Sobota 20:00', 'Tanec, koliesko'],
      ['Sobota 24:00', 'Polnočné prekvapenie, sauna pre odvážnych'],
      ['Nedeľa 11:00', 'Brunch, raňajky, rozlúčka'],
    ],
    gallery: ['Slávnostná tabuľa', 'Obrad v doline', 'Mladomanželská izba', 'Krb a tanec', 'Pohľad z dronu'],
    priceFrom: '4 900 €',
    priceNote: 'Cena celého balíka, bez cateringu. Záloha 30 % pri rezervácii.',
    testimonial: '„Najlepšia svadba akú sme zažili. Nikam sme sa nemuseli ponáhľať, nikto nás nikam nevyháňal, zrub sme mali sami pre seba celý víkend. A tá sauna o polnoci — pamätáme si dodnes.“',
    testimonialWho: 'Lucia & Marek · júl 2025',
  },
  firmy: {
    eyebrow: 'Case study · Firemné akcie',
    title: ['Firemný offsite', 'v Capre.'],
    label: 'Capra · konferenčná miestnosť',
    heroImage: 'assets/capra-living.jpg',
    lead: 'Konferenčná miestnosť pre 40 ľudí, plne vybavená kuchyňa pre catering, 8 apartmánov pre prespanie a Chopok 5 minút autom.',
    intro: 'Apartmány Capra v Demänovskej majú vlastnú konferenčnú miestnosť s projektorom, flipchartmi, ozvučením a vysokorýchlostnou WiFi. Spojené apartmány ubytujú celý tím, večer wellness, druhý deň teambuilding na Chopku alebo v jaskyniach.',
    stats: [
      ['40', 'Miest v konf. sále'],
      ['32', 'Lôžok v dome'],
      ['300 Mbit', 'Optická WiFi'],
      ['2 dni', 'Štandardné trvanie'],
    ],
    included: [
      ['Konferenčná miestnosť', 'Projektor 4K, ozvučenie, flipcharty, klimatizácia'],
      ['Celý objekt exkluzívne', '8 apartmánov pre tím do 32 ľudí'],
      ['Coffee break × 4', 'Káva, čaje, smoothie, fresh ovocie'],
      ['Obed v deň zasadnutia', 'Catering alebo reštaurácia v dome'],
      ['Spoločná večera', 'Tradičné liptovské menu alebo BBQ na terase'],
      ['Wellness v cene', 'Sauna, vírivka pre tím'],
      ['Teambuilding aktivita', 'Lyžovanie, jaskyne, hrebeňovka, prepravu zabezpečíme'],
      ['Dedikovaný koordinátor', 'Jedna kontaktná osoba na celý pobyt'],
    ],
    program: [
      ['Deň 1 · 10:00', 'Check-in, welcome káva'],
      ['Deň 1 · 11:00', 'Prvý blok strategickej diskusie'],
      ['Deň 1 · 13:00', 'Obed v reštaurácii v dome'],
      ['Deň 1 · 14:30', 'Druhý blok, workshopy'],
      ['Deň 1 · 17:00', 'Wellness + voľný čas'],
      ['Deň 1 · 19:00', 'Spoločná večera, neformálna časť'],
      ['Deň 2 · 9:00', 'Raňajky, krátky outdoor blok'],
      ['Deň 2 · 11:00', 'Teambuilding (Chopok / jaskyne / hrebeňovka)'],
      ['Deň 2 · 15:00', 'Záverečné zhrnutie, check-out'],
    ],
    gallery: ['Konferenčná sála', 'Apartmán Capra', 'Wellness', 'Večera na terase', 'Tím na Chopku'],
    priceFrom: '6 800 €',
    priceNote: 'Cena za celý objekt na 2 dni / 1 noc, do 32 osôb. Vyžiadajte si ponuku pre váš formát.',
    testimonial: '„Najproduktívnejšia 48-hodinovka, akú sme ako leadership tím mali. Žiadne rušenie, žiadny stres s catering-om, večerná sauna ako bonus.“',
    testimonialWho: 'CEO · 35-členná tech firma · január 2026',
  },
  team: {
    eyebrow: 'Case study · Teambuilding',
    title: ['Teambuilding', 'v Stagnume.'],
    label: 'Stagnum · spoločenská miestnosť',
    heroImage: 'assets/stagnum-fireplace.jpg',
    lead: 'Apartmánový dom Stagnum vieme uzavrieť pre 18 osôb. Spoločenská miestnosť, BBQ na záhrade, šípky, termály 3 minúty autom.',
    intro: 'Aktívny formát na 2 dni — termály, hrebeňovka alebo cyklotúra popri Váhu, spoločné varenie, šípkový turnaj, sauna. Ak hľadáte teambuilding, ktorý sa nesnaží byť teambuildingom, sme dobrá voľba.',
    stats: [
      ['18', 'Osôb max'],
      ['4', 'Spojené apartmány'],
      ['3 min', 'K termálom OAS'],
      ['Z dverí', 'Cyklotrasa Váh'],
    ],
    included: [
      ['Celý apartmánový dom', '4 spojené apartmány pre 18 osôb'],
      ['Spoločenská zóna', 'Veľký jedálenský stôl, šípky, gramofón, knižnica'],
      ['Vstupy do termálov OAS', '1× celodenný vstup pre celý tím'],
      ['Spoločné raňajky', 'Lokálne suroviny, varíme spolu'],
      ['Sprievodca na hrebeň', 'Voliteľné — Krakova hoľa alebo Salatín'],
      ['Cyklo požičovňa', '18 ks, doručenie pred dom'],
      ['BBQ večer', 'Drevo, uhlie, mäso, zelenina pripravené'],
      ['Sauna + vírivka', 'V dome, vyhradená pre vás'],
    ],
    program: [
      ['Deň 1 · 12:00', 'Príchod, welcome obed'],
      ['Deň 1 · 14:00', 'Aktivita podľa výberu: termály / cyklo / hrebeň'],
      ['Deň 1 · 18:00', 'Sauna, šípkový turnaj'],
      ['Deň 1 · 19:30', 'BBQ večera spolu'],
      ['Deň 2 · 9:00', 'Raňajky, spoločné varenie'],
      ['Deň 2 · 11:00', 'Voľný program, drobné aktivity'],
      ['Deň 2 · 14:00', 'Check-out'],
    ],
    gallery: ['Spoločná tabuľa', 'BBQ na záhrade', 'Šípkový turnaj', 'Termály OAS', 'Cyklo pred domom'],
    priceFrom: '2 400 €',
    priceNote: 'Cena za celý dom na 2 dni / 1 noc, do 18 osôb. Bez aktivít.',
    testimonial: '„Nikde sme nemuseli ísť, všetko sme mali na mieste alebo do 5 minút. Termály po cyklotrase boli odmena, ktorú si tím pamätá doteraz.“',
    testimonialWho: 'HR manažér · marketingová agentúra · september 2025',
  },
  family: {
    eyebrow: 'Case study · Rodinné stretnutia',
    title: ['Veľká rodina', 'pod jednou strechou.'],
    label: 'Stagnum · spoločná večera',
    heroImage: 'assets/zruby-interior.jpg',
    lead: 'Spojené apartmány Stagnum pre 18 osôb — okrúhle narodeniny, výročia svadieb, vianočné stretnutia, abrahámoviny.',
    intro: 'Nepotrebujete reštauráciu — varíme alebo nám pripravia. Nepotrebujete sálu — máme spoločenskú zónu. Detský kútik, výsuvné postele pre vnúčatá, výhľad do údolia. Mimo sezóny vám dáme veľkú zľavu.',
    stats: [
      ['18', 'Osôb pod jednou strechou'],
      ['4', 'Spálne dovedna'],
      ['1', 'Veľká spoločná zóna'],
      ['Áno', 'Detský kútik a postieľky'],
    ],
    included: [
      ['Celý dom pre vás', '4 apartmány spojené spoločnou zónou'],
      ['Slávnostne prestretý stôl', 'Plátno, kvety, sviečky'],
      ['Tortovňa', 'Vlastná chladnička len pre tortu'],
      ['Detský kútik', 'Hračky, knihy, kreslenie, výsuvné postieľky'],
      ['Catering po dohode', 'Tradičné menu alebo formát švédskeho stola'],
      ['Fotograf na 2 hodiny', 'Bonus — rodinné portréty'],
      ['Wellness pre dospelých', 'Sauna a vírivka po večery'],
      ['Termály vstup', 'Pre celú rodinu, do 18 osôb'],
    ],
    program: [
      ['Piatok 16:00', 'Postupný príchod, ubytovanie'],
      ['Piatok 19:00', 'Spoločná večera'],
      ['Sobota 10:00', 'Raňajky, voľný program'],
      ['Sobota 14:00', 'Termály OAS spolu'],
      ['Sobota 18:00', 'Slávnostná tabuľa, prípitky, fotenie'],
      ['Nedeľa 10:00', 'Brunch, rozlúčková káva'],
      ['Nedeľa 12:00', 'Check-out'],
    ],
    gallery: ['Spoločná tabuľa', 'Rodinné portréty', 'Detský kútik', 'Tortovňa', 'Termály spolu'],
    priceFrom: '2 100 €',
    priceNote: 'Cena za celý dom na 2 noci, do 18 osôb. Mimo sezóny zľava 25 %.',
    testimonial: '„70-ka mamy v Stagnume — všetkých 16 nás bývalo pod jednou strechou, deti mali kde rachotiť, my sme mali kde tichšie sedieť. Krásny formát.“',
    testimonialWho: 'Jana · október 2025',
  },
};

function CaseStudyPage({ tweaks, onNav, caseKey }) {
  const c = CASES[caseKey];
  if (!c) return <div style={{ padding: 100 }}>Case study nenájdené.</div>;
  return (
    <main>
      <header className="page-hero">
        <div className="bg"><PH src={c.heroImage} label={c.label} icon={<MountainIcon/>} style={{ height: '100%' }} /></div>
        <div className="content shell" style={{ padding: 0 }}>
          <div className="crumbs" style={{ marginBottom: 28 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }}>Domov</a>
            <span>/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('sluzby'); }}>Služby & Akcie</a>
            <span>/</span>
            <span style={{ color: 'var(--text)' }}>{c.title.join(' ')}</span>
          </div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>{c.eyebrow}</div>
          <h1 className="display" style={{ margin: 0, fontSize: 'clamp(56px, 7vw, 120px)' }}>
            {c.title[0]}<br/>
            <em className="italic-script" style={{ color: 'var(--accent)' }}>{c.title[1]}</em>
          </h1>
        </div>
      </header>

      <section className="section tight">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div className="eyebrow">O formáte</div>
          <div>
            <p className="lead" style={{ margin: '0 0 24px', fontSize: 22 }}>{c.lead}</p>
            <p style={{ margin: 0, color: 'var(--text-soft)', maxWidth: '60ch' }}>{c.intro}</p>
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="shell">
          <div className="stats">
            {c.stats.map(([n, l]) => (
              <div key={l} className="stat"><div className="n">{n}</div><div className="l">{l}</div></div>
            ))}
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section className="section">
        <div className="shell">
          <div className="gallery-grid">
            {c.gallery.map((g, i) => <PH key={g} src={[c.heroImage, 'assets/stagnum-fireplace.jpg', 'assets/capra-living.jpg', 'assets/zruby-interior.jpg', 'assets/zruby-night.jpg'][i % 5]} label={g} icon={<MountainIcon/>} />)}
          </div>
        </div>
      </section>

      {/* INCLUDED */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead
            eyebrow="Čo je v cene"
            title={<>V balíku <em className="italic-script" style={{ color: 'var(--accent)' }}>{c.priceFrom}</em></>}
            lead={c.priceNote}
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--line)' }}>
            {c.included.map(([n, d]) => (
              <div key={n} style={{ padding: '24px 28px', borderBottom: '1px solid var(--line)', borderRight: '1px solid var(--line)', display: 'flex', gap: 18, alignItems: 'flex-start' }}>
                <span style={{ width: 18, height: 18, color: 'var(--accent)', flexShrink: 0, marginTop: 4 }}>{Ico.check}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em', marginBottom: 4 }}>{n}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-soft)' }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROGRAM */}
      <section className="section">
        <div className="shell">
          <SectionHead eyebrow="Modelový program" title="Príklad toho, ako môže pobyt vyzerať." />
          <div style={{ maxWidth: 760 }}>
            {c.program.map(([when, what], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 32, padding: '20px 0', borderTop: i === 0 ? '1px solid var(--line)' : 'none', borderBottom: '1px solid var(--line)' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', letterSpacing: '0.1em', paddingTop: 4 }}>{when}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em' }}>{what}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
        <div className="shell" style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', marginBottom: 32 }}>Spätná väzba</div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 44px)', lineHeight: 1.25, letterSpacing: '-0.02em', margin: '0 0 32px' }}>
            {c.testimonial}
          </p>
          <div className="text-mute" style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{c.testimonialWho}</div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="shell">
          <div style={{ background: 'var(--accent-soft)', border: '1px solid color-mix(in oklab, var(--accent) 30%, transparent)', borderRadius: 'var(--radius-card)', padding: 'clamp(40px, 6vw, 80px)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>Pripravený rezervovať?</div>
              <h3 className="h2" style={{ margin: '0 0 18px', fontSize: 'clamp(32px, 3vw, 48px)' }}>
                Pošlite nám dopyt a do 24 hodín máte konkrétnu ponuku.
              </h3>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, marginTop: 12 }}>
                Od {c.priceFrom}
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-end' }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav('kontakt')}>Poslať dopyt {Ico.arrowSm}</button>
              <button className="btn btn-ghost" onClick={() => onNav('sluzby')}>← Späť na Služby</button>
            </div>
          </div>
        </div>
      </section>

      {/* OTHER CASES */}
      <section className="section">
        <div className="shell">
          <SectionHead eyebrow="Ďalšie case studies" title="Iný formát?" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {Object.keys(CASES).filter(k => k !== caseKey).map(k => (
              <button key={k} onClick={() => onNav(`case-${k}`)} style={{
                padding: 28, background: 'var(--surface)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius-card)', textAlign: 'left', color: 'inherit', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', gap: 12,
              }}>
                <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{CASES[k].eyebrow.replace('Case study · ', '')}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.01em', lineHeight: 1.1 }}>
                  {CASES[k].title.join(' ')}
                </div>
                <span style={{ marginTop: 'auto', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  Otvoriť {Ico.arrowSm}
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { CaseStudyPage, CASES });