// pages.jsx — Region, Object detail, Services, Attractions, About, Contact, ComingSoon

// ── Region config ──────────────────────────────────────────────────────
const REGION_DATA = {
  jan: {
    name: 'Liptovský Ján',
    nameSplit: ['Liptovský', 'Ján.'],
    eyebrow: 'Región · 2 objekty',
    heroLabel: 'Liptovský Ján — údolie pri Štiavnici',
    heroImage: 'assets/janska-dolina.jpg',
    coord: ['49.0383° N · 19.6720° E', '780 m n.m.', 'Nízke Tatry · Slovensko'],
    lead: 'Obec medzi Nízkymi Tatrami a riekou Váh. Tichá, s vlastnými termálnymi prameňmi, krátkou cestou k Stanišovskej jaskyni a hrebeňovými trasami priamo od domu.',
    desc: 'Nehľadáte ruch Jasnej, ale ani úplnú samotu? Liptovský Ján je presne to. Termálne kúpalisko OAS pár minút autom, štvorhviezdičkový pokoj, vlastná dolina Štiavnice. V zime ski-bus na Jasnú, v lete cyklotrasa popri Váhu.',
    objects: [
      { name: 'Apartmány Stagnum', tagline: 'Pokojné apartmány pri termálnych prameňoch', specs: ['4 apartmány', '2–6 osôb', 'Wellness na izbe', 'Parkovanie zadarmo'], src: 'assets/stagnum-fireplace.jpg' },
      { name: 'Zruby v Jáne',      tagline: 'Drevené zruby pre tých, čo hľadajú samotu',     specs: ['3 zruby', '4–8 osôb', 'Sauna a vírivka', 'Krb a BBQ'], src: 'assets/zruby-night.jpg' },
    ],
    nearby: [
      ['water', 'Termály OAS', '3 min'],
      ['cave',  'Stanišovská jaskyňa', '8 min'],
      ['hike',  'Krakova hoľa', '20 min'],
      ['ski',   'Jasná Chopok', '25 min'],
    ],
    nearbyEyebrow: 'V okolí',
    nearbyTitleEm: 'Jána.',
    nearbyLead: 'Všetky body záujmu sú do 25 minút autom.',
  },
  dem: {
    name: 'Demänovská Dolina',
    nameSplit: ['Demänovská', 'Dolina.'],
    eyebrow: 'Región · 1 objekt',
    heroLabel: 'Demänovská Dolina — pohľad zhora',
    heroImage: 'assets/demanovska-dolina.jpg',
    coord: ['48.9842° N · 19.5816° E', '900 m n.m.', 'Nízke Tatry · Slovensko'],
    lead: 'Najznámejšia dolina Nízkych Tatier. Päť minút od kabínkovej lanovky Jasná, hodina od mestského ruchu. Domov najnavštevovanejšej jaskyne na Slovensku.',
    desc: 'Demänovská je miesto, kde sa rozhoduje, či bude váš víkend o lyžovaní, hubárčení alebo hrebeňovkách. V zime je Jasná na dosah ruky; v lete vás z apartmánu delí 25 minút od vrcholu Chopku lanovkou. Reštaurácie, koliby, jaskyne — všetko v dolinke.',
    objects: [
      { name: 'Apartmány Capra', tagline: 'Päť minút od Chopku, hodina od pokoja', specs: ['8 apartmánov', '2–8 osôb', 'Ski-in / Ski-out', 'Reštaurácia'], src: 'assets/capra-exterior.webp' },
    ],
    nearby: [
      ['ski',   'Jasná · Chopok', '5 min'],
      ['cave',  'Demänovská j. slobody', '12 min'],
      ['hike',  'Ďumbier · hrebeňovka', '30 min'],
      ['food',  'Koliba Patria', '15 min'],
    ],
    nearbyEyebrow: 'V okolí',
    nearbyTitleEm: 'Demänovskej.',
    nearbyLead: 'Lyžovanie a turistika sú priamo z apartmánu. Ostatné body do 30 minút.',
  },
};

function RegionPage({ tweaks, onNav, regionKey = 'jan' }) {
  const r = REGION_DATA[regionKey] || REGION_DATA.jan;
  return (
    <main>
      <header className="page-hero">
        <div className="bg"><PH src={r.heroImage} label={r.heroLabel} 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('regiony'); }}>Regióny</a>
            <span>/</span>
            <span style={{ color: 'var(--text)' }}>{r.name}</span>
          </div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>{r.eyebrow}</div>
          <h1 className="display" style={{ margin: 0, fontSize: 'clamp(64px, 8vw, 132px)' }}>
            {r.nameSplit[0]} <em className="italic-script" style={{ color: 'var(--accent)' }}>{r.nameSplit[1]}</em>
          </h1>
        </div>
      </header>

      <section className="section tight">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>O regióne</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-mute)', letterSpacing: '0.1em' }}>
              {r.coord.map((line, i) => <div key={i}>{line}</div>)}
            </div>
          </div>
          <div>
            <p className="lead" style={{ margin: '0 0 24px', fontSize: 20 }}>{r.lead}</p>
            <p style={{ margin: 0, color: 'var(--text-soft)', maxWidth: '60ch' }}>{r.desc}</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <SectionHead
            eyebrow={`Objekty v ${r.name === 'Liptovský Ján' ? 'Liptovskom Jáne' : 'Demänovskej Doline'}`}
            title={r.objects.length === 1 ? 'Jedna adresa, jeden charakter.' : 'Dve adresy, dva charaktery.'}
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 80 }}>
            {r.objects.map((o, i) => (
              <FeatureRow
                key={o.name}
                num={`0${i+1} / 0${r.objects.length}`}
                region={r.name}
                name={o.name}
                tagline={o.tagline}
                specs={o.specs}
                src={o.src}
                flip={i % 2 === 1}
                onNav={onNav}
              />
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead
            eyebrow={r.nearbyEyebrow}
            title={<>Čo zažiť priamo z <em className="italic-script" style={{ color: 'var(--accent)' }}>{r.nearbyTitleEm}</em></>}
            lead={r.nearbyLead}
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {r.nearby.map(([icoKey, name, dist]) => (
              <NearbyTile key={name} icon={Ico[icoKey]} name={name} dist={dist} />
            ))}
          </div>
        </div>
      </section>

      {/* cross-region link */}
      <section className="section">
        <div className="shell">
          <div style={{ background: 'var(--surface)', border: '1px solid var(--line-2)', borderRadius: 'var(--radius-card)', padding: 'clamp(32px, 4vw, 64px)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Iný región</div>
              <h3 className="h3" style={{ margin: 0 }}>
                {regionKey === 'jan'
                  ? <>Skúste aj <em className="italic-script" style={{ color: 'var(--accent)' }}>Demänovskú Dolinu</em></>
                  : <>Skúste aj <em className="italic-script" style={{ color: 'var(--accent)' }}>Liptovský Ján</em></>}
              </h3>
            </div>
            <button className="btn btn-ghost" onClick={() => onNav(regionKey === 'jan' ? 'region-dem' : 'region-jan')}>
              Otvoriť región {Ico.arrowSm}
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function NearbyTile({ icon, name, dist }) {
  return (
    <div style={{ padding: 28, border: '1px solid var(--line)', borderRadius: 'var(--radius-card)', display: 'flex', flexDirection: 'column', gap: 14, background: 'var(--bg)' }}>
      <span style={{ width: 24, height: 24, color: 'var(--accent)' }}>{icon}</span>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em' }}>{name}</div>
      <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{dist} autom</div>
    </div>
  );
}

// ── Object detail (Apartmány Stagnum) ──────────────────────────────────
function ObjectPage({ tweaks, onNav }) {
  return (
    <main>
      <section style={{ padding: '120px var(--gutter) 32px' }}>
        <div className="shell" style={{ padding: 0 }}>
          <div className="crumbs" style={{ marginBottom: 20 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }}>Domov</a>
            <span>/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav('region-jan'); }}>Liptovský Ján</a>
            <span>/</span>
            <span style={{ color: 'var(--text)' }}>Apartmány Stagnum</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Apartmány <span className="dot"/> Liptovský Ján</div>
              <h1 className="h1" style={{ margin: 0 }}>
                Apartmány <em className="italic-script" style={{ color: 'var(--accent)' }}>Stagnum</em>
              </h1>
            </div>
            <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--accent)' }}>
                <span style={{ width: 14, height: 14, display: 'inline-block' }}>{Ico.star}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '-0.02em' }}>9,6</span>
                <span className="text-mute" style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase' }}>· 218 recenzií</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '0 var(--gutter) 64px' }}>
        <div className="shell" style={{ padding: 0 }}>
          <div className="gallery-grid">
            <PH src="assets/stagnum-fireplace.jpg" label="Obývacia izba" icon={<MountainIcon/>} />
            <PH src="assets/capra-living.jpg" label="Spálňa" icon={<MountainIcon/>} />
            <PH src="assets/zruby-interior.jpg" label="Kúpeľňa" icon={<MountainIcon/>} />
            <PH src="assets/capra-exterior.webp" label="Terasa" icon={<MountainIcon/>} />
            <PH src="assets/janska-dolina.jpg" label="Kuchyňa" icon={<MountainIcon/>} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontSize: 12, color: 'var(--text-mute)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            <span>5 z 48 fotografií</span>
            <button className="btn-link">Otvoriť celú galériu</button>
          </div>
        </div>
      </section>

      <section style={{ padding: '40px var(--gutter) 120px' }}>
        <div className="shell" style={{ padding: 0, display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 80, alignItems: 'start' }}>
          {/* LEFT — info */}
          <div>
            <div className="spec-grid">
              <div className="spec"><span className="l">Apartmán</span><span className="v">A2 · Lipa</span></div>
              <div className="spec"><span className="l">Kapacita</span><span className="v">2–4 os.</span></div>
              <div className="spec"><span className="l">Spálne</span><span className="v">2</span></div>
              <div className="spec"><span className="l">Plocha</span><span className="v">68 m²</span></div>
            </div>

            <div style={{ padding: '48px 0', borderBottom: '1px solid var(--line)' }}>
              <h3 className="h3" style={{ margin: '0 0 20px' }}>O apartmáne</h3>
              <p style={{ margin: '0 0 16px', color: 'var(--text-soft)', maxWidth: '60ch' }}>
                Štvorpodlažný apartmánový dom v tichej časti Liptovského Jána, päť minút pešo od termálneho
                kúpaliska OAS. Apartmán Lipa má samostatnú spálňu, denný priestor s rozkladacou pohovkou,
                plne vybavenú kuchynskú linku a kúpeľňu s dažďovou sprchou.
              </p>
              <p style={{ margin: 0, color: 'var(--text-soft)', maxWidth: '60ch' }}>
                Z terasy priamy výhľad do údolia Štiavnice. Cez zimu vyhrievaná podlaha,
                cez leto klimatizácia. WiFi v každej izbe.
              </p>
            </div>

            <div style={{ padding: '48px 0', borderBottom: '1px solid var(--line)' }}>
              <h3 className="h3" style={{ margin: '0 0 28px' }}>Vybavenie</h3>
              <div className="amenity-grid">
                <div className="amenity">{Ico.wifi}WiFi 300 Mbit</div>
                <div className="amenity">{Ico.parking}Parkovanie zdarma</div>
                <div className="amenity">{Ico.kitchen}Plne vybavená kuchyňa</div>
                <div className="amenity">{Ico.tv}Smart TV 55"</div>
                <div className="amenity">{Ico.ac}Klimatizácia</div>
                <div className="amenity">{Ico.fire}Krb v obývačke</div>
                <div className="amenity">{Ico.view}Výhľad na hory</div>
                <div className="amenity">{Ico.bbq}Spoločné BBQ</div>
                <div className="amenity">{Ico.baby}Detská postieľka</div>
                <div className="amenity">{Ico.pet}Domáce zvieratá</div>
                <div className="amenity">{Ico.sauna}Wellness v dome</div>
                <div className="amenity">{Ico.bike}Úschovňa bicyklov</div>
              </div>
            </div>

            <div style={{ padding: '48px 0', borderBottom: '1px solid var(--line)' }}>
              <h3 className="h3" style={{ margin: '0 0 24px' }}>Dostupnosť · Jún 2026</h3>
              <CalendarMini />
              <div style={{ display: 'flex', gap: 24, marginTop: 18, fontSize: 12, color: 'var(--text-mute)', letterSpacing: '0.1em' }}>
                <span><i style={{ width: 10, height: 10, background: 'var(--accent)', display: 'inline-block', marginRight: 8, borderRadius: 2 }} />Váš pobyt</span>
                <span><i style={{ width: 10, height: 10, background: 'var(--accent-soft)', display: 'inline-block', marginRight: 8, borderRadius: 2 }} />Voľné</span>
                <span><i style={{ width: 10, height: 10, background: 'var(--line)', display: 'inline-block', marginRight: 8, borderRadius: 2 }} />Obsadené</span>
              </div>
            </div>

            <div style={{ padding: '48px 0', borderBottom: '1px solid var(--line)' }}>
              <h3 className="h3" style={{ margin: '0 0 28px' }}>Sezónny cenník</h3>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
                <thead>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <th style={{ textAlign: 'left', padding: '12px 0', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-mute)', fontWeight: 500 }}>Sezóna</th>
                    <th style={{ textAlign: 'left', padding: '12px 0', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-mute)', fontWeight: 500 }}>Obdobie</th>
                    <th style={{ textAlign: 'right', padding: '12px 0', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-mute)', fontWeight: 500 }}>Cena / noc</th>
                  </tr>
                </thead>
                <tbody>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '16px 0' }}>Hlavná zimná</td>
                    <td style={{ padding: '16px 0', color: 'var(--text-soft)' }}>Vianoce, Nový rok, jarné prázdniny</td>
                    <td style={{ padding: '16px 0', textAlign: 'right', fontFamily: 'var(--font-display)', fontSize: 22 }}>160 €</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '16px 0' }}>Zimná</td>
                    <td style={{ padding: '16px 0', color: 'var(--text-soft)' }}>December — marec (mimo sviatkov)</td>
                    <td style={{ padding: '16px 0', textAlign: 'right', fontFamily: 'var(--font-display)', fontSize: 22 }}>130 €</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '16px 0' }}>Letná</td>
                    <td style={{ padding: '16px 0', color: 'var(--text-soft)' }}>Júl — august</td>
                    <td style={{ padding: '16px 0', textAlign: 'right', fontFamily: 'var(--font-display)', fontSize: 22 }}>140 €</td>
                  </tr>
                  <tr>
                    <td style={{ padding: '16px 0' }}>Mimo sezóny</td>
                    <td style={{ padding: '16px 0', color: 'var(--text-soft)' }}>Apríl — jún, september — november</td>
                    <td style={{ padding: '16px 0', textAlign: 'right', fontFamily: 'var(--font-display)', fontSize: 22 }}>95 €</td>
                  </tr>
                </tbody>
              </table>
              <p className="text-mute" style={{ fontSize: 12, marginTop: 16 }}>
                Ceny sú za apartmán a noc. Minimálna dĺžka pobytu 2 noci, cez sviatky 4 noci. Mestský poplatok 1,50 € / os / noc.
              </p>
            </div>

            <div style={{ padding: '48px 0', borderBottom: '1px solid var(--line)' }}>
              <h3 className="h3" style={{ margin: '0 0 24px' }}>Poloha</h3>
              <MiniMap onNav={onNav} />
              <p style={{ margin: '20px 0 0', color: 'var(--text-soft)', maxWidth: '60ch' }}>
                Apartmány Stagnum, Hlavná 87, 032 03 Liptovský Ján. 3 minúty autom k termálom OAS,
                8 minút k Stanišovskej jaskyni, 25 minút k lanovkám na Chopok.
              </p>
            </div>

            <div style={{ padding: '48px 0' }}>
              <h3 className="h3" style={{ margin: '0 0 24px' }}>Recenzie hostí · 9,6 / 10</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                <Review stars={5} quote="„Najkrajší výhľad z postele aký sme zažili. Komunikácia rýchla, check-in v pohode.“" who="Mária K." src="Booking" date="Okt 2025" />
                <Review stars={5} quote="„Krb fungoval skvele, vírivka v dome, deti spokojné. Vrátime sa.“" who="Tomáš V." src="Airbnb" date="Sep 2025" />
              </div>
            </div>
          </div>

          {/* RIGHT — sticky booking widget */}
          <aside>
            <div className="book-widget">
              <div>
                <div className="price-row">
                  <span className="price">130 €</span>
                  <span className="per">/ noc</span>
                </div>
                <div className="text-mute" style={{ fontSize: 12, letterSpacing: '0.1em', marginTop: 4 }}>Zimná sezóna · cena bez poplatku</div>
              </div>
              <div className="field-grid">
                <div>
                  <label>Príchod</label>
                  <div style={{ fontSize: 15 }}>14. jún 2026</div>
                </div>
                <div>
                  <label>Odchod</label>
                  <div style={{ fontSize: 15 }}>17. jún 2026</div>
                </div>
                <div style={{ gridColumn: 'span 2' }}>
                  <label>Hostia</label>
                  <div style={{ fontSize: 15 }}>2 dospelí · 0 detí</div>
                </div>
              </div>
              <div>
                <div className="calc"><span>95 € × 3 noci</span><span>285 €</span></div>
                <div className="calc"><span>Mestský poplatok</span><span>9 €</span></div>
                <div className="calc"><span>Záverečné upratovanie</span><span>35 €</span></div>
                <div className="calc total"><span>Spolu</span><span>329 €</span></div>
              </div>
              <button className="btn btn-primary btn-lg" style={{ width: '100%' }}>Rezervovať {Ico.arrowSm}</button>
              <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.1em', textAlign: 'center' }}>
                Bez poplatkov za sprostredkovanie<br/>
                Storno do 14 dní pred príchodom
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', gap: 14, fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.18em', textTransform: 'uppercase', paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                <span>Booking 9,4</span>
                <span className="dot"/>
                <span>Airbnb 4,9</span>
                <span className="dot"/>
                <span>Google 4,8</span>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

function CalendarMini() {
  // June 2026 — Mon as first day, 30 days, starts on Monday (1)
  const cells = [];
  const startDay = 0; // 0=Mon position (Mon Jun 1)
  for (let i = 0; i < startDay; i++) cells.push(<div key={`b${i}`} className="cal-cell mute">.</div>);
  const unavail = [4, 5, 6, 20, 21, 22, 23];
  const inRange = [14, 15, 16, 17];
  for (let d = 1; d <= 30; d++) {
    let cls = 'cal-cell';
    if (unavail.includes(d)) cls += ' unavail';
    else if (d === 14) cls += ' start';
    else if (d === 17) cls += ' end';
    else if (inRange.includes(d)) cls += ' in';
    cells.push(<div key={d} className={cls}>{d}</div>);
  }
  return (
    <div className="cal-mini">
      <div className="cal-h">
        <button className="btn-link" style={{ fontSize: 11 }}>‹ Máj</button>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 20 }}>Jún 2026</span>
        <button className="btn-link" style={{ fontSize: 11 }}>Júl ›</button>
      </div>
      <div className="cal-grid">
        {['Po','Ut','St','Št','Pi','So','Ne'].map((d) => <div key={d} className="cal-cell head">{d}</div>)}
        {cells}
      </div>
    </div>
  );
}

// ── Services & Akcie ────────────────────────────────────────────────────
function ServicesPage({ tweaks, onNav }) {
  return (
    <main>
      <header className="page-hero" style={{ height: 'auto', minHeight: 480 }}>
        <div className="bg"><PH src="assets/capra-living.jpg" label="Konferenčná sála · Capra" icon={<MountainIcon/>} style={{ height: '100%' }} /></div>
        <div className="content shell" style={{ padding: 0 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Služby a akcie</div>
          <h1 className="display" style={{ margin: 0, fontSize: 'clamp(60px, 7vw, 120px)', maxWidth: '12ch' }}>
            Svadby. Firmy.<br/>
            <em className="italic-script" style={{ color: 'var(--accent)' }}>Zážitky.</em>
          </h1>
        </div>
      </header>

      <section className="section tight">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div className="eyebrow">Prečo u nás</div>
          <p className="lead">
            Naše objekty nie sú len pre individuálnych hostí. V Capre máme konferenčnú miestnosť pre 40 ľudí,
            Zruby v Jáne sú vyhľadávané pre svadobné prípravy a v Stagnume bývajú firemné teambuildingy. Mimo sezóny vieme objekty
            uzavrieť pre vás celé.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <SectionHead eyebrow="Služby" title="Privátne podujatia a podporné služby." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            <ServiceTile name="Svadby" desc="Zruby v Jáne pre svadobnú noc, fotenia v doline." label="Zruby v Jáne" caseKey="svadby" onNav={onNav} src="assets/zruby-night.jpg" />
            <ServiceTile name="Firemné akcie" desc="Capra: 40-miestna konferenčná miestnosť, projektor, catering." label="Capra · konferenčka" caseKey="firmy" onNav={onNav} src="assets/capra-living.jpg" />
            <ServiceTile name="Teambuildingy" desc="Celý objekt v Stagnume, BBQ, šípky, sauna." label="Stagnum · spoločenská" caseKey="team" onNav={onNav} src="assets/stagnum-fireplace.jpg" />
            <ServiceTile name="Family stretnutia" desc="Spojené apartmány až pre 18 osôb." label="Stagnum · stôl" caseKey="family" onNav={onNav} src="assets/zruby-interior.jpg" />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead eyebrow="Doplnkové služby" title="Doladíme detaily, vy si užívajte." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              ['Transfer z letiska', 'Poprad-Tatry, Žilina, Bratislava'],
              ['Súkromný kuchár', 'Tradičné liptovské menu na večeru'],
              ['Raňajky do izby', 'Lokálne produkty, čerstvé pečivo'],
              ['Skipassy a vybavenie', 'Doručenie do apartmánu'],
              ['Wellness & masáže', 'Masér priamo k vám'],
              ['Lyžiarska a turistická škola', 'Sprievodca s licenciou'],
              ['Babysitting', 'Spoľahlivé sprostredkovanie'],
              ['Pet-friendly balík', 'Pelech, misky, prechádzkové trasy'],
              ['Predĺžené upratovanie', 'Mid-stay clean, fresh-up'],
            ].map(([n, d]) => (
              <div key={n} style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 'var(--radius-card)', background: 'var(--bg)' }}>
                <h4 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em' }}>{n}</h4>
                <p style={{ margin: 0, fontSize: 13, color: 'var(--text-soft)' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <SectionHead
            eyebrow="Aktuálne pobytové balíky"
            title={<>Akcie pre <em className="italic-script" style={{ color: 'var(--accent)' }}>každú sezónu.</em></>}
            lead="Kuratované balíky, ktoré sa menia podľa ročného obdobia."
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <PackageCard tag="Romantický pobyt" name="Termál & ticho pre dvoch" desc="2 noci v Apartmánoch Stagnum, vstup do termálov, raňajky do izby, fľaša Tokaja." priceFrom="240 €" nights="2 noci · 2 osoby" media={<PH src="assets/stagnum-fireplace.jpg" label="Stagnum · kúpeľňa" icon={<MountainIcon/>}/>} />
            <PackageCard tag="Pre rodiny" name="Letný balíček Aquapark" desc="3 noci v Apartmánoch Capra, celodenné vstupy do Tatralandie pre 2+2." priceFrom="430 €" nights="3 noci · rodina" media={<PH src="assets/capra-living.jpg" label="Capra · terasa" icon={<MountainIcon/>}/>} />
            <PackageCard tag="Skupiny" name="Zrubový víkend" desc="2 noci v Zruboch v Jáne, sauna, vírivka, grilovacie potreby, drevo do krbu." priceFrom="680 €" nights="2 noci · do 8 osôb" media={<PH src="assets/zruby-interior.jpg" label="Zruby · krb" icon={<MountainIcon/>}/>} />
            <PackageCard tag="Last minute" name="November v horách –30 %" desc="Predĺžený víkend mimo sezóny, vrátane wellness a raňajok." priceFrom="180 €" nights="3 noci · 2 osoby" media={<PH src="assets/zruby-night.jpg" label="Stagnum · obývačka" icon={<MountainIcon/>}/>} />
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <div style={{ background: 'var(--surface)', border: '1px solid var(--line-2)', 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 }}>Dopyt na podujatie</div>
              <h3 className="h2" style={{ margin: '0 0 18px', fontSize: 'clamp(36px, 3vw, 56px)' }}>Plánujete svadbu, firemnú akciu alebo špeciálnu udalosť?</h3>
              <p className="text-soft" style={{ margin: 0 }}>Odpovieme do 24 hodín s predbežnou ponukou.</p>
            </div>
            <button className="btn btn-primary btn-lg" style={{ justifySelf: 'end' }} onClick={() => onNav('kontakt')}>Poslať dopyt {Ico.arrowSm}</button>
          </div>
        </div>
      </section>
    </main>
  );
}

function ServiceTile({ name, desc, label, caseKey, onNav, src }) {
  return (
    <div className="service-tile" onClick={() => caseKey && onNav && onNav(`case-${caseKey}`)} style={caseKey ? { cursor: 'pointer' } : null}>
      <PH src={src} label={label} icon={<MountainIcon/>} style={{ position: 'absolute', inset: 0 }} />
      <div className="body">
        <h3>{name}</h3>
        <p>{desc}</p>
        {caseKey && (
          <div style={{ marginTop: 14, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 8 }}>
            Case study {Ico.arrowSm}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Attractions ─────────────────────────────────────────────────────────
function AttractionsPage({ tweaks, onNav }) {
  const [filter, setFilter] = useState('all');
  const filters = [
    { id: 'all', label: 'Všetko' },
    { id: 'cave', label: 'Jaskyne', icon: Ico.cave },
    { id: 'hike', label: 'Turistika', icon: Ico.hike },
    { id: 'bike', label: 'Cyklistika', icon: Ico.bike },
    { id: 'water', label: 'Termály', icon: Ico.water },
    { id: 'ski', label: 'Lyžovanie', icon: Ico.ski },
    { id: 'food', label: 'Gastro', icon: Ico.food },
  ];
  const attractions = [
    { cat: 'cave',  name: 'Demänovská jaskyňa slobody', dist: '12 min · Demänovská', desc: 'Najnavštevovanejšia jaskyňa na Slovensku. Sprístupnená trasa 1 145 m, vstup s lampou.', label: 'Jaskyňa slobody', src: 'assets/demanovska-dolina.jpg' },
    { cat: 'cave',  name: 'Stanišovská jaskyňa', dist: '8 min · Liptovský Ján', desc: 'Najdlhšia jaskyňa údolia Štiavnice, prístup pešo cez les. Vstup bez baterky.', label: 'Stanišovská', src: 'assets/janska-dolina.jpg' },
    { cat: 'hike',  name: 'Chopok (2 024 m)', dist: '25 min · Demänovská', desc: 'Druhý najvyšší vrch Nízkych Tatier. Lanovkou na vrch, hrebeňovka na Ďumbier.', label: 'Chopok', src: 'assets/demanovska-dolina.jpg' },
    { cat: 'hike',  name: 'Krakova hoľa', dist: '20 min · Liptovský Ján', desc: 'Hrebeňová túra ideálna na západ slnka. Stredne náročná, 5 hodín.', label: 'Krakova hoľa', src: 'assets/janska-dolina.jpg' },
    { cat: 'water', name: 'Termálne kúpalisko OAS Liptovský Ján', dist: '3 min · Liptovský Ján', desc: 'Päť termálnych bazénov, sauny, masáže. Otvorené celoročne.', label: 'OAS Liptovský Ján', src: 'assets/besenova-travertiny.jpg' },
    { cat: 'water', name: 'Aquapark Tatralandia', dist: '20 min · Liptovský Mikuláš', desc: 'Najväčší aquapark na Slovensku, 14 bazénov, tropický raj, sauny.', label: 'Tatralandia', src: 'assets/besenova-travertiny.jpg' },
    { cat: 'bike',  name: 'Cyklotrasa popri Váhu', dist: 'Od dverí', desc: '80 km asfaltová cyklotrasa od Liptovského Mikuláša po Ružomberok.', label: 'Cyklotrasa Váh', src: 'assets/janska-dolina.jpg' },
    { cat: 'ski',   name: 'Jasná Nízke Tatry', dist: '25 min · Demänovská', desc: 'Najväčšie lyžiarske stredisko na Slovensku, 50 km zjazdoviek, 30 lanoviek.', label: 'Jasná', src: 'assets/capra-exterior.webp' },
    { cat: 'food',  name: 'Koliba Patria', dist: '15 min · Demänovská', desc: 'Tradičná drevenica, vlastný oštiepok, pivo z liptovských pivovarov.', label: 'Koliba Patria', src: 'assets/zruby-interior.jpg' },
  ];
  const visible = filter === 'all' ? attractions : attractions.filter((a) => a.cat === filter);
  return (
    <main>
      <header className="page-hero" style={{ height: 'auto', minHeight: 480 }}>
        <div className="bg"><PH src="assets/demanovska-dolina.jpg" label="Demänovská dolina — pohľad zhora" icon={<MountainIcon/>} style={{ height: '100%' }} /></div>
        <div className="content shell" style={{ padding: 0 }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>Atrakcie · body záujmu</div>
          <h1 className="display" style={{ margin: 0, fontSize: 'clamp(60px, 7vw, 120px)' }}>
            Liptov je<br/><em className="italic-script" style={{ color: 'var(--accent)' }}>plný príbehov.</em>
          </h1>
        </div>
      </header>

      <section className="section tight" style={{ paddingBottom: 32 }}>
        <div className="shell">
          <MiniMap onNav={onNav} large />
        </div>
      </section>

      <section className="tight">
        <div className="shell" style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
          {filters.map((f) => (
            <button key={f.id}
              onClick={() => setFilter(f.id)}
              className="btn"
              style={{
                background: filter === f.id ? 'var(--accent)' : 'transparent',
                color: filter === f.id ? 'var(--accent-ink)' : 'var(--text)',
                border: '1px solid ' + (filter === f.id ? 'var(--accent)' : 'var(--line-2)'),
                height: 44,
                padding: '0 18px',
              }}>
              {f.icon && <span style={{ width: 14, height: 14, display: 'inline-block' }}>{f.icon}</span>}
              {f.label}
            </button>
          ))}
        </div>
      </section>

      <section className="section">
        <div className="shell" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {visible.map((a, i) => (
            <AttrCard key={a.name} a={a} flip={i % 2 === 1} />
          ))}
        </div>
      </section>
    </main>
  );
}

function AttrCard({ a, flip }) {
  return (
    <div className="attr-card" style={flip ? { gridTemplateColumns: '1fr 1fr', direction: 'rtl' } : null}>
      <div className="media" style={flip ? { direction: 'ltr' } : null}>
        <PH src={a.src} label={a.label} icon={<MountainIcon/>} style={{ height: '100%' }} />
      </div>
      <div className="body" style={flip ? { direction: 'ltr' } : null}>
        <div className="meta">
          <span>{a.cat.toUpperCase()}</span>
          <span>{a.dist}</span>
        </div>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 2.4vw, 40px)', letterSpacing: '-0.02em' }}>{a.name}</h3>
        <p style={{ margin: 0, color: 'var(--text-soft)' }}>{a.desc}</p>
        <button className="btn-link" style={{ alignSelf: 'flex-start' }}>Viac informácií {Ico.arrowSm}</button>
      </div>
    </div>
  );
}

// ── About ───────────────────────────────────────────────────────────────
function AboutPage({ tweaks, onNav }) {
  return (
    <main>
      <section style={{ padding: 'clamp(140px, 16vw, 220px) var(--gutter) clamp(60px, 8vw, 120px)' }}>
        <div className="shell" style={{ padding: 0 }}>
          <div className="eyebrow" style={{ marginBottom: 32 }}>O nás</div>
          <h1 className="display" style={{ margin: 0, maxWidth: '14ch' }}>
            Rodinný projekt v <em className="italic-script" style={{ color: 'var(--accent)' }}>srdci Liptova.</em>
          </h1>
        </div>
      </section>

      <section className="section tight" style={{ paddingTop: 0 }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
          <PH src="assets/zruby-interior.jpg" label="Rodina · portrét" icon={<MountainIcon/>} style={{ aspectRatio: '4/5', borderRadius: 'var(--radius-card)' }} />
          <div>
            <p className="lead" style={{ fontSize: 22, margin: '0 0 28px' }}>
              Liptove je značka, pod ktorou sa stretli štyri (čoskoro štyri) objekty z troch lokalít Liptova.
              Spája nás presvedčenie, že luxus nie je o pozlátku, ale o detailoch, ktoré si všimnete až keď
              odídete.
            </p>
            <p style={{ margin: '0 0 18px', color: 'var(--text-soft)', maxWidth: '60ch' }}>
              Začali sme v roku 2018 prvými apartmánmi v Liptovskom Jáne. Postupne pribudli zruby, neskôr
              apartmány v Demänovskej a v roku 2027 otvárame Mitošiny pri Aquaparku Bešeňová.
              Všetky objekty spravujeme priamo — žiadne franchise, žiadne sprostredkovateľské agentúry.
            </p>
            <p style={{ margin: 0, color: 'var(--text-soft)', maxWidth: '60ch' }}>
              Hostí prijímame osobne. V kuchyni nájdete od nás čerstvé pečivo a kávu z liptovskej pražiarne.
              Pomôžeme s rezerváciou skipassov, s odporúčaním obľúbeného sprievodcu, s rezerváciou stola
              v miestnej kolibe.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="stats">
            <div className="stat"><div className="n">2018</div><div className="l">Začiatok projektu</div></div>
            <div className="stat"><div className="n">4</div><div className="l">Objekty</div></div>
            <div className="stat"><div className="n">3</div><div className="l">Doliny</div></div>
            <div className="stat"><div className="n">9,4</div><div className="l">Priemerné hodnotenie</div></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <SectionHead eyebrow="Naše princípy" title="Štyri veci, na ktorých nezmeníme." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            {[
              ['01', 'Vlastná správa', 'Žiadny call center, žiadny outsourcing. Píšete priamo nám, odpovedáme priemerne do 38 minút.'],
              ['02', 'Lokálne suroviny', 'Mlieko z farmy v Pavčinej Lehote, oštiepky z Východnej, drevo z miestnej píly.'],
              ['03', 'Bez skrytých poplatkov', 'Cena, ktorú vidíte pri rezervácii, je cena, ktorú zaplatíte. Mestský poplatok je vyčíslený zvlášť.'],
              ['04', 'Detail nad rozmach', 'Radšej štyri objekty, o ktoré sa staráme osobne, ako štyridsať, kde je každý hosť číslo.'],
            ].map(([n, t, d]) => (
              <div key={n} style={{ padding: 36, border: '1px solid var(--line)', borderRadius: 'var(--radius-card)', display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--accent)' }}>{n}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 32, margin: 0, letterSpacing: '-0.02em' }}>{t}</h3>
                <p style={{ margin: 0, color: 'var(--text-soft)' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Contact ─────────────────────────────────────────────────────────────
function ContactPage({ tweaks, onNav }) {
  return (
    <main>
      <section style={{ padding: 'clamp(140px, 16vw, 200px) var(--gutter) clamp(60px, 8vw, 120px)' }}>
        <div className="shell" style={{ padding: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 32 }}>Kontakt</div>
            <h1 className="h1" style={{ margin: '0 0 32px' }}>
              Napíšte nám. <em className="italic-script" style={{ color: 'var(--accent)' }}>Radi pomôžeme.</em>
            </h1>
            <p className="lead" style={{ margin: '0 0 48px' }}>
              Odpovedáme priemerne do 38 minút v pracovnej dobe a do druhého dňa cez víkend.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              <ContactRow icon={Ico.phone} label="Telefón" value="+421 905 123 456" sub="Pondelok — nedeľa, 8:00 — 20:00" />
              <ContactRow icon={Ico.mail}  label="E-mail" value="info@liptove.sk" sub="Rezervácie, dopyty na podujatia" />
              <ContactRow icon={Ico.pin}   label="Recepcia" value="Hlavná 87, 032 03 Liptovský Ján" sub="Pondelok — nedeľa, 14:00 — 19:00" />
            </div>

            <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
              <h4 style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--text-mute)', margin: '0 0 16px', fontWeight: 500 }}>Sledujte nás</h4>
              <div style={{ display: 'flex', gap: 12 }}>
                <a href="#" className="btn btn-ghost btn-sm"><span style={{ width: 14, height: 14, display: 'inline-block' }}>{Ico.ig}</span>@liptove</a>
                <a href="#" className="btn btn-ghost btn-sm"><span style={{ width: 14, height: 14, display: 'inline-block' }}>{Ico.fb}</span>Liptove</a>
              </div>
            </div>
          </div>

          <div className="card" style={{ padding: 'clamp(32px, 4vw, 56px)' }}>
            <h3 className="h3" style={{ margin: '0 0 32px' }}>Pošlite správu</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field-stack"><label>Meno</label><input className="input" placeholder="Jana Nováková" /></div>
                <div className="field-stack"><label>Telefón</label><input className="input" placeholder="+421 ..." /></div>
              </div>
              <div className="field-stack"><label>E-mail</label><input className="input" placeholder="jana@example.com" /></div>
              <div className="field-stack">
                <label>Téma dopytu</label>
                <select className="input">
                  <option>Rezervácia pobytu</option>
                  <option>Svadba</option>
                  <option>Firemná akcia</option>
                  <option>Iné</option>
                </select>
              </div>
              <div className="field-stack"><label>Správa</label><textarea className="input textarea" placeholder="Termín, počet osôb, špeciálne požiadavky..." /></div>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 8 }}>Odoslať dopyt {Ico.arrowSm}</button>
              <p className="text-mute" style={{ fontSize: 11, margin: 0 }}>
                Odoslaním súhlasíte so spracovaním osobných údajov za účelom vybavenia dopytu.
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function ContactRow({ icon, label, value, sub }) {
  return (
    <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
      <span style={{ width: 22, height: 22, color: 'var(--accent)', marginTop: 4, flexShrink: 0 }}>{icon}</span>
      <div>
        <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, letterSpacing: '-0.01em' }}>{value}</div>
        <div className="text-mute" style={{ fontSize: 13, marginTop: 4 }}>{sub}</div>
      </div>
    </div>
  );
}

// ── Coming soon (Bešeňová/Mitošiny) ────────────────────────────────────
function ComingSoonPage({ tweaks, onNav }) {
  return (
    <main>
      <section className="cs-hero">
        <div className="bg"><PH src="assets/besenova-travertiny.jpg" label="Bešeňová · stavenisko · vizualizácia" icon={<MountainIcon/>} style={{ height: '100%' }} /></div>
        <div className="content">
          <div className="eyebrow" style={{ justifyContent: 'center', marginBottom: 32 }}>Bešeňová · pripravujeme · otvorenie 2027</div>
          <h1 className="display" style={{ margin: '0 0 28px' }}>
            <em className="italic-script">Mitošiny.</em>
          </h1>
          <p className="lead" style={{ margin: '0 auto 40px', textAlign: 'center', maxWidth: '52ch' }}>
            Nový apartmánový komplex pri Aquaparku Bešeňová.
            Termály za rohom, výhľad na Chočské vrchy, otvárame leto 2027.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-lg">Pridať sa do zoznamu záujemcov {Ico.arrowSm}</button>
            <button className="btn btn-ghost btn-lg" onClick={() => onNav('regiony')}>Pozrieť hotové objekty</button>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="shell">
          <div className="stats">
            <div className="stat"><div className="n">2027</div><div className="l">Otvorenie</div></div>
            <div className="stat"><div className="n">16</div><div className="l">Apartmánov</div></div>
            <div className="stat"><div className="n">2 — 8</div><div className="l">Osôb / apartmán</div></div>
            <div className="stat"><div className="n">2 min</div><div className="l">K Aquaparku</div></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
          <PH src="assets/capra-exterior.webp" label="Vizualizácia · exteriér" icon={<MountainIcon/>} style={{ aspectRatio: '4/3', borderRadius: 'var(--radius-card)' }} />
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>O projekte</div>
            <h2 className="h2" style={{ margin: '0 0 24px' }}>Apartmány s vlastným prístupom k vode.</h2>
            <p style={{ margin: '0 0 18px', color: 'var(--text-soft)' }}>
              Bešeňová sa stala za posledných 15 rokov najnavštevovanejším termálnym strediskom na Liptove.
              Mitošiny stoja priamo pri vstupe do Aquaparku, s vlastným privátnym vstupom pre ubytovaných.
            </p>
            <p style={{ margin: 0, color: 'var(--text-soft)' }}>
              Apartmány od 1+kk po 4-izbové, s balkónmi do dvora a výhľadom na Chočské vrchy.
            </p>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead eyebrow="Časová os" title="Kde sme práve teraz." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
            {[
              ['2024', 'Pozemok získaný', 'done'],
              ['2025', 'Projekt + povolenia', 'done'],
              ['2026', 'Hrubá stavba', 'now'],
              ['2027', 'Otvorenie', 'next'],
            ].map(([y, l, s]) => (
              <div key={y} style={{ padding: 32, borderRight: '1px solid var(--line)', position: 'relative' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, letterSpacing: '-0.03em' }}>{y}</div>
                <div className="text-mute" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 8 }}>{l}</div>
                <div style={{ position: 'absolute', top: 28, right: 28, width: 10, height: 10, borderRadius: 999, background: s === 'done' ? 'var(--accent)' : s === 'now' ? 'transparent' : 'var(--line-2)', border: s === 'now' ? '2px solid var(--accent)' : 'none' }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell" style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', marginBottom: 24 }}>Predregistrácia</div>
          <h2 className="h2" style={{ margin: '0 0 24px' }}>Buďte prví, čo sa dozvedia o otvorení.</h2>
          <p className="lead" style={{ margin: '0 auto 28px' }}>
            Pošleme e-mail v deň, keď spustíme rezervácie. Hostia v zozname dostanú 10 % na prvý pobyt.
          </p>
          <form style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }} onSubmit={(e) => e.preventDefault()}>
            <input className="input" placeholder="vas@email.sk" style={{ flex: '1 1 280px', maxWidth: 380 }} />
            <button className="btn btn-primary" type="submit">Pridať ma do zoznamu</button>
          </form>
        </div>
      </section>
    </main>
  );
}

// ── Regiony index page (used by 'regiony' nav) ─────────────────────────
function RegionsPage({ tweaks, onNav }) {
  return (
    <main>
      <section style={{ padding: 'clamp(140px, 16vw, 200px) var(--gutter) 0' }}>
        <div className="shell" style={{ padding: 0 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Regióny</div>
          <h1 className="h1" style={{ margin: '0 0 32px' }}>
            Vyberte si <em className="italic-script" style={{ color: 'var(--accent)' }}>vašu dolinu.</em>
          </h1>
          <p className="lead" style={{ margin: 0, marginBottom: 64 }}>
            Štyri objekty v troch lokalitách Liptova. Každá z lokalít má vlastný charakter — vyberte podľa
            ročnej doby, dôvodu cesty alebo veľkosti skupiny.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="shell">
          <RegionGrid layout={tweaks.regionLayout} onNav={onNav} />
        </div>
      </section>

      {/* COMPARE STRIP — tabular at-a-glance facts */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead eyebrow="Rýchle porovnanie" title="Tri regióny vedľa seba." />
          <CompareTable onNav={onNav} />
        </div>
      </section>

      {/* SEASONAL — best moment per region */}
      <section className="section">
        <div className="shell">
          <SectionHead
            eyebrow="Sezónny sprievodca"
            title={<>Kedy je <em className="italic-script" style={{ color: 'var(--accent)' }}>najlepšie</em> prísť kam.</>}
            lead="Liptov je celoročná destinácia, ale každá z dolín má svoj vrchol."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            <SeasonCard season="Jar" months="Apríl — Jún" best="Liptovský Ján" desc="Termály bez davov, prvé hrebeňovky, vodopády po roztopení snehu." accent />
            <SeasonCard season="Leto" months="Júl — August" best="Bešeňová · 2027" desc="Aquapark, cyklotrasa popri Váhu, hubárčenie v dolinách." />
            <SeasonCard season="Jeseň" months="September — Október" best="Demänovská" desc="Farebné hrebene, posledné lanovky, krb a sauna večer." accent />
            <SeasonCard season="Zima" months="December — Marec" best="Demänovská" desc="Jasná za 5 minút, ski-in/out z Capry, večer wellness v Stagnume." />
          </div>
        </div>
      </section>

      {/* MATCHMAKER — "for whom" */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead
            eyebrow="Najlepšie pre vás"
            title="Pomôžeme vám vybrať."
            lead="Podľa toho, s kým a prečo cestujete."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            <MatchTile icon={Ico.water} who="Pre páry" region="Liptovský Ján" obj="Apartmány Stagnum" reason="Termály, ticho, raňajky do izby." route="region-jan" onNav={onNav} />
            <MatchTile icon={Ico.baby}  who="Pre rodiny" region="Bešeňová · 2027" obj="Mitošiny (pripr.)" reason="Aquapark vedľa, plocha v dome, varná zóna." route="coming" onNav={onNav} />
            <MatchTile icon={Ico.ski}   who="Pre lyžiarov" region="Demänovská Dolina" obj="Apartmány Capra" reason="Ski-in/out, lanovka 5 min, úschovňa lyží." route="region-dem" onNav={onNav} />
            <MatchTile icon={Ico.fire}  who="Pre skupiny" region="Liptovský Ján" obj="Zruby v Jáne" reason="Do 8 osôb, krb, sauna, vírivka, BBQ." route="region-jan" onNav={onNav} />
            <MatchTile icon={Ico.hike}  who="Pre turistov" region="Demänovská Dolina" obj="Apartmány Capra" reason="Hrebeň Chopok–Ďumbier z dverí." route="region-dem" onNav={onNav} />
            <MatchTile icon={Ico.pet}   who="S domácimi zvieratami" region="Liptovský Ján" obj="Zruby v Jáne" reason="Oplotený pozemok, ležovisko v zrube." route="region-jan" onNav={onNav} />
          </div>
        </div>
      </section>

      {/* MAP */}
      <section className="section">
        <div className="shell">
          <SectionHead
            eyebrow="Mapa Liptova"
            title={<>Tri lokality, <em className="italic-script" style={{ color: 'var(--accent)' }}>jeden kraj.</em></>}
          />
          <MiniMap onNav={onNav} large />
        </div>
      </section>

      {/* FAQ */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Časté otázky</div>
            <h2 className="h2" style={{ margin: 0 }}>
              Stále si <em className="italic-script" style={{ color: 'var(--accent)' }}>neviete</em> vybrať?
            </h2>
          </div>
          <FAQList items={[
            ['Aký je rozdiel medzi Liptovským Jánom a Demänovskou?',
             'Ján je tichý, termálny, rodinný — vhodný pre wellness pobyty a páry. Demänovská je rušnejšia, lyžiarska a turistická — ideálna pre aktívnu dovolenku. Vzdialenosť medzi nimi je 25 minút autom.'],
            ['Ktorý región je najlepší v zime?',
             'Demänovská Dolina jednoznačne — máte 5 minút na lanovku a hostia s Capry parkujú priamo pri zjazdovke. Ján ponúka pokoj po lyžovaní a termály — krásna kombinácia, ak nechcete spať priamo pod kopcom.'],
            ['Sú objekty pet-friendly?',
             'Zruby v Jáne áno, bez poplatku. Stagnum a Capra po dohode, malé plemená do 15 kg, poplatok 15 €/pobyt.'],
            ['Bešeňová — kedy presne otvárate?',
             'Plánované otvorenie leto 2027 (jún). Stavebné práce začali v marci 2026. Predregistrujte sa, dáme vám vedieť ako prvým a získate 10 % na prvý pobyt.'],
            ['Vieme rezervovať priamo, alebo cez Booking?',
             'Najvýhodnejšie je priamo cez náš web — garantujeme najlepšiu cenu, flexibilné storno do 14 dní pred príchodom a žiadne sprostredkovateľské poplatky.'],
          ]} />
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="shell" style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', marginBottom: 24 }}>Pomôžeme</div>
          <h2 className="h2" style={{ margin: '0 0 24px' }}>Nie ste si istí? Napíšte nám.</h2>
          <p className="lead" style={{ margin: '0 auto 32px' }}>
            Pošlite nám pár slov o tom, kedy a s kým cestujete. Odporučíme vám konkrétny apartmán
            do 24 hodín — bez záväzku.
          </p>
          <button className="btn btn-primary btn-lg" onClick={() => onNav('kontakt')}>Napísať nám {Ico.arrowSm}</button>
        </div>
      </section>
    </main>
  );
}

function CompareTable({ onNav }) {
  const rows = [
    { label: 'Charakter',     a: 'Tichý, termálny',          b: 'Hory, lyže, ruch',     c: 'Wellness, aquapark' },
    { label: 'Objekty',       a: 'Stagnum + Zruby',          b: 'Capra',                c: 'Mitošiny (2027)' },
    { label: 'Lôžka spolu',   a: '22 lôžok',                 b: '16 lôžok',             c: '~60 lôžok' },
    { label: 'K vleku Jasná', a: '25 min',                   b: '5 min',                c: '40 min' },
    { label: 'K termálom',    a: '3 min (OAS)',              b: '25 min (Tatralandia)', c: '0 min (Aquapark)' },
    { label: 'Pet-friendly',  a: 'Áno (Zruby) · po doh. (Stagnum)', b: 'Po dohode',     c: 'Plánované áno' },
    { label: 'Cena od / noc', a: '95 €',                     b: '120 €',                c: 'TBA' },
  ];
  return (
    <div style={{ border: '1px solid var(--line)', borderRadius: 'var(--radius-card)', overflow: 'hidden', background: 'var(--bg)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', borderBottom: '1px solid var(--line)' }}>
        <div style={{ padding: '24px 28px', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-mute)' }}></div>
        <RegionHeadCell name="Liptovský Ján" sub="2 objekty" onClick={() => onNav('region-jan')} />
        <RegionHeadCell name="Demänovská" sub="1 objekt" onClick={() => onNav('region-dem')} />
        <RegionHeadCell name="Bešeňová" sub="Pripravujeme" onClick={() => onNav('coming')} wip />
      </div>
      {rows.map((r, i) => (
        <div key={r.label} style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--line)' }}>
          <div style={{ padding: '18px 28px', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-mute)' }}>{r.label}</div>
          <div style={{ padding: '18px 28px', fontSize: 14, color: 'var(--text-soft)' }}>{r.a}</div>
          <div style={{ padding: '18px 28px', fontSize: 14, color: 'var(--text-soft)' }}>{r.b}</div>
          <div style={{ padding: '18px 28px', fontSize: 14, color: 'var(--text-mute)' }}>{r.c}</div>
        </div>
      ))}
    </div>
  );
}

function RegionHeadCell({ name, sub, onClick, wip }) {
  return (
    <button onClick={onClick} style={{
      padding: '24px 28px',
      background: 'transparent',
      border: 0,
      borderLeft: '1px solid var(--line)',
      textAlign: 'left',
      color: 'inherit',
      display: 'flex', flexDirection: 'column', gap: 4,
      cursor: 'pointer',
    }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '-0.02em' }}>{name}</div>
      <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: wip ? 'var(--accent)' : 'var(--text-mute)' }}>{sub}</div>
    </button>
  );
}

function SeasonCard({ season, months, best, desc, accent }) {
  return (
    <div style={{
      padding: 28,
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius-card)',
      background: accent ? 'var(--accent-soft)' : 'var(--surface)',
      display: 'flex', flexDirection: 'column', gap: 14,
      minHeight: 240,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 32, letterSpacing: '-0.02em', color: accent ? 'var(--accent)' : 'var(--text)' }}>{season}</span>
        <span className="text-mute" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{months}</span>
      </div>
      <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Najlepšie pre</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.01em' }}>{best}</div>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--text-soft)', marginTop: 'auto' }}>{desc}</p>
    </div>
  );
}

function MatchTile({ icon, who, region, obj, reason, route, onNav }) {
  return (
    <button onClick={() => onNav(route)} style={{
      padding: 28,
      background: 'var(--bg)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius-card)',
      textAlign: 'left',
      color: 'inherit',
      cursor: 'pointer',
      display: 'flex', flexDirection: 'column', gap: 14,
      transition: 'border-color 200ms ease, transform 200ms ease',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
    onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      <span style={{ width: 22, height: 22, color: 'var(--accent)' }}>{icon}</span>
      <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{who}</div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '-0.01em', lineHeight: 1.15 }}>{obj}</div>
      <div style={{ fontSize: 12, color: 'var(--text-mute)' }}>{region}</div>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--text-soft)' }}>{reason}</p>
      <span style={{ marginTop: 'auto', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 8 }}>
        Pozrieť {Ico.arrowSm}
      </span>
    </button>
  );
}

function FAQList({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      {items.map(([q, a], i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
            <button
              onClick={() => setOpen(isOpen ? -1 : i)}
              style={{
                width: '100%', padding: '24px 0',
                background: 'transparent', border: 0,
                color: 'inherit', textAlign: 'left',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                cursor: 'pointer',
                fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '-0.01em',
                lineHeight: 1.2,
              }}>
              <span>{q}</span>
              <span style={{
                width: 28, height: 28, borderRadius: 999, border: '1px solid var(--line-2)',
                display: 'grid', placeItems: 'center', flexShrink: 0,
                background: isOpen ? 'var(--accent)' : 'transparent',
                color: isOpen ? 'var(--accent-ink)' : 'var(--text)',
                fontSize: 18, lineHeight: 1, transition: 'all 200ms ease',
              }}>{isOpen ? '−' : '+'}</span>
            </button>
            {isOpen && (
              <div style={{ padding: '0 0 24px', color: 'var(--text-soft)', maxWidth: '70ch' }}>{a}</div>
            )}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { RegionPage, RegionsPage, ObjectPage, ServicesPage, AttractionsPage, AboutPage, ContactPage, ComingSoonPage });