// STAV — main app
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "v1"
}/*EDITMODE-END*/;

// Products catalog ---------------------------------------------------------
const CATEGORIES = [
  { id: "all",      label: "Vše" },
  { id: "stavebnice", label: "Typové konstrukce" },
  { id: "prvky",    label: "Konstrukční prvky" },
  { id: "balicky",  label: "Sady podle fáze stavby" },
  { id: "sluzby",   label: "Služby" },
];

const PRODUCTS = [
  { id:"p01", cat:"stavebnice", tag:"BESTSELLER", name:"Stavebnice Bungalov 9×7 m", desc:"Kompletní nosná konstrukce pro bungalov 63 m². Dle konfigurátoru.", price:220500, unit:"kpl", sku:"BNG-9X7", color:"a" },
  { id:"p02", cat:"stavebnice", tag:"NOVINKA", name:"Stavebnice Bungalov 10×8 m", desc:"Nosná konstrukce pro 80 m². Rastr 625 mm, 4 typové otvory.", price:280000, unit:"kpl", sku:"BNG-10X8", color:"b" },
  { id:"p03", cat:"stavebnice", name:"Stavebnice Bungalov 12×10 m", desc:"Pro větší bungalovy do 120 m². Včetně věncového vazníku.", price:420000, unit:"kpl", sku:"BNG-12X10", color:"c" },

  { id:"p04", cat:"prvky", name:"Zakládací U profil 6 m", desc:"Spodní základ stěny s vymezenými spárami pro žebra.", price:4890, unit:"ks", sku:"UP-600", color:"a" },
  { id:"p05", cat:"prvky", name:"Věncový U profil 6 m", desc:"Horní uzavírací profil nosné konstrukce.", price:4990, unit:"ks", sku:"UP-V600", color:"b" },
  { id:"p06", cat:"prvky", name:"Stěnový nosník (žebro) 3 m", desc:"Základní svislé žebro. OSB‑3 + KVH hranoly.", price:1290, unit:"ks", sku:"RIB-300", color:"c" },
  { id:"p07", cat:"prvky", name:"Překlad 1250 mm", desc:"Typový překladový prvek pro okenní otvor.", price:890, unit:"ks", sku:"LIN-1250", color:"a" },
  { id:"p08", cat:"prvky", name:"Parapetní žebro nízké 1200 mm", desc:"Pro osazení oken s výškou 600 mm.", price:690, unit:"ks", sku:"PAR-1200", color:"b" },
  { id:"p09", cat:"prvky", name:"Parapetní žebro vysoké 1800 mm", desc:"Pro standardní okna výšky 1200 mm.", price:890, unit:"ks", sku:"PAR-1800", color:"c" },

  { id:"p10", cat:"balicky", tag:"ÚSPORA", name:"Balíček 10× žebro", desc:"Sleva 8 % oproti kusové ceně. Zdarma doprava od 20 ks.", price:11890, unit:"bal", sku:"PKG-R10", color:"a" },
  { id:"p11", cat:"balicky", name:"Startovní sada (pro zkoušku)", desc:"1× U profil, 4× žebro, 1× překlad. Pro první dílnu.", price:12490, unit:"sada", sku:"PKG-START", color:"b" },
  { id:"p12", cat:"balicky", name:"Sada pro 1 stěnu 9 m", desc:"Kompletní sada prvků pro jednu obvodovou stěnu.", price:38900, unit:"sada", sku:"PKG-W9", color:"c" },

  { id:"p13", cat:"sluzby", name:"Konzultace s projektantem (90 min)", desc:"Online schůzka nad vaším půdorysem. Zápis a doporučení.", price:2900, unit:"ks", sku:"SRV-CON", color:"a" },
  { id:"p14", cat:"sluzby", name:"Doprava do 100 km", desc:"Od výrobny po stavbu. Paušál pro stavebnici bungalovu.", price:6900, unit:"ks", sku:"SRV-DLV", color:"b" },
  { id:"p15", cat:"sluzby", tag:"VČETNĚ DOZORU", name:"Montáž nosné konstrukce", desc:"Tým + stavbyvedoucí. Cena dle výkazu, zde orientační paušál.", price:89000, unit:"projekt", sku:"SRV-ASM", color:"c" },
];

// Visual placeholder for product tiles — schematic, brand-consistent
function ProductVis({ color="a", kind="stavebnice" }) {
  const palettes = {
    a: ["var(--primary-soft)", "var(--primary)"],
    b: ["var(--accent-soft)", "var(--accent)"],
    c: ["var(--line)", "var(--fg)"],
  };
  const [soft, strong] = palettes[color] || palettes.a;
  if (kind === "stavebnice") {
    return (
      <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid meet">
        <rect width="200" height="160" fill={soft} opacity="0.35"/>
        {/* grid */}
        {[...Array(9)].map((_,i)=>(
          <line key={"v"+i} x1={20+i*20} y1="28" x2={20+i*20} y2="120" stroke={strong} strokeOpacity=".18" strokeWidth="0.6"/>
        ))}
        {/* bungalow silhouette */}
        <polygon points="30,60 100,42 170,60 170,120 30,120" fill="none" stroke={strong} strokeWidth="1.5"/>
        <line x1="30" y1="120" x2="170" y2="120" stroke={strong} strokeWidth="2.5"/>
        <line x1="30" y1="60" x2="170" y2="60" stroke={strong} strokeWidth="1.5"/>
        {/* ribs */}
        {[50,70,90,110,130,150].map(x=>(
          <line key={x} x1={x} y1="60" x2={x} y2="120" stroke={strong} strokeWidth="1"/>
        ))}
        {/* window */}
        <rect x="58" y="78" width="28" height="20" fill={strong} opacity="0.15"/>
        <rect x="58" y="78" width="28" height="20" fill="none" stroke={strong} strokeWidth="1"/>
        {/* door */}
        <rect x="112" y="80" width="18" height="40" fill={strong} opacity="0.22"/>
        <rect x="112" y="80" width="18" height="40" fill="none" stroke={strong} strokeWidth="1"/>
      </svg>
    );
  }
  if (kind === "prvky") {
    return (
      <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid meet">
        <rect width="200" height="160" fill={soft} opacity=".35"/>
        <rect x="40" y="50" width="120" height="60" fill="none" stroke={strong} strokeWidth="1.5"/>
        <rect x="40" y="50" width="120" height="16" fill={strong} opacity=".15"/>
        <rect x="40" y="94" width="120" height="16" fill={strong} opacity=".15"/>
        {[60,80,100,120,140].map(x=>(
          <line key={x} x1={x} y1="66" x2={x} y2="94" stroke={strong} strokeWidth="2"/>
        ))}
        <text x="44" y="138" fontFamily="ui-monospace" fontSize="9" fill={strong}>625 mm raster</text>
      </svg>
    );
  }
  if (kind === "balicky") {
    return (
      <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid meet">
        <rect width="200" height="160" fill={soft} opacity=".35"/>
        <rect x="50" y="48" width="100" height="64" fill="none" stroke={strong} strokeWidth="1.5"/>
        <line x1="50" y1="60" x2="150" y2="60" stroke={strong} strokeWidth="1"/>
        <line x1="100" y1="48" x2="100" y2="60" stroke={strong} strokeWidth="1"/>
        <path d="M50 80 L150 80 M50 96 L150 96" stroke={strong} strokeOpacity=".35" strokeDasharray="3 3"/>
        <text x="60" y="132" fontFamily="ui-monospace" fontSize="9" fill={strong}>BALÍČEK</text>
      </svg>
    );
  }
  // sluzby
  return (
    <svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid meet">
      <rect width="200" height="160" fill={soft} opacity=".35"/>
      <circle cx="100" cy="72" r="22" fill="none" stroke={strong} strokeWidth="1.5"/>
      <path d="M70 116 Q100 96 130 116" fill="none" stroke={strong} strokeWidth="1.5"/>
      <text x="70" y="138" fontFamily="ui-monospace" fontSize="9" fill={strong}>SLUŽBA</text>
    </svg>
  );
}

// Nav ---------------------------------------------------------------------
function Nav({ page, setPage, cartCount, openCart }) {
  const links = [
    { id:"home",    label:"Úvod" },
    { id:"system",  label:"Jak funguje" },
    { id:"skladba", label:"Skladba" },
    { id:"config",  label:"Konfigurátor" },
    { id:"shop",    label:"Stavebnice" },
    { id:"kontakt", label:"Kontakt" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="logo" onClick={()=>setPage("home")} style={{cursor:"pointer"}}>
          <div className="logo-mark">S</div>
          <span>STAV<span style={{color:"var(--accent)"}}>.</span></span>
        </div>
        <div className="nav-links">
          {links.map(l => (
            <div key={l.id}
                 className={"nav-link" + (page===l.id || (l.id==="shop" && (page==="detail"||page==="cart"))?" active":"")}
                 onClick={()=>setPage(l.id)}>
              {l.label}
            </div>
          ))}
        </div>
        <div className="nav-cta">
          <button className="cart-btn" onClick={openCart}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
              <path d="M3 3h2l2.4 12.5a2 2 0 0 0 2 1.5h8.2a2 2 0 0 0 2-1.5L21 7H6"/><circle cx="10" cy="21" r="1.5"/><circle cx="18" cy="21" r="1.5"/>            </svg>
            {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
          </button>
          <button className="btn sm accent" onClick={()=>setPage("config")}>Konfigurátor →</button>
        </div>
      </div>
    </nav>
  );
}

// Home page ----------------------------------------------------------------
function Home({ setPage, addToCart, cart, openCart }) {
  const featured = PRODUCTS.filter(p => p.cat === "stavebnice").slice(0,3);

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero app">
        <div className="hero-grid">
          <div>
            <span className="hero-pill">● Stavebnice pro stavbu svépomocí · rastr 625 mm · hrubá stavba za pár dní</span>
            <h1 className="h1"><span style={{whiteSpace:"nowrap",display:"block"}}><em>Revoluce</em> ve dřevostavbách.</span><span style={{whiteSpace:"nowrap",display:"block"}}>Postavte si dům sami.</span><span style={{whiteSpace:"nowrap",display:"block"}}>Jako <em>velkou stavebnici</em>.</span></h1>
            <p className="lead">STAV je modulový systém dřevostavby, který zvládnete v páru lidí. Málo typů dílů, jasné instrukce, díly do sebe zapadají v rastru 625 mm. Hrubá stavba bungalovu stojí za pomocí kamaráda během několika dní — a ušetříte stovky tisíc na práci.</p>
            <div className="hero-ctas">
              <button className="btn" onClick={()=>setPage("config")}>Navrhnout svůj dům <span>→</span></button>
              <button className="btn ghost" onClick={()=>setPage("shop")}>Prohlédnout stavebnice</button>
            </div>
            <div className="hero-stats">
              <div className="hero-stat"><div className="num">2 lidi</div><div className="lbl">Stačí na složení konstrukce</div></div>
              <div className="hero-stat"><div className="num">~3 dny</div><div className="lbl">Hrubá stavba bungalovu</div></div>
              <div className="hero-stat"><div className="num">až − 70 %</div><div className="lbl">Úspora oproti firmě na klíč</div></div>
            </div>
          </div>
          <div className="hero-visual">
            <div className="grid-bg"></div>
            <div className="hv-badge"><span className="dot"></span>Model nosné konstrukce</div>
            <svg viewBox="0 0 500 400" style={{position:"absolute",inset:0,width:"100%",height:"100%"}}>
              {/* ground */}
              <line x1="40" y1="320" x2="460" y2="320" stroke="var(--muted)" strokeWidth="1" strokeDasharray="4 4"/>
              {/* bungalow */}
              <polygon points="80,260 250,200 420,260 420,310 80,310" fill="var(--surface)" stroke="var(--fg)" strokeWidth="2"/>
              <line x1="80" y1="260" x2="420" y2="260" stroke="var(--fg)" strokeWidth="1.2"/>
              {/* ribs every 625mm (scaled) */}
              {Array.from({length:11}).map((_,i)=>(
                <line key={i} x1={100+i*32} y1="260" x2={100+i*32} y2="310" stroke="var(--primary)" strokeOpacity=".55" strokeWidth="1"/>
              ))}
              {/* openings */}
              <rect x="148" y="274" width="54" height="26" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="1"/>
              <rect x="228" y="280" width="32" height="30" fill="var(--primary-soft)" stroke="var(--primary)" strokeWidth="1"/>
              <rect x="306" y="274" width="62" height="26" fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth="1"/>
              {/* roof detail */}
              <line x1="250" y1="200" x2="250" y2="260" stroke="var(--fg)" strokeOpacity=".3" strokeDasharray="3 4"/>
              {/* dim */}
              <line x1="80" y1="340" x2="420" y2="340" stroke="var(--muted)" strokeWidth="0.8"/>
              <line x1="80" y1="336" x2="80" y2="344" stroke="var(--muted)"/>
              <line x1="420" y1="336" x2="420" y2="344" stroke="var(--muted)"/>
            </svg>
            <div className="hv-label" style={{top:"18px",right:"18px"}}>Bungalov 10 × 8 m</div>
            <div className="hv-label" style={{bottom:"22px",left:"50%",transform:"translateX(-50%)"}}>2 lidi · ~7 dní · hrubá stavba</div>
          </div>
        </div>
      </section>

      {/* Trust bar */}
      <section className="app">
        <div className="trust">
          <div className="trust-item"><div className="trust-icon">−70%</div><div><b style={{display:"block"}}>Třetinová cena</b><span className="muted" style={{fontSize:13}}>Oproti firmě na klíč</span></div></div>
          <div className="trust-item"><div className="trust-icon">2×</div><div><b style={{display:"block"}}>Stačí dva lidi</b><span className="muted" style={{fontSize:13}}>Bez jeřábu, bez party řemeslníků</span></div></div>
          <div className="trust-item"><div className="trust-icon">7d</div><div><b style={{display:"block"}}>Za pár dnů kostra</b><span className="muted" style={{fontSize:13}}>Místo měsíců čekání na firmu</span></div></div>
          <div className="trust-item"><div className="trust-icon">FIX</div><div><b style={{display:"block"}}>Fixní cena dopředu</b><span className="muted" style={{fontSize:13}}>Žádné vícepráce, žádné překvapení</span></div></div>
        </div>
      </section>

      {/* Starting point — rozcestník */}
      <StartingPoint setPage={setPage}/>

      {/* Bento — výhody systému */}
      <Bento setPage={setPage}/>

      {/* Features */}
      <section className="section app">
        <div className="sec-head">
          <div className="sec-head-text">
            <span className="eyebrow">Proč STAV</span>
            <h2 className="h2">Úspora je v tom,<br/>co <em>nemusíte</em> platit.</h2>
            <p>Firma na klíč účtuje práci, která vám bere největší část rozpočtu. STAV je navržený tak, abyste tu práci zvládli sami — díly nejsou těžké, postup je jednoduchý a rastr 625 mm odpouští začátečnické chyby. Co ušetříte, jde rovnou do bydlení.</p>
          </div>
          <button className="btn ghost" onClick={()=>setPage("system")}>Jak to složíte →</button>
        </div>
        <div className="features">
          {[
            ["01","Díl unesete sami","Nejtěžší prvek pod 25 kg. Žádný jeřáb, žádná ČKD, žádný živnostník žádající připlácen."],
            ["02","4 typy dílů","Celý dům stoí na čtyřech prvcích. Nepletení, menší obávy, levější objednávka."],
            ["03","Návod krok za krokem","PDF i video. Žádné „nějak si to srovnejte“ — každý krok má obrázek, popis a kontrolní bod."],
            ["04","Rastr vás vede","Díly do sebe zapadají jen jedním způsobem. Když to nejde, je to chyba — a ví se kde."],
            ["05","Hrubá stavba za dny","Bungalov ve dvou lidech zvládnete za zhruba týden. Víkend tátův, víkend kamarádův — a kostra stojí."],
            ["06","Úspora až 70 %","Co byste zaplatili firmě za práci, můžete dát do oken, kuchyně nebo zahrady."],
          ].map(([n,t,d]) => (
            <div className="feature" key={n}>
              <div className="feature-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <rect x="4" y="4" width="7" height="7"/><rect x="13" y="4" width="7" height="7"/><rect x="4" y="13" width="7" height="7"/><rect x="13" y="13" width="7" height="7"/>
                </svg>
              </div>
              <div className="num">— {n}</div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* How it works */}
      <section className="section app" style={{paddingTop:0}}>
        <div className="sec-head">
          <div className="sec-head-text">
            <span className="eyebrow">Jak to funguje</span>
            <h2 className="h2"><span style={{whiteSpace:"nowrap",display:"block"}}>Od půdorysu po hotovou kostru</span><span style={{whiteSpace:"nowrap",display:"block"}}>za pár dní.</span></h2>
          </div>
        </div>
        <div className="steps">
          {[
            ["01","Navrhnete","V konfigurátoru zadáte rozměry a okna. Cena a počet dílů se počítá živě."],
            ["02","Objednáte","Stavebnici dovezeme na pozemek. Bez prvotních záloh, bez týdnů čekání."],
            ["03","Složíte","Vy a jeden šikovný kamarád. Šroubovák, vodováha, návod. Hotovo za dny, ne měsíce."],
            ["04","Bydlíte","Máte postaveno za polovinu. Druhou polovinu máte volnou na dokončení nebo na život."],
          ].map(([n,t,d]) => (
            <div className="step" key={n}>
              <div className="step-num">{n}</div>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Anatomy — exploded view */}
      <Anatomy setPage={setPage}/>

      {/* Configurator (live) */}
      <HomeConfigurator addToCart={addToCart} setPage={setPage}/>

      {/* Variant compare */}
      <VariantCompare setPage={setPage} addToCart={addToCart}/>

      {/* Size inspiration */}
      <SizeInspiration/>

      {/* Featured products */}
      <section className="section app" style={{paddingTop:0}}>
        <div className="sec-head">
          <div className="sec-head-text">
            <span className="eyebrow">Typové konstrukce</span>
            <h2 className="h2">Stavebnice, kterou<br/>postavíte sami.</h2>
            <p>Tři prověřené velikosti bungalovu. Vyberete tu, která sedí vašemu pozemku, doladíte v konfigurátoru a máte kompletní sadu dílů — včetně návodu, který vás provádí krok za krokem.</p>
          </div>
          <button className="btn ghost" onClick={()=>setPage("shop")}>Prohlédnout stavebnice →</button>
        </div>
        <div className="product-grid">
          {featured.map(p => (
            <ProductCard key={p.id} p={p} onOpen={()=>setPage("detail", p.id)} onAdd={()=>addToCart(p)}/>
          ))}
        </div>
      </section>

      {/* Srovnání: běžná dřevostavba vs STAV */}
      <section className="section app" style={{paddingTop:0}}>
        <div className="sec-head">
          <div className="sec-head-text">
            <span className="eyebrow">Srovnání</span>
            <h2 className="h2">Firma na klíč<br/>vs. STAV ve dvou lidech.</h2>
            <p>Stejný dům, jiná cesta. Tady je, co ušetříte penězi, časem a nervy, když si stavbu vezmete do vlastních rukou.</p>
          </div>
        </div>
        <div className="vs-grid">
          <div className="vs-col vs-old">
            <div className="vs-tag">Firma na klíč</div>
            <ul className="vs-list">
              <li><b>Práce v ceně</b><span>Mzda parta a stavbyvedoucí je polovina rozpočtu.</span></li>
              <li><b>Čekání na termín</b><span>3–6 měsíců, než firma začne. Další měsíce na hrubou stavbu.</span></li>
              <li><b>Vícepráce</b><span>„To jsme nevěděli“ — cena na konci jiná než na začátku.</span></li>
              <li><b>Žádná kontrola kvality</b><span>Co se stane pod izolací, vidí jen oni.</span></li>
              <li><b>Půjde to ve váš čas?</b><span>Stavba se neřídí vaším rozpočtem ani životem.</span></li>
            </ul>
          </div>
          <div className="vs-col vs-new">
            <div className="vs-tag accent">STAV svépomocí</div>
            <ul className="vs-list">
              <li><b>Práce ušetřená</b><span>Co ušetříte na práci, dáte do oken, kuchyně nebo fotovoltaiky.</span></li>
              <li><b>Začínáte kdy chcete</b><span>Díly dovezeme na pozemek do týdnů. Montáž podle vašeho víkendu.</span></li>
              <li><b>Cena se nemění</b><span>Výkaz dílů → fixní cena. Žádné překvapení na konci.</span></li>
              <li><b>Kontrola po celý čas</b><span>Dáláte to vy. Víte přesně, co je v každém metru čtverečním.</span></li>
              <li><b>Váš víkend, váš tempo</b><span>Složíte za 3 víkendy, nebo za 3 týdny dovolené. Vaše volba.</span></li>
            </ul>
          </div>
        </div>
      </section>

      {/* Co je / není součástí */}
      <section className="section app" style={{paddingTop:0}}>
        <div className="sec-head">
          <div className="sec-head-text">
            <span className="eyebrow">Rozsah dodávky</span>
            <h2 className="h2">Co dostanete<br/>a co už si řešíte sami.</h2>
            <p>Bez kličkování. STAV je nosná konstrukce — okolo ní (izolace, krytina, instalace) doplníte věci sami nebo s lokálními řemeslníky. A tady máte přesný seznam, na co se chystat.</p>
          </div>
        </div>
        <div className="scope-grid">
          <div className="scope-col scope-in">
            <div className="scope-hd"><div className="scope-mark in">+</div><h4>Dostanete od nás</h4></div>
            <ul>
              <li>Kompletní sadu dílů v rastru 625 mm</li>
              <li>Návod krok za krokem (PDF + video)</li>
              <li>Výkres rozmístění žeber a otvorů</li>
              <li>Přípravu pro střechu (plochou/sedlovou/pultovou)</li>
              <li>Kotvící a spojovací prvky</li>
              <li>Telefonickou podporu po celý čas stavby</li>
            </ul>
          </div>
          <div className="scope-col scope-out">
            <div className="scope-hd"><div className="scope-mark out">−</div><h4>Vyříšíte si sami</h4></div>
            <ul>
              <li>Základovou desku (šikovný kamarád nebo lokální firma)</li>
              <li>Tepelnou izolaci a opláštění (svépomocí)</li>
              <li>Okna a dveře (máme typové rozměry, dodavatele si vyberete)</li>
              <li>Střešní krytinu a klempířinu</li>
              <li>Elektroinstalaci, vodu, topení</li>
              <li>Vnitřní vrstvy, podlahy, povrchy</li>
            </ul>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section className="app">
        <div className="cta-band">
          <div>
            <h3>Přestaňte čekat<br/>na firmu, která nemá čas.</h3>
            <p>Otevřete konfigurátor, vyberte velikost a za pár minut víte, kolik stavebnice stojí a kdy ji můžete vyzvednout. Stavbu si vezmete do vlastních rukou — a ušetříte stovky tisíc.</p>
          </div>
          <div className="cta-r">
            <button className="btn" onClick={()=>setPage("config")}>Navrhnout svůj dům</button>
            <button className="btn ghost" onClick={()=>setPage("shop")}>Prohlédnout stavebnice</button>
          </div>
        </div>
      </section>

      <SiteFooter setPage={setPage}/>
      <ProjectPanel cart={cart} setPage={setPage} openCart={openCart}/>
    </div>
  );
}

// Product card -------------------------------------------------------------
function ProductCard({ p, onOpen, onAdd }) {
  const [added, setAdded] = useState(false);
  const handle = (e) => {
    e.stopPropagation();
    onAdd();
    setAdded(true);
    setTimeout(()=>setAdded(false), 1200);
  };
  return (
    <div className="card" onClick={onOpen}>
      <div className="card-img">
        {p.tag && <span className={"card-tag" + (p.tag==="NOVINKA"?" soft":"")}>{p.tag}</span>}
        <ProductVis color={p.color} kind={p.cat}/>
      </div>
      <div className="card-body">
        <div className="card-cat">{CATEGORIES.find(c=>c.id===p.cat)?.label}</div>
        <h4>{p.name}</h4>
        <p className="card-desc">{p.desc}</p>
        <div className="card-foot">
          <div className="price">{p.price.toLocaleString("cs-CZ")} Kč<span className="unit"> / {p.unit}</span></div>
          <button className={"add-btn" + (added?" added":"")} onClick={handle} aria-label="Přidat do návrhu">
            {added
              ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="5 12 10 17 19 7"/></svg>
              : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>}
          </button>
        </div>
      </div>
    </div>
  );
}

// Shop page ----------------------------------------------------------------
function Shop({ setPage, addToCart }) {
  const [cat, setCat] = useState("all");
  const [q, setQ] = useState("");
  const [sort, setSort] = useState("rel");
  const [price, setPrice] = useState(500000);

  const items = useMemo(() => {
    let list = PRODUCTS.slice();
    if (cat !== "all") list = list.filter(p => p.cat === cat);
    if (q) list = list.filter(p => (p.name+p.desc+p.sku).toLowerCase().includes(q.toLowerCase()));
    list = list.filter(p => p.price <= price);
    if (sort === "pa") list.sort((a,b)=>a.price-b.price);
    if (sort === "pd") list.sort((a,b)=>b.price-a.price);
    if (sort === "name") list.sort((a,b)=>a.name.localeCompare(b.name));
    return list;
  }, [cat, q, sort, price]);

  return (
    <div className="page app section" style={{paddingTop:48}}>
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Stavebnice</span>
          <h2 className="h2">Katalog typových konstrukcí a prvků.</h2>
          <p>Kompletní stavebnice pro typové bungalovy, jednotlivé prvky, zvýhodněné sady a navazující služby. Ceny jsou orientační; finální objednávku potvrzujeme dle projektu.</p>
        </div>
      </div>

      <div className="shop-layout">
        <aside className="shop-filters">
          <div className="filter-group">
            <h6>Kategorie</h6>
            {CATEGORIES.map(c => (
              <label key={c.id} className="filter-opt">
                <input type="radio" name="cat" checked={cat===c.id} onChange={()=>setCat(c.id)}/>
                <span>{c.label}</span>
                <span className="filter-count">{c.id==="all" ? PRODUCTS.length : PRODUCTS.filter(p=>p.cat===c.id).length}</span>
              </label>
            ))}
          </div>
          <div className="filter-group">
            <h6>Max. cena</h6>
            <div className="price-range">
              <input type="range" min="1000" max="500000" step="500" value={price}
                     onChange={e=>setPrice(+e.target.value)} style={{width:"100%",accentColor:"var(--primary)"}}/>
              <div className="range-vals"><span>1 000</span><span>{price.toLocaleString("cs-CZ")} Kč</span></div>
            </div>
          </div>
          <div className="filter-group">
            <h6>Dostupnost</h6>
            <label className="filter-opt"><input type="checkbox" defaultChecked/><span>Skladem</span><span className="filter-count">12</span></label>
            <label className="filter-opt"><input type="checkbox"/><span>Na objednávku</span><span className="filter-count">3</span></label>
          </div>
          <div className="filter-group">
            <h6>Certifikace</h6>
            <label className="filter-opt"><input type="checkbox"/><span>OSB-3 / EN 300</span></label>
            <label className="filter-opt"><input type="checkbox"/><span>KVH / DIN 68365</span></label>
          </div>
        </aside>

        <div className="shop-main">
          <div className="shop-bar">
            <div className="shop-search">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
              <input placeholder="Hledat produkt, SKU…" value={q} onChange={e=>setQ(e.target.value)}/>
            </div>
            <div className="shop-sort">
              <span className="muted" style={{fontSize:13}}>Nalezeno <b>{items.length}</b></span>
              <select value={sort} onChange={e=>setSort(e.target.value)}>
                <option value="rel">Doporučené</option>
                <option value="pa">Cena ↑</option>
                <option value="pd">Cena ↓</option>
                <option value="name">Název A–Z</option>
              </select>
            </div>
          </div>

          <div className="product-grid">
            {items.map(p => (
              <ProductCard key={p.id} p={p} onOpen={()=>setPage("detail", p.id)} onAdd={()=>addToCart(p)}/>
            ))}
            {items.length === 0 && (
              <div style={{gridColumn:"1 / -1",padding:"48px",textAlign:"center"}} className="muted">Nic nenalezeno. Zkuste jiný filtr.</div>
            )}
          </div>
        </div>
      </div>
      <SiteFooter setPage={setPage}/>
    </div>
  );
}

// Product detail -----------------------------------------------------------
function Detail({ id, setPage, addToCart }) {
  const p = PRODUCTS.find(x => x.id === id) || PRODUCTS[0];
  const [qty, setQty] = useState(1);
  const [thumb, setThumb] = useState(0);
  const [tab, setTab] = useState("desc");
  const [added, setAdded] = useState(false);

  const handleAdd = () => {
    for (let i=0; i<qty; i++) addToCart(p);
    setAdded(true);
    setTimeout(()=>setAdded(false), 1500);
  };

  return (
    <div className="page app section" style={{paddingTop:40}}>
      <div style={{fontSize:13,color:"var(--muted)",marginBottom:16}}>
        <span style={{cursor:"pointer"}} onClick={()=>setPage("home")}>Úvod</span> ·
        <span style={{cursor:"pointer"}} onClick={()=>setPage("shop")}> Stavebnice</span> ·
        <span style={{color:"var(--fg)"}}> {p.name}</span>
      </div>
      <div className="pd">
        <div className="pd-gallery">
          <div className="pd-main-img">
            <ProductVis color={p.color} kind={p.cat}/>
          </div>
          <div className="pd-thumbs">
            {[0,1,2,3].map(i => (
              <div key={i} className={"pd-thumb" + (thumb===i?" active":"")} onClick={()=>setThumb(i)}>
                <ProductVis color={["a","b","c","a"][i]} kind={p.cat}/>
              </div>
            ))}
          </div>
        </div>
        <div className="pd-info">
          <div className="pd-sku">{p.sku} · Skladem (výroba 7–10 dní)</div>
          <h1>{p.name}</h1>
          <p className="lead muted" style={{fontSize:16}}>{p.desc}</p>

          <div className="pd-price">
            <div className="big">{p.price.toLocaleString("cs-CZ")} Kč</div>
            <div className="tax">bez DPH / {p.unit}<br/><span style={{fontSize:11}}>{(p.price*1.21).toLocaleString("cs-CZ", {maximumFractionDigits:0})} Kč s DPH</span></div>
          </div>

          <div className="pd-specs">
            <div className="pd-spec"><span>Materiál</span><span>KVH + OSB‑3</span></div>
            <div className="pd-spec"><span>Rastr</span><span>625 mm</span></div>
            <div className="pd-spec"><span>Šířka stěny</span><span>240 mm</span></div>
            <div className="pd-spec"><span>Hmotnost</span><span>~{(p.price/1500).toFixed(0)} kg</span></div>
            <div className="pd-spec"><span>Výroba</span><span>ČR, Třebíč</span></div>
            <div className="pd-spec"><span>Patent</span><span>ČR 310294</span></div>
          </div>

          <div className="pd-qty">
            <span className="muted" style={{fontSize:13}}>Množství</span>
            <div className="qty-ctrl">
              <button onClick={()=>setQty(Math.max(1,qty-1))}>−</button>
              <div className="qty-val">{qty}</div>
              <button onClick={()=>setQty(qty+1)}>+</button>
            </div>
            <span className="muted" style={{fontSize:13,marginLeft:"auto"}}>
              = <b style={{color:"var(--fg)"}}>{(p.price*qty).toLocaleString("cs-CZ")} Kč</b>
            </span>
          </div>

          <div className="pd-cta">
            <button className="btn" onClick={handleAdd}>
              {added ? "✓ Přidáno do návrhu" : "Přidat do návrhu"}
            </button>
            <button className="btn ghost" onClick={()=>setPage("config")}>Otevřít konfigurátor</button>
          </div>

          <div className="pd-tabs">
            <div className="pd-tab-head">
              {[["desc","Popis"],["spec","Parametry"],["dod","Dodání"],["faq","FAQ"]].map(([id,l])=>(
                <button key={id} className={"pd-tab-btn"+(tab===id?" active":"")} onClick={()=>setTab(id)}>{l}</button>
              ))}
            </div>
            <div className="pd-tab-content">
              {tab==="desc" && <>
                <p>Prvek navržený podle patentu ČR č. 310294. Koncové části zapadají do spár v zakládacím a věncovém profilu — žádné individuální vyměřování, žádné tesařské improvizace.</p>
                <p>Systém je konstrukční platforma. Finální návrh každého objektu musí být ověřen autorizovaným projektantem a statikem podle konkrétních podmínek stavby.</p>
              </>}
              {tab==="spec" && <ul>
                <li>Materiál: OSB‑3 15 × 3000 × 1250 mm + KVH 40 × 60 × 4000 mm</li>
                <li>Osová vzdálenost žeber: 625 mm</li>
                <li>Vhodné pro bungalovy do 150 m²</li>
                <li>Montáž v rastru 625 mm bez individuálního vyměřování</li>
              </ul>}
              {tab==="dod" && <>
                <p>Výroba 7–10 pracovních dní po potvrzení objednávky. Doprava na stavbu dle lokality — kalkulujeme paušálně pro 100/200/300+ km.</p>
                <p>Samostatné prvky posíláme balíkovou službou, kompletní stavebnice vlastní logistikou.</p>
              </>}
              {tab==="faq" && <>
                <p><b>Mohu stavět svépomocí?</b> Ano. Systém je navržen pro srozumitelnou montáž. Přesto musí stavba probíhat podle projektové dokumentace a platných předpisů.</p>
                <p><b>Co není součástí?</b> Opláštění, izolace, fasáda, okna, střešní krytina, instalace, základová deska.</p>
              </>}
            </div>
          </div>
        </div>
      </div>
      <SiteFooter setPage={setPage}/>
    </div>
  );
}

// System page (jak funguje) -----------------------------------------------
function SystemPage({ setPage }) {
  return (
    <div className="page app section">
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Konstrukční systém</span>
          <h2 className="h2">Čtyři prvky. Jeden modul. Celá kostra domu.</h2>
          <p>STAV stojí na drobném souboru opakovatelných dílů, které do sebe zapadají v rastru 625 mm. Zakládací U profil určuje polohu žeber, žebra tvoří svislou kostru, věncový profil konstrukci uzavírá a doplňky vytvářejí otvory.</p>
        </div>
      </div>

      <div className="features">
        {[
          ["Zakládací U profil","Spodní základ stěny. Vymezené spáry určují polohu nosníků a omezují chyby na stavbě."],
          ["Stěnový nosník (žebro)","Svislá kostra stěny. OSB‑3 deska po stranách s KVH hranoly tvoří tuhý lehký prvek."],
          ["Věncový U profil","Horní uzavírací profil. Stejný princip vymezených spár jako u zakládacího profilu."],
          ["Doplňkové prvky","Překlady, parapetní žebra a kratší nosníky pro okna a dveře v typových rozměrech."],
        ].map(([t,d],i)=>(
          <div className="feature" key={i}>
            <div className="feature-icon"><span style={{fontFamily:"var(--font-mono)",fontWeight:700}}>0{i+1}</span></div>
            <h3>{t}</h3>
            <p>{d}</p>
          </div>
        ))}
      </div>

      <div className="sec-head" style={{marginTop:64}}>
        <div className="sec-head-text">
          <span className="eyebrow">Logika rastru</span>
          <h2 className="h2">Proč zrovna 625 mm.</h2>
          <p>Modul 625 mm je standardní osová vzdálenost pro dřevěné rámové konstrukce. Vychází z formátů desek a izolací, takže navazující vrstvy stavby se k němu chovají přirozeně. Konstrukce z toho profituje hned třikrát: jasná pozice prvků, méně řezání, kratší kontrola na stavbě.</p>
        </div>
      </div>

      <div className="vs-grid">
        <div className="vs-card">
          <div className="vs-tag">Materiál</div>
          <ul className="vs-list">
            <li><b>KVH hranoly</b><span>Konstrukční smrkové dřevo s definovanou vlhkostí.</span></li>
            <li><b>OSB‑3 desky</b><span>Stabilní opláštění pro nosné stěnové prvky.</span></li>
            <li><b>Suchý proces</b><span>Konstrukce postupuje rychle, bez technologických přestávek na vyzrání.</span></li>
          </ul>
        </div>
        <div className="vs-card">
          <div className="vs-tag accent">Práce na stavbě</div>
          <ul className="vs-list">
            <li><b>Předem dané pozice</b><span>Spáry v profilu určují, kam který prvek patří.</span></li>
            <li><b>Méně řezání na míru</b><span>Většina prvků je v typových délkách. Atypů je málo.</span></li>
            <li><b>Kontrolovatelný postup</b><span>Návod popisuje pořadí montáže krok za krokem.</span></li>
          </ul>
        </div>
      </div>

      <div className="cta-band" style={{marginTop:56}}>
        <div>
          <h3>Chcete vidět, jak vychází vaše dispozice.</h3>
          <p>Otevřete konfigurátor a projděte si půdorys, otvory a typ střechy. Orientační výkaz prvků máte za pár minut.</p>
        </div>
        <div className="cta-r">
          <button className="btn" onClick={()=>setPage("config")}>Otevřít konfigurátor</button>
          <button className="btn ghost" onClick={()=>setPage("shop")}>Prohlédnout stavebnice</button>
        </div>
      </div>
      <SiteFooter setPage={setPage}/>
    </div>
  );
}

// Skladba page — doporučená skladba pro pasivní dům ----------------------
function SkladbaPage({ setPage }) {
  const wall = [
    ["Sádrokarton protipožární", "12,5 mm", "cca 10,5 kg/m²", "10,5 kg/m²"],
    ["OSB 3", "15 mm", "cca 630 kg/m³", "9,5 kg/m²"],
    ["PUR pěna otevřená", "250 mm", "cca 10 kg/m³", "2,5 kg/m²"],
    ["Fasádní deska Naturheld WAND 140", "140 mm", "140 kg/m³", "19,6 kg/m²"],
    ["Tenkovrstvá omítka + stěrka + síť", "—", "cca 7 kg/m²", "7,0 kg/m²"],
  ];
  const ceiling = [
    ["SDK protipožární", "12,5 mm", "cca 10,5 kg/m²", "10,5 kg/m²"],
    ["OSB 3", "15 mm", "cca 630 kg/m³", "9,5 kg/m²"],
    ["CD profily", "—", "orientačně dle roštu", "2,5 kg/m²"],
    ["PUR pěna otevřená", "350 mm", "cca 10 kg/m³", "3,5 kg/m²"],
  ];
  const perBm = [
    ["2,5 m", "cca 125 kg/bm", "cca 1,23 kN/bm"],
    ["2,7 m", "cca 135 kg/bm", "cca 1,32 kN/bm"],
    ["3,0 m", "cca 150 kg/bm", "cca 1,47 kN/bm"],
  ];

  const tableStyle = {
    width:"100%", borderCollapse:"collapse", fontSize:14,
    background:"var(--card,#fff)", border:"1px solid var(--border,#e5e3dd)", borderRadius:10, overflow:"hidden",
  };
  const th = { textAlign:"left", padding:"12px 14px", background:"var(--bg-2,#f6f4ee)", fontWeight:600, fontSize:12, letterSpacing:".04em", textTransform:"uppercase", color:"var(--muted,#6b6a64)", borderBottom:"1px solid var(--border,#e5e3dd)" };
  const td = { padding:"12px 14px", borderTop:"1px solid var(--border,#e5e3dd)", verticalAlign:"top" };
  const tdNum = { ...td, fontFamily:"var(--font-mono)", whiteSpace:"nowrap" };

  const Result = ({ title, mass, kn }) => (
    <div className="vs-card" style={{padding:18}}>
      <div className="vs-tag accent">Výsledek</div>
      <h4 style={{margin:"8px 0 6px",fontSize:16}}>{title}</h4>
      <div style={{display:"flex",gap:24,flexWrap:"wrap",marginTop:10}}>
        <div>
          <div style={{fontSize:12,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".04em"}}>Hmotnost</div>
          <div style={{fontFamily:"var(--font-mono)",fontSize:22,fontWeight:600,marginTop:4}}>{mass}</div>
        </div>
        <div>
          <div style={{fontSize:12,color:"var(--muted)",textTransform:"uppercase",letterSpacing:".04em"}}>Stálé zatížení</div>
          <div style={{fontFamily:"var(--font-mono)",fontSize:22,fontWeight:600,marginTop:4}}>{kn}</div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="page app section">
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Skladba konstrukce</span>
          <h2 className="h2">Doporučená skladba pro pasivní dům</h2>
          <p>Difúzně otevřená stěna a strop, navržené pro nízkoenergetický a pasivní standard. Hodnoty počítáme bez nosných prvků (sloupky, trámy, krokve, latě, kotvení). U stropu uvažujeme jen uvedené vrstvy včetně CD profilů.</p>
          <p style={{fontSize:13,color:"var(--muted)",marginTop:6}}>Použitý převod: <span style={{fontFamily:"var(--font-mono)"}}>1 kg/m² ≈ 0,00981 kN/m²</span></p>
        </div>
      </div>

      <div style={{margin:"32px 0 8px",border:"1px solid var(--border,#e5e3dd)",borderRadius:14,overflow:"hidden",background:"var(--card,#fff)"}}>
        <img src="assets/skladba_steny.png" alt="Skladba stěny — pasivní dům" style={{display:"block",width:"100%",height:"auto"}}/>
        <div style={{padding:"12px 16px",fontSize:13,color:"var(--muted)",borderTop:"1px solid var(--border,#e5e3dd)"}}>Schéma vrstev difúzně otevřené stěny — od interiéru po fasádu.</div>
      </div>

      {/* Stěna */}
      <div className="sec-head" style={{marginTop:56}}>
        <div className="sec-head-text">
          <span className="eyebrow">1) Stěna difúzně otevřená</span>
          <h3 className="h3" style={{fontSize:24,margin:"6px 0 0"}}>Vrstvy stěnové konstrukce</h3>
        </div>
      </div>

      <div style={{marginTop:18,overflowX:"auto"}}>
        <table style={tableStyle}>
          <thead>
            <tr>
              <th style={th}>Vrstva</th>
              <th style={th}>Tloušťka</th>
              <th style={th}>Uvažovaná objemová / plošná hmotnost</th>
              <th style={th}>Hmotnost</th>
            </tr>
          </thead>
          <tbody>
            {wall.map((r,i)=>(
              <tr key={i}>
                <td style={td}>{r[0]}</td>
                <td style={tdNum}>{r[1]}</td>
                <td style={td}>{r[2]}</td>
                <td style={tdNum}>{r[3]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p style={{fontSize:13,color:"var(--muted)",marginTop:10,maxWidth:760}}>U desky Naturheld WAND 140 vychází hmotnost z objemové hmotnosti 140 kg/m³ uvedené v technických údajích výrobku.</p>

      <div style={{marginTop:24,display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <Result title="Stěna — celkem" mass="≈ 50 kg/m²" kn="≈ 0,49 kN/m²"/>
        <div className="vs-card" style={{padding:18}}>
          <div className="vs-tag">Přepočet na běžný metr</div>
          <table style={{...tableStyle,marginTop:10}}>
            <thead>
              <tr>
                <th style={th}>Výška stěny</th>
                <th style={th}>Hmotnost / bm</th>
                <th style={th}>Zatížení / bm</th>
              </tr>
            </thead>
            <tbody>
              {perBm.map((r,i)=>(
                <tr key={i}>
                  <td style={tdNum}>{r[0]}</td>
                  <td style={tdNum}>{r[1]}</td>
                  <td style={tdNum}>{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Strop */}
      <div className="sec-head" style={{marginTop:64}}>
        <div className="sec-head-text">
          <span className="eyebrow">2) Strop difúzně otevřený</span>
          <h3 className="h3" style={{fontSize:24,margin:"6px 0 0"}}>Vrstvy stropní konstrukce</h3>
        </div>
      </div>

      <div style={{marginTop:18,overflowX:"auto"}}>
        <table style={tableStyle}>
          <thead>
            <tr>
              <th style={th}>Vrstva</th>
              <th style={th}>Tloušťka</th>
              <th style={th}>Uvažovaná objemová / plošná hmotnost</th>
              <th style={th}>Hmotnost</th>
            </tr>
          </thead>
          <tbody>
            {ceiling.map((r,i)=>(
              <tr key={i}>
                <td style={td}>{r[0]}</td>
                <td style={tdNum}>{r[1]}</td>
                <td style={td}>{r[2]}</td>
                <td style={tdNum}>{r[3]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{marginTop:24,maxWidth:520}}>
        <Result title="Strop — celkem" mass="≈ 26 kg/m²" kn="≈ 0,25 kN/m²"/>
      </div>

      {/* Souhrn */}
      <div className="sec-head" style={{marginTop:64}}>
        <div className="sec-head-text">
          <span className="eyebrow">Souhrn</span>
          <h3 className="h3" style={{fontSize:24,margin:"6px 0 0"}}>Hmotnosti a stálá zatížení</h3>
        </div>
      </div>

      <div style={{marginTop:18,overflowX:"auto"}}>
        <table style={tableStyle}>
          <thead>
            <tr>
              <th style={th}>Konstrukce</th>
              <th style={th}>Hmotnost</th>
              <th style={th}>Stálé zatížení</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style={td}>Stěna difúzně otevřená</td>
              <td style={tdNum}>cca 50 kg/m²</td>
              <td style={tdNum}>cca 0,49 kN/m²</td>
            </tr>
            <tr>
              <td style={td}>Strop difúzně otevřený</td>
              <td style={tdNum}>cca 26 kg/m²</td>
              <td style={tdNum}>cca 0,25 kN/m²</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div className="vs-grid" style={{marginTop:32}}>
        <div className="vs-card">
          <div className="vs-tag accent">Pro statický výpočet</div>
          <ul className="vs-list">
            <li><b>Stěna</b><span>0,50 až 0,55 kN/m² — bezpečnější uvažovaná hodnota.</span></li>
            <li><b>Strop</b><span>0,25 až 0,30 kN/m² — bezpečnější uvažovaná hodnota.</span></li>
          </ul>
        </div>
        <div className="vs-card">
          <div className="vs-tag">Hlavní nejistoty</div>
          <ul className="vs-list">
            <li><b>SDK deska</b><span>Přesná hmotnost se mezi výrobci liší.</span></li>
            <li><b>PUR pěna otevřená</b><span>Hustota kolísá v rozsahu výrobní tolerance.</span></li>
            <li><b>CD rošt a omítka</b><span>Skladba roštu a tloušťka stěrkové vrstvy.</span></li>
          </ul>
        </div>
      </div>

      <div className="cta-band" style={{marginTop:56}}>
        <div>
          <h3>Navrhněte si dům s touto skladbou.</h3>
          <p>V konfigurátoru projdete dispozici, otvory a typ střechy. Skladbu stěn a stropů uvidíte v orientačním výkazu prvků.</p>
        </div>
        <div className="cta-r">
          <button className="btn" onClick={()=>setPage("config")}>Otevřít konfigurátor</button>
          <button className="btn ghost" onClick={()=>setPage("system")}>Jak funguje systém</button>
        </div>
      </div>
      <SiteFooter setPage={setPage}/>
    </div>
  );
}

// Configurator page — redirects to home embed -----------------------------
function ConfigPage({ setPage }) {
  React.useEffect(() => {
    setPage("home");
    setTimeout(() => {
      const el = document.getElementById("konfigurator");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 60);
  }, []);
  return null;
}

// Contact page -------------------------------------------------------------
function ContactPage({ setPage }) {
  const [sent, setSent] = useState(false);
  return (
    <div className="page app section">
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Kontakt</span>
          <h2 className="h2">Máte dotaz k systému nebo konfiguraci?</h2>
          <p>Návrh domu si připravíte sami v konfigurátoru — výkaz prvků a orientační cenu máte za pár minut. Tady jsme pro doplňující dotazy ke stavebnici, dopravě, montáži nebo ke konkrétní položce z výkazu.</p>
        </div>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1.3fr 1fr",gap:40}}>
        <div style={{background:"var(--surface)",border:"1px solid var(--line)",borderRadius:"var(--radius)",padding:32}}>
          {sent ? (
            <div style={{padding:"40px 0",textAlign:"center"}}>
              <div style={{fontSize:48,marginBottom:12}}>✓</div>
              <h3 className="h3" style={{marginBottom:8}}>Děkujeme za zprávu</h3>
              <p className="muted">Ozveme se do dvou pracovních dnů s odpovědí na váš dotaz.</p>
            </div>
          ) : (
          <form className="form-grid" onSubmit={(e)=>{e.preventDefault();setSent(true);}}>
            <div className="field"><label>Jméno a příjmení</label><input required placeholder="Jan Novák"/></div>
            <div className="field"><label>Telefon</label><input required placeholder="+420"/></div>
            <div className="field full"><label>E-mail</label><input type="email" required placeholder="jan@example.cz"/></div>
            <div className="field"><label>Lokalita stavby</label><input placeholder="Město nebo PSČ"/></div>
            <div className="field"><label>Zastavěná plocha</label><input placeholder="např. 80 m²"/></div>
            <div className="field full"><label>Váš dotaz</label><textarea rows="4" placeholder="Číslo konfigurace z konfigurátoru, dotaz k položce, termín dodání, montáž…"></textarea></div>
            <div className="full" style={{display:"flex",gap:10,flexWrap:"wrap"}}>
              <button className="btn" type="submit">Odeslat dotaz</button>
              <button className="btn ghost" type="button" onClick={()=>setPage("home")}>Zrušit</button>
            </div>
          </form>
          )}
        </div>
        <div>
          <div style={{background:"var(--surface)",border:"1px solid var(--line)",borderRadius:"var(--radius)",padding:28,marginBottom:16}}>
            <h3 className="h3" style={{marginBottom:12}}>STAV systém</h3>
            <p className="muted" style={{margin:"0 0 14px",fontSize:14}}>Roman Budějovský<br/>Třebíč, Česká republika</p>
            <p style={{margin:0,fontFamily:"var(--font-mono)",fontSize:13}}>☎ 777 794 483<br/>✉ info@stav-system.cz</p>
          </div>
          <div style={{background:"var(--surface)",border:"1px solid var(--line)",borderRadius:"var(--radius)",padding:28}}>
            <h3 className="h3" style={{marginBottom:12,fontSize:18}}>S čím vám tu pomůžeme</h3>
            <ul style={{margin:0,padding:"0 0 0 18px",lineHeight:1.7,fontSize:14,color:"var(--fg)"}}>
              <li>Dotazy k položkám z výkazu konfigurátoru</li>
              <li>Doprava, termín dodání, montáž</li>
              <li>Technické dotazy ke skladbě a systému</li>
              <li>Objednání po dokončené konfiguraci</li>
            </ul>
            <div style={{marginTop:16,paddingTop:16,borderTop:"1px solid var(--line)"}}>
              <p style={{margin:"0 0 10px",fontSize:13,color:"var(--muted)"}}>Ještě nemáte návrh?</p>
              <button className="btn sm" onClick={()=>setPage("config")}>Otevřít konfigurátor →</button>
            </div>
          </div>
        </div>
      </div>
      <SiteFooter setPage={setPage}/>
    </div>
  );
}

// Cart drawer --------------------------------------------------------------
function CartDrawer({ open, onClose, cart, setCart, setPage }) {
  const subtotal = cart.reduce((s,i)=>s+i.price*i.qty, 0);
  const vat = subtotal * 0.21;
  const total = subtotal + vat;
  const setQty = (id, d) => setCart(c => c.map(i => i.id===id ? {...i, qty:Math.max(1,i.qty+d)} : i));
  const remove = (id) => setCart(c => c.filter(i => i.id !== id));

  return (
    <>
      <div className={"backdrop"+(open?" open":"")} onClick={onClose}></div>
      <aside className={"drawer"+(open?" open":"")}>
        <div className="drawer-hd">
          <h3>Moje konfigurace <span className="muted" style={{fontWeight:400,fontSize:14}}>({cart.reduce((s,i)=>s+i.qty,0)} položek)</span></h3>
          <button className="drawer-close" onClick={onClose}>×</button>
        </div>
        <div className="drawer-body">
          {cart.length === 0 && (
            <div className="cart-empty">
              <p>Vaše konfigurace je zatím prázdná.</p>
              <button className="btn" style={{marginTop:14}} onClick={()=>{onClose();setPage("shop");}}>Vybrat typovou konstrukci</button>
            </div>
          )}
          {cart.map(i => (
            <div className="cart-row" key={i.id}>
              <div className="cart-thumb"><ProductVis color={i.color} kind={i.cat}/></div>
              <div className="cart-row-main">
                <div className="t">{i.name}</div>
                <div className="s">{i.sku} · {i.price.toLocaleString("cs-CZ")} Kč / {i.unit}</div>
                <div className="qrow">
                  <button className="sm-btn" onClick={()=>setQty(i.id,-1)}>−</button>
                  <span className="qv">{i.qty}</span>
                  <button className="sm-btn" onClick={()=>setQty(i.id,+1)}>+</button>
                  <button className="rm" onClick={()=>remove(i.id)}>odebrat</button>
                </div>
              </div>
              <div className="cart-row-price">{(i.price*i.qty).toLocaleString("cs-CZ")} Kč</div>
            </div>
          ))}
        </div>
        {cart.length > 0 && (
          <div className="drawer-foot">
            <div className="cart-summary">
              <div className="row"><span className="muted">Mezisoučet</span><span>{subtotal.toLocaleString("cs-CZ")} Kč</span></div>
              <div className="row"><span className="muted">DPH 21 %</span><span>{vat.toLocaleString("cs-CZ",{maximumFractionDigits:0})} Kč</span></div>
              <div className="row tot"><span>Celkem</span><span>{total.toLocaleString("cs-CZ",{maximumFractionDigits:0})} Kč</span></div>
            </div>
            <button className="btn" style={{width:"100%",justifyContent:"center"}} onClick={()=>{onClose();setPage("cart");}}>Přejít k pokladně →</button>
          </div>
        )}
      </aside>
    </>
  );
}

// Checkout -----------------------------------------------------------------
function CartPage({ cart, setCart, setPage }) {
  const [pay, setPay] = useState("card");
  const subtotal = cart.reduce((s,i)=>s+i.price*i.qty, 0);
  const ship = cart.length > 0 ? 890 : 0;
  const vat = (subtotal+ship) * 0.21;
  const total = subtotal + ship + vat;

  return (
    <div className="page app section">
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Pokladna</span>
          <h2 className="h2">Dokončit objednávku</h2>
          <div className="co-steps" style={{marginTop:20}}>
            <div className="co-step active"><span className="n">01</span> Údaje</div>
            <div className="co-step"><span className="n">02</span> Doprava</div>
            <div className="co-step"><span className="n">03</span> Platba</div>
            <div className="co-step"><span className="n">04</span> Shrnutí</div>
          </div>
        </div>
      </div>
      <div className="checkout">
        <div>
          <div style={{background:"var(--surface)",border:"1px solid var(--line)",borderRadius:"var(--radius)",padding:28,marginBottom:16}}>
            <h3 className="h3" style={{marginBottom:18}}>Kontaktní a dodací údaje</h3>
            <div className="form-grid">
              <div className="field"><label>Jméno</label><input placeholder="Jan"/></div>
              <div className="field"><label>Příjmení</label><input placeholder="Novák"/></div>
              <div className="field"><label>E-mail</label><input type="email" placeholder="jan@example.cz"/></div>
              <div className="field"><label>Telefon</label><input placeholder="+420"/></div>
              <div className="field full"><label>Adresa stavby</label><input placeholder="Ulice a č. p."/></div>
              <div className="field"><label>Město</label><input/></div>
              <div className="field"><label>PSČ</label><input placeholder="000 00"/></div>
            </div>
          </div>

          <div style={{background:"var(--surface)",border:"1px solid var(--line)",borderRadius:"var(--radius)",padding:28}}>
            <h3 className="h3" style={{marginBottom:14}}>Způsob platby</h3>
            <div className="pay-opts">
              {[
                ["card","Kartou online","VISA"],
                ["bank","Bankovní převod","BANK"],
                ["cod","Na fakturu (pro firmy)","FA"],
              ].map(([id,l,pi])=>(
                <div key={id} className={"pay-opt"+(pay===id?" active":"")} onClick={()=>setPay(id)}>
                  <div className="pi">{pi}</div>
                  <div style={{flex:1}}>{l}</div>
                  <div style={{width:18,height:18,borderRadius:999,border:"2px solid var(--line)",background:pay===id?"var(--primary)":"transparent",boxShadow:pay===id?"inset 0 0 0 3px var(--surface)":"none"}}></div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <aside className="co-summary">
          <h4>Shrnutí</h4>
          {cart.length === 0 && <p className="muted" style={{fontSize:14}}>Návrh je prázdný.</p>}
          {cart.map(i => (
            <div key={i.id} style={{display:"flex",justifyContent:"space-between",padding:"10px 0",borderBottom:"1px dotted var(--line)",fontSize:13}}>
              <div style={{minWidth:0,paddingRight:12}}>
                <div style={{fontWeight:600}}>{i.name}</div>
                <div className="muted" style={{fontSize:12}}>{i.qty} × {i.price.toLocaleString("cs-CZ")} Kč</div>
              </div>
              <div style={{fontFamily:"var(--font-head)",fontWeight:600,whiteSpace:"nowrap"}}>{(i.price*i.qty).toLocaleString("cs-CZ")} Kč</div>
            </div>
          ))}
          {cart.length > 0 && <>
            <div className="cart-summary" style={{marginTop:14}}>
              <div className="row"><span className="muted">Zboží</span><span>{subtotal.toLocaleString("cs-CZ")} Kč</span></div>
              <div className="row"><span className="muted">Doprava</span><span>{ship.toLocaleString("cs-CZ")} Kč</span></div>
              <div className="row"><span className="muted">DPH 21 %</span><span>{vat.toLocaleString("cs-CZ",{maximumFractionDigits:0})} Kč</span></div>
              <div className="row tot"><span>Celkem</span><span>{total.toLocaleString("cs-CZ",{maximumFractionDigits:0})} Kč</span></div>
            </div>
            <button className="btn accent" style={{width:"100%",justifyContent:"center",marginTop:14}} onClick={()=>{alert("Děkujeme — brzy se ozveme s potvrzením.");setCart([]);setPage("home");}}>Dokončit a odeslat objednávku</button>
          </>}
        </aside>
      </div>
      <SiteFooter setPage={setPage}/>
    </div>
  );
}

// Footer -------------------------------------------------------------------
function SiteFooter({ setPage }) {
  return (
    <footer className="app">
      <div className="foot-grid">
        <div className="foot-col">
          <div className="logo" style={{marginBottom:14}}>
            <div className="logo-mark">S</div>
            <span>STAV<span style={{color:"var(--accent)"}}>.</span></span>
          </div>
          <p className="muted" style={{fontSize:14,lineHeight:1.6,margin:0,maxWidth:"36ch"}}>Modulový systém nosných konstrukcí dřevostaveb. Z typových prvků vzniká jasně nacenitelná, opakovatelná a kontrolně přesná kostra domu.</p>
        </div>
        <div className="foot-col">
          <h5>Produkt</h5>
          <a onClick={()=>setPage("system")}>Konstrukční systém</a>
          <a onClick={()=>setPage("home")}>Konfigurátor</a>
          <a onClick={()=>setPage("shop")}>Typové stavebnice</a>
          <a onClick={()=>setPage("shop")}>Konstrukční prvky</a>
        </div>
        <div className="foot-col">
          <h5>Pomoc</h5>
          <a>Technické informace</a>
          <a>Pro projektanty</a>
          <a onClick={()=>setPage("kontakt")}>Kontakt</a>
          <a>FAQ</a>
        </div>
        <div className="foot-col">
          <h5>Právní</h5>
          <a>Obchodní podmínky</a>
          <a>Ochrana osobních údajů</a>
          <a>Patent ČR 310294</a>
          <a>Reklamace</a>
        </div>
      </div>
      <div className="foot-legal">
        <div>© 2026 STAV systém · Roman Budějovský · Třebíč</div>
        <div style={{fontFamily:"var(--font-mono)"}}>Patent ČR č. 310294</div>
      </div>
    </footer>
  );
}

// Main App -----------------------------------------------------------------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPageRaw] = useState("home");
  const [detailId, setDetailId] = useState("p01");
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);

  const setPage = (p, id) => {
    if (p === "detail" && id) setDetailId(id);
    setPageRaw(p);
    window.scrollTo({top:0, behavior:"smooth"});
  };

  const addToCart = (p) => {
    setCart(c => {
      const existing = c.find(i => i.id === p.id);
      if (existing) return c.map(i => i.id === p.id ? {...i, qty:i.qty+1} : i);
      return [...c, {...p, qty:1}];
    });
    setCartOpen(true);
  };

  useEffect(() => {}, []);

  const cartCount = cart.reduce((s,i)=>s+i.qty, 0);

  return (
    <>
      <Nav page={page} setPage={setPage} cartCount={cartCount} openCart={()=>setCartOpen(true)}/>
      {page === "home"    && <Home setPage={setPage} addToCart={addToCart} cart={cart} openCart={()=>setCartOpen(true)}/>}
      {page === "system"  && <SystemPage setPage={setPage}/>}
      {page === "skladba" && <SkladbaPage setPage={setPage}/>}
      {page === "shop"    && <Shop setPage={setPage} addToCart={addToCart}/>}
      {page === "detail"  && <Detail id={detailId} setPage={setPage} addToCart={addToCart}/>}
      {page === "cart"    && <CartPage cart={cart} setCart={setCart} setPage={setPage}/>}
      {page === "config"  && <ConfigPage setPage={setPage}/>}
      {page === "kontakt" && <ContactPage setPage={setPage}/>}

      <CartDrawer open={cartOpen} onClose={()=>setCartOpen(false)} cart={cart} setCart={setCart} setPage={setPage}/>

      <TweaksPanel title="Tweaks">
        <div style={{fontSize:11,color:"rgba(41,38,27,.55)",padding:"4px 2px"}}>
          Vše pod jednou vizuální identitou (Manrope + Fraunces, šalvěj + terakota).
        </div>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
