// home.jsx — Liptove homepage

function HomePage({ tweaks, onNav }) {
  const heroMode = tweaks.hero;
  return (
    <main>
      {/* ── HERO ───────────────────────────────────────────────────── */}
      {heroMode === 'video' && <HomeHeroVideo onNav={onNav} />}
      {heroMode === 'map' && <HomeHeroMap onNav={onNav} />}
      {heroMode === 'split' && <HomeHeroSplit onNav={onNav} />}

      {/* ── INTRO STATEMENT ────────────────────────────────────────── */}
      <section className="section tight">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
          <div className="eyebrow">Vitajte na Liptove</div>
          <div>
            <h2 className="h2" style={{ margin: '0 0 28px' }}>
              Štyri objekty.<br/>
              Tri doliny.<br/>
              <em className="italic-script" style={{ color: 'var(--accent)' }}>Jeden Liptov.</em>
            </h2>
            <p className="lead" style={{ margin: 0 }}>
              Liptove zastrešuje kuratovanú rodinu apartmánov a zrubov v Liptovskom Jáne,
              Demänovskej Doline a čoskoro aj v Bešeňovej. Bez kompromisov v komforte,
              bez prílišného hluku okolo. Len pokoj, výhľad a presne toľko luxusu,
              aby sa hostia cítili ako doma — len krajšie.
            </p>
          </div>
        </div>
      </section>

      {/* ── REGIONS ────────────────────────────────────────────────── */}
      <section className="section" id="regiony-anchor">
        <div className="shell">
          <SectionHead
            eyebrow="Tri regióny — tri svety"
            title={<>Vyberte si <em className="italic-script" style={{ color: 'var(--accent)' }}>vašu dolinu.</em></>}
            lead="Každá z lokalít má vlastný charakter. Od termálnych prameňov v Jáne, cez ticho Demänovskej, po nadchádzajúce wellness leto v Bešeňovej."
          />
          <RegionGrid layout={tweaks.regionLayout} onNav={onNav} />
        </div>
      </section>

      {/* ── FEATURED OBJECTS ──────────────────────────────────────── */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead
            eyebrow="Naše objekty"
            title="Štyri adresy. Každá iný príbeh."
            action={<button className="btn btn-ghost btn-sm" onClick={() => onNav('regiony')}>Všetky objekty {Ico.arrowSm}</button>}
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 120 }}>
            <FeatureRow
              num="01 / 04"
              region="Liptovský Ján"
              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"
              onNav={onNav}
            />
            <FeatureRow
              num="02 / 04"
              region="Liptovský Ján"
              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"
              flip
              onNav={onNav}
            />
            <FeatureRow
              num="03 / 04"
              region="Demänovská Dolina"
              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"
              onNav={onNav}
            />
            <FeatureRow
              num="04 / 04"
              region="Bešeňová"
              name="Mitošiny"
              tagline="Pripravujeme — nové apartmány pri akvaparku"
              specs={['Otvorenie 2027', 'Apartmány', 'Wellness', 'Pri Aquapark Bešeňová']}
              src="assets/besenova-travertiny.jpg"
              wip
              flip
              onNav={onNav}
            />
          </div>
        </div>
      </section>

      {/* ── STATS STRIP ───────────────────────────────────────────── */}
      <section className="tight">
        <div className="shell">
          <div className="stats">
            <div className="stat"><div className="n">4</div><div className="l">Objekty</div></div>
            <div className="stat"><div className="n">38</div><div className="l">Lôžok celkom</div></div>
            <div className="stat"><div className="n">9.4</div><div className="l">Booking rating</div></div>
            <div className="stat"><div className="n">1 200+</div><div className="l">Spokojných hostí</div></div>
          </div>
        </div>
      </section>

      {/* ── MAP TEASE ─────────────────────────────────────────────── */}
      <section className="section">
        <div className="shell">
          <SectionHead
            eyebrow="Liptov na mape"
            title={<>Tri lokality, <em className="italic-script" style={{ color: 'var(--accent)' }}>jeden kraj.</em></>}
            action={<button className="btn btn-ghost btn-sm" onClick={() => onNav('atrakcie')}>Otvoriť mapu atrakcií {Ico.arrowSm}</button>}
          />
          <MiniMap onNav={onNav} />
        </div>
      </section>

      {/* ── ATTRACTIONS TEASER ────────────────────────────────────── */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead
            eyebrow="Čo zažiť"
            title="Liptov je viac ako apartmán."
            lead="Jaskyne, hrebene Nízkych Tatier, termály, cyklotrasy popri Váhu. Pripravili sme zoznam tých najlepších bodov záujmu — všetky do 30 minút od našich objektov."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            <MiniAttr icon={Ico.cave} label="Jaskyne" count="6 jaskýň" desc="Demänovská, Stanišovská, Ľadová" />
            <MiniAttr icon={Ico.hike} label="Turistika" count="120+ km trás" desc="Nízke Tatry, Chočské vrchy" />
            <MiniAttr icon={Ico.bike} label="Cyklistika" count="80 km cyklotrás" desc="Cyklotrasa popri Váhu" />
            <MiniAttr icon={Ico.water} label="Wellness" count="3 termály" desc="Bešeňová, Tatralandia, Lúčky" />
            <MiniAttr icon={Ico.ski} label="Lyžovanie" count="Chopok 25 min" desc="Jasná, BB Demänová" />
            <MiniAttr icon={Ico.food} label="Gastronómia" count="Lokálne chute" desc="Bryndza, žinčica, oštiepok" />
          </div>
          <div style={{ marginTop: 56, textAlign: 'center' }}>
            <button className="btn btn-ghost" onClick={() => onNav('atrakcie')}>Všetky atrakcie a tipy {Ico.arrowSm}</button>
          </div>
        </div>
      </section>

      {/* ── PACKAGES / AKCIE ──────────────────────────────────────── */}
      <section className="section">
        <div className="shell">
          <SectionHead
            eyebrow="Aktuálne pobytové balíky"
            title={<>Sezónne ponuky a <em className="italic-script" style={{ color: 'var(--accent)' }}>akcie.</em></>}
            action={<button className="btn btn-ghost btn-sm" onClick={() => onNav('sluzby')}>Všetky balíky {Ico.arrowSm}</button>}
          />
          <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/>} />}
            />
          </div>
        </div>
      </section>

      {/* ── REVIEWS ───────────────────────────────────────────────── */}
      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead
            eyebrow="Recenzie hostí"
            title={<>Hodnotenie <em className="italic-script" style={{ color: 'var(--accent)' }}>9,4 / 10</em></>}
            lead="Sumár hodnotení naprieč Booking, Airbnb, Megaubytovanie a Google."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            <Review
              stars={5}
              quote="„Apartmán bol presne taký, ako na fotkách — len ešte krajší. Výhľad na hory z postele, ticho. Vrátime sa.“"
              who="Mária K."
              src="Booking · Apartmány Stagnum"
              date="Október 2025"
            />
            <Review
              stars={5}
              quote="„Zrub bol pre 6 ľudí ideálny. Vírivka pod hviezdami, sauna večer. Komunikácia s majiteľmi výborná.“"
              who="Tomáš V."
              src="Airbnb · Zruby v Jáne"
              date="September 2025"
            />
            <Review
              stars={5}
              quote="„Capra v Demänovke — ráno na Chopku, večer pri krbe. Lepšiu polohu sme nenašli.“"
              who="Anna & Peter"
              src="Google · Apartmány Capra"
              date="Február 2026"
            />
          </div>
        </div>
      </section>

      {/* ── INSTAGRAM ─────────────────────────────────────────────── */}
      <section className="section">
        <div className="shell">
          <SectionHead
            eyebrow="@liptove na Instagrame"
            title="Nech krajina hovorí."
            action={<a href="#" className="btn btn-ghost btn-sm">Sledovať {Ico.arrowSm}</a>}
          />
          <div className="ig-grid">
            {(() => {
              const igPool = [
                'assets/janska-dolina.jpg',
                'assets/demanovska-dolina.jpg',
                'assets/zruby-night.jpg',
                'assets/stagnum-fireplace.jpg',
                'assets/capra-living.jpg',
                'assets/capra-exterior.webp',
                'assets/zruby-interior.jpg',
                'assets/besenova-travertiny.jpg',
              ];
              return Array.from({ length: 12 }).map((_, i) => (
                <PH key={i} className="ig-tile" src={igPool[i % igPool.length]} label={`IG-${String(i+1).padStart(2,'0')}`} />
              ));
            })()}
          </div>
        </div>
      </section>

      {/* ── CLOSING CTA ───────────────────────────────────────────── */}
      <section className="section">
        <div className="shell" style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto' }}>
          <div className="eyebrow" style={{ justifyContent: 'center', marginBottom: 28 }}>Začnite plánovať</div>
          <h2 className="display" style={{ margin: '0 0 32px', fontSize: 'clamp(56px, 7vw, 110px)' }}>
            Pokoj. <em className="italic-script" style={{ color: 'var(--accent)' }}>Výhľad.</em> Liptov.
          </h2>
          <p className="lead" style={{ margin: '0 auto 40px' }}>
            Rezervujte priamo u nás — bez sprostredkovateľov, s garanciou najlepšej ceny
            a flexibilným storno do 14 dní pred príchodom.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav('regiony')}>Prezrieť objekty {Ico.arrowSm}</button>
            <button className="btn btn-ghost btn-lg" onClick={() => onNav('kontakt')}>Kontaktovať nás</button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── Hero variants ─────────────────────────────────────────────────
function HomeHeroVideo({ onNav }) {
  const [dateState, setDateState] = useState({ checkIn: '14. jún', checkOut: '17. jún', guests: '2 dospelí', location: 'Liptovský Ján' });
  const heroImages = [
    'assets/janska-dolina.jpg',
    'assets/zruby-night.jpg',
    'assets/demanovska-dolina.jpg',
  ];
  return (
    <header className="hero">
      <div className="hero-bg">
        {heroImages.map((src, i) => (
          <div key={i} className="video-layer" style={{ backgroundImage: `url(${src})` }} />
        ))}
        {/* faint mountain silhouette */}
        <svg viewBox="0 0 1600 900" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.35, pointerEvents: 'none' }}>
          <path d="M0 780 L150 660 L300 720 L500 580 L680 700 L880 580 L1080 680 L1280 600 L1480 720 L1600 660 L1600 900 L0 900 Z" fill="rgba(8,10,9,0.55)"/>
        </svg>
      </div>

      <div className="hero-content shell" style={{ padding: 0 }}>
        <div className="hero-meta">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Apartmány & zruby na Liptove</div>
            <h1 className="hero-title">
              Pokoj.<br/>
              Výhľad.<br/>
              <em>Liptov.</em>
            </h1>
          </div>
          <div className="hero-counter">
            <div>
              <div style={{ color: 'var(--text-mute)', marginBottom: 6 }}>Práve zobrazené</div>
              <div className="num">Liptovský Ján · 01 / 03</div>
            </div>
          </div>
        </div>

        <div className="booking-strip">
          <div className="field">
            <label>Lokalita</label>
            <span className="val">{dateState.location}</span>
          </div>
          <div className="field">
            <label>Príchod</label>
            <span className="val">{dateState.checkIn}</span>
          </div>
          <div className="field">
            <label>Odchod</label>
            <span className="val">{dateState.checkOut}</span>
          </div>
          <div className="field">
            <label>Hostia</label>
            <span className="val">{dateState.guests}</span>
          </div>
          <button className="btn btn-primary" onClick={() => onNav('object')}>Vyhľadať voľné termíny</button>
        </div>
      </div>
    </header>
  );
}

function HomeHeroMap({ onNav }) {
  return (
    <header className="hero" style={{ padding: '120px var(--gutter) 80px', alignItems: 'flex-start' }}>
      <div className="hero-bg" style={{ background: 'var(--surface)' }} />
      <div className="hero-content shell" style={{ position: 'relative' }}>
        <div className="eyebrow" style={{ marginBottom: 28 }}>Apartmány & zruby na Liptove</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
          <div>
            <h1 className="hero-title" style={{ fontSize: 'clamp(56px, 6vw, 96px)' }}>
              Vyberte si<br/>
              <em>vašu dolinu.</em>
            </h1>
            <p className="lead" style={{ marginTop: 28 }}>
              Štyri objekty v troch lokalitách. Začnite priamo na mape — vyberte miesto,
              ktoré sa vám hodí najviac.
            </p>
            <button className="btn btn-primary btn-lg" style={{ marginTop: 32 }} onClick={() => onNav('regiony')}>
              Prezrieť všetky objekty {Ico.arrowSm}
            </button>
          </div>
          <MiniMap onNav={onNav} large />
        </div>
      </div>
    </header>
  );
}

function HomeHeroSplit({ onNav }) {
  return (
    <header className="hero" style={{ padding: '120px var(--gutter) 60px', alignItems: 'stretch' }}>
      <div className="hero-bg" style={{ background: 'var(--bg)' }} />
      <div className="hero-content shell" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Apartmány & zruby na Liptove</div>
          <h1 className="hero-title" style={{ fontSize: 'clamp(64px, 8vw, 132px)' }}>
            Pokoj.<br/>
            Výhľad.<br/>
            <em>Liptov.</em>
          </h1>
          <div style={{ display: 'flex', gap: 14, marginTop: 40 }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav('regiony')}>Objaviť objekty {Ico.arrowSm}</button>
            <button className="btn btn-ghost btn-lg" onClick={() => onNav('atrakcie')}>Atrakcie</button>
          </div>
        </div>
        <PH src="assets/stagnum-fireplace.jpg" alt="Apartmán Stagnum" style={{ aspectRatio: '4/5', borderRadius: 'var(--radius-card)' }} />
      </div>
    </header>
  );
}

// ── Region grid ───────────────────────────────────────────────────
function RegionGrid({ layout, onNav }) {
  const regions = [
    { id: 'ljan', route: 'region-jan', name: 'Liptovský Ján', count: '2 objekty', vibe: 'Termály · pokoj', desc: 'Termálne pramene, údolie Štiavnice, krátka prechádzka k jaskyni.', label: 'Liptovský Ján — údolie', src: 'assets/janska-dolina.jpg' },
    { id: 'dem',  route: 'region-dem', name: 'Demänovská Dolina', count: '1 objekt', vibe: 'Hory · Chopok', desc: 'Päť minút od kabínkovej lanovky, hodina od ruchu mesta.', label: 'Demänovská — Chopok', src: 'assets/demanovska-dolina.jpg' },
    { id: 'bes',  route: 'coming', name: 'Bešeňová', count: 'Pripravujeme', vibe: 'Wellness · 2027', desc: 'Apartmány Mitošiny pri Aquaparku Bešeňová.', label: 'Bešeňová — termály', wip: true, src: 'assets/besenova-travertiny.jpg' },
  ];

  if (layout === 'cards') {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {regions.map((r) => <RegionCard key={r.id} r={r} onNav={onNav} />)}
      </div>
    );
  }
  if (layout === 'mosaic') {
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gridTemplateRows: 'repeat(2, minmax(280px, 1fr))', gap: 12, height: '78vh' }}>
        <div style={{ gridRow: 'span 2' }}><RegionCard r={regions[0]} onNav={onNav} fill /></div>
        <RegionCard r={regions[1]} onNav={onNav} fill />
        <RegionCard r={regions[2]} onNav={onNav} fill />
      </div>
    );
  }
  // fullbleed-split
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {regions.map((r, i) => (
        <div key={r.id} style={{ display: 'grid', gridTemplateColumns: i % 2 ? '1fr 1.4fr' : '1.4fr 1fr', gap: 16, alignItems: 'stretch', height: 320 }}>
          {i % 2 === 0 ? (
            <>
              <PH src={r.src} label={r.label} icon={<MountainIcon/>} style={{ borderRadius: 'var(--radius-card)' }} />
              <RegionInline r={r} onNav={onNav} />
            </>
          ) : (
            <>
              <RegionInline r={r} onNav={onNav} />
              <PH src={r.src} label={r.label} icon={<MountainIcon/>} style={{ borderRadius: 'var(--radius-card)' }} />
            </>
          )}
        </div>
      ))}
    </div>
  );
}

function RegionCard({ r, onNav, fill = false }) {
  return (
    <div className={`region-card ${r.wip ? 'wip' : ''}`}
      style={fill ? { aspectRatio: 'unset', height: '100%' } : null}
      onClick={() => onNav(r.route)}>
      <PH src={r.src} label={r.label} icon={<MountainIcon/>} />
      <div className="overlay" />
      <div className="arrow">{Ico.arrowSm}</div>
      <div className="body">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(244,239,231,0.6)' }}>
          <span>{r.vibe}</span>
          <span>{r.count}</span>
        </div>
        <div className="name">{r.name}</div>
        <p style={{ margin: 0, fontSize: 14, color: 'rgba(244,239,231,0.78)', maxWidth: '32ch' }}>{r.desc}</p>
      </div>
    </div>
  );
}

function RegionInline({ r, onNav }) {
  return (
    <div className="card" style={{ padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 18 }}>{r.vibe} · {r.count}</div>
        <h3 className="h2" style={{ fontSize: 'clamp(36px, 3vw, 52px)', margin: 0 }}>{r.name}</h3>
        <p className="lead" style={{ marginTop: 18, fontSize: 16 }}>{r.desc}</p>
      </div>
      <button className="btn btn-ghost btn-sm" style={{ alignSelf: 'flex-start', marginTop: 24 }}
        onClick={() => onNav(r.route)}>
        {r.wip ? 'Tešíme sa' : 'Otvoriť región'} {Ico.arrowSm}
      </button>
    </div>
  );
}

// ── Feature row ───────────────────────────────────────────────────
function FeatureRow({ num, region, name, tagline, specs, wip, flip, onNav, src }) {
  return (
    <div className={`feature-row ${flip ? 'flip' : ''}`}>
      <div className="feature-media">
        <PH src={src} label={`${name} — hero`} icon={<MountainIcon/>} style={{ height: '100%' }} />
      </div>
      <div>
        <div className="feature-num">{num} <span className="dot" /> {region}</div>
        <h3 className="h2" style={{ margin: '20px 0 16px', fontSize: 'clamp(40px, 4vw, 64px)' }}>{name}</h3>
        <p className="lead" style={{ marginBottom: 32 }}>{tagline}</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginBottom: 36, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
          {specs.map((s) => (
            <div key={s} style={{ fontSize: 13, display: 'flex', gap: 10, alignItems: 'center', color: 'var(--text-soft)' }}>
              <span style={{ width: 16, height: 16, display: 'inline-block', color: 'var(--accent)' }}>{Ico.check}</span>
              {s}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          {wip ? (
            <button className="btn btn-ghost" onClick={() => onNav('coming')}>Tešíme sa {Ico.arrowSm}</button>
          ) : (
            <>
              <button className="btn btn-primary" onClick={() => onNav('object')}>Pozrieť detail {Ico.arrowSm}</button>
              <button className="btn btn-ghost" onClick={() => onNav('object')}>Rezervovať</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Mini map ──────────────────────────────────────────────────────
function MiniMap({ onNav, large = false }) {
  // very stylised Liptov map - placeholder
  return (
    <div className="map-wrap" style={large ? { aspectRatio: '4/3' } : null}>
      <svg className="map-svg" viewBox="0 0 800 450" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="mapG" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--surface-2)"/>
            <stop offset="1" stopColor="var(--surface)"/>
          </linearGradient>
        </defs>
        <rect width="800" height="450" fill="url(#mapG)"/>
        {/* topo lines */}
        {Array.from({ length: 14 }).map((_, i) => (
          <path key={i}
            d={`M0 ${50 + i * 28} Q 200 ${30 + i * 28 - i*2} 400 ${60 + i * 28} T 800 ${50 + i * 28}`}
            fill="none" stroke="var(--line)" strokeWidth="1"/>
        ))}
        {/* river Váh */}
        <path d="M-20 220 Q 150 200 280 240 T 540 230 T 820 210"
          fill="none" stroke="var(--accent)" strokeOpacity="0.35" strokeWidth="2" />
        {/* roads */}
        <path d="M50 280 L 750 260" stroke="var(--line-2)" strokeWidth="1" strokeDasharray="4 6"/>
        {/* labels */}
        <text x="20" y="40" fill="var(--text-mute)" fontSize="10" letterSpacing="2" style={{ textTransform: 'uppercase' }}>SK · NÍZKE TATRY · LIPTOV</text>
        <text x="640" y="430" fill="var(--text-mute)" fontSize="10" letterSpacing="2" textAnchor="end" style={{ textTransform: 'uppercase' }}>Mierka cca 1 : 250 000</text>
      </svg>
      <div className="map-pin" style={{ left: '24%', top: '46%' }} onClick={() => onNav('region-jan')} />
      <div className="map-pin-label" style={{ left: '24%', top: '46%' }}>Liptovský Ján · Stagnum + Zruby</div>
      <div className="map-pin" style={{ left: '52%', top: '62%' }} onClick={() => onNav('region-dem')} />
      <div className="map-pin-label" style={{ left: '52%', top: '62%' }}>Demänovská · Capra</div>
      <div className="map-pin wip" style={{ left: '76%', top: '38%' }} onClick={() => onNav('coming')} />
      <div className="map-pin-label" style={{ left: '76%', top: '38%' }}>Bešeňová · Mitošiny (2027)</div>
    </div>
  );
}

// ── Mini attraction tile ──────────────────────────────────────────
function MiniAttr({ icon, label, count, desc }) {
  return (
    <div style={{ padding: 32, border: '1px solid var(--line)', borderRadius: 'var(--radius-card)', background: 'var(--bg)', display: 'flex', flexDirection: 'column', gap: 18 }}>
      <span style={{ width: 28, height: 28, color: 'var(--accent)' }}>{icon}</span>
      <div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: 0, letterSpacing: '-0.02em' }}>{label}</h3>
        <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 6 }}>{count}</div>
      </div>
      <p style={{ margin: 0, fontSize: 14, color: 'var(--text-soft)' }}>{desc}</p>
    </div>
  );
}

// ── Package card ──────────────────────────────────────────────────
function PackageCard({ tag, name, desc, priceFrom, nights, media }) {
  return (
    <div className="package-card">
      <div className="media">{media}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <span className="badge">{tag}</span>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 2.4vw, 40px)', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{name}</h3>
        <p style={{ margin: 0, color: 'var(--text-soft)' }}>{desc}</p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 18, borderTop: '1px solid var(--line)' }}>
          <div>
            <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Od</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, letterSpacing: '-0.02em' }}>{priceFrom}</div>
            <div className="text-mute" style={{ fontSize: 12 }}>{nights}</div>
          </div>
          <button className="btn btn-ghost">Detail balíka {Ico.arrowSm}</button>
        </div>
      </div>
    </div>
  );
}

// ── Review ────────────────────────────────────────────────────────
function Review({ stars, quote, who, src, date }) {
  return (
    <div className="review">
      <div className="stars">{'★'.repeat(stars)}</div>
      <p className="quote" style={{ margin: 0 }}>{quote}</p>
      <div className="who">
        <span>{who} <span className="dot"/> {date}</span>
        <span className="src">{src}</span>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, MiniMap, FeatureRow });
