// STAV — Home extras: rozcestník, anatomie, varianty, upload, inspirace, sticky panel
const { useState: useStateE, useRef: useRefE, useEffect: useEffectE } = React;

/* =================================================================
   1. ROZCESTNÍK — "Vyberte, odkud začínáte"
   ================================================================= */
function StartingPoint({ setPage }) {
  const items = [
    { id:"idea",     title:"Mám jen nápad",        desc:"Pomůžeme najít typovou konstrukci, která sedí.", cta:"Najít typ →", target:"shop", icon:"💡" },
    { id:"plan",     title:"Mám půdorys",          desc:"Otevřete konfigurátor a převeďte ho do modulu 625 mm.", cta:"Otevřít konfigurátor →", target:"config", icon:"📐" },
    { id:"bungalow", title:"Chci bungalov",        desc:"Začněte z ověřeného tvaru a upravte si rozměry.", cta:"Vybrat konstrukci →", target:"shop", icon:"🏠" },
    { id:"pro",      title:"Jsem projektant",      desc:"Technické prvky, modul, exporty pro projekt.", cta:"Zobrazit prvky →", target:"system", icon:"📊" },
  ];
  const handleClick = (target) => {
    if (target === "upload") {
      const el = document.getElementById("upload-section");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    } else {
      setPage(target);
    }
  };
  return (
    <section className="section app" style={{paddingTop:64}}>
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Vyberte, odkud začínáte</span>
          <h2 className="h2">Kde se v projektu právě teď nacházíte?</h2>
          <p>Každá cesta vede k modulu 625 mm — jen jinou rychlostí. Vyberte, co o stavbě víte, a budeme pokračovat odtamtud.</p>
        </div>
      </div>
      <div className="sp-grid">
        {items.map((i, idx) => (
          <button key={i.id} className="sp-card" onClick={()=>handleClick(i.target)}>
            <div className="sp-num">— 0{idx+1}</div>
            <div className="sp-emoji" aria-hidden="true">{i.icon}</div>
            <h4>{i.title}</h4>
            <p>{i.desc}</p>
            <span className="sp-cta">{i.cta}</span>
          </button>
        ))}
      </div>
    </section>
  );
}

/* =================================================================
   2. INTERAKTIVNÍ ANATOMIE — exploded view
   ================================================================= */
function Anatomy({ setPage }) {
  const [active, setActive] = useStateE("rib");
  const parts = {
    base:    { name:"Základová deska",        use:"Hrubá rovina pro založení konstrukce.", count:"1×",      price:"Není v dodávce" },
    uprofile:{ name:"Zakládací U profil",     use:"Spodní vymezení stěny, drží žebra v rastru.", count:"~16 ks", price:"od 4 890 Kč / 6 m" },
    rib:     { name:"Nosné žebro",            use:"Svislý nosný prvek v rastru 625 mm.", count:"~52 ks",  price:"od 1 290 Kč / ks" },
    lintel:  { name:"Překlad nad otvory",     use:"Přenáší zatížení nad okny a dveřmi.", count:"~8 ks",   price:"od 890 Kč / ks" },
    crown:   { name:"Věncový U profil",       use:"Horní uzavírací prvek konstrukce.", count:"~16 ks",  price:"od 4 990 Kč / 6 m" },
    roof:    { name:"Napojení střechy",       use:"Příprava pro plochou / sedlovou / pultovou.", count:"varianta", price:"podle typu" },
  };
  const layers = ["base","uprofile","rib","lintel","crown","roof"];
  return (
    <section className="section app" style={{paddingTop:0}}>
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Interaktivní anatomie</span>
          <h2 className="h2">Z čeho se konstrukce<br/>skládá. Vrstva po vrstvě.</h2>
          <p>Klikněte na prvek a zobrazí se jeho funkce, počet v typové konstrukci a orientační cena. Žádné PDF — interaktivně.</p>
        </div>
      </div>
      <div className="anat">
        <div className="anat-canvas">
          <svg viewBox="0 0 480 360" preserveAspectRatio="xMidYMid meet">
            {/* base */}
            <g className={"anat-layer"+(active==="base"?" active":"")} onClick={()=>setActive("base")}>
              <rect x="60" y="290" width="360" height="20" fill="var(--muted)" opacity="0.25"/>
              <rect x="60" y="290" width="360" height="20" fill="none" stroke="var(--muted)" strokeWidth="1.2"/>
            </g>
            {/* u-profile bottom */}
            <g className={"anat-layer"+(active==="uprofile"?" active":"")} onClick={()=>setActive("uprofile")}>
              <rect x="80" y="270" width="320" height="14" fill="var(--primary)" opacity="0.85"/>
            </g>
            {/* ribs */}
            <g className={"anat-layer"+(active==="rib"?" active":"")} onClick={()=>setActive("rib")}>
              {Array.from({length:14}).map((_,i)=>(
                <rect key={i} x={86+i*23} y={150} width="6" height="120" fill="var(--primary)"/>
              ))}
            </g>
            {/* lintel — over openings */}
            <g className={"anat-layer"+(active==="lintel"?" active":"")} onClick={()=>setActive("lintel")}>
              <rect x="120" y="174" width="86" height="10" fill="var(--accent)"/>
              <rect x="280" y="174" width="86" height="10" fill="var(--accent)"/>
            </g>
            {/* crown */}
            <g className={"anat-layer"+(active==="crown"?" active":"")} onClick={()=>setActive("crown")}>
              <rect x="80" y="138" width="320" height="14" fill="var(--primary)" opacity="0.85"/>
            </g>
            {/* roof */}
            <g className={"anat-layer"+(active==="roof"?" active":"")} onClick={()=>setActive("roof")}>
              <polygon points="60,138 240,80 420,138" fill="none" stroke="var(--fg)" strokeWidth="2"/>
              <polygon points="60,138 240,80 420,138" fill="var(--accent)" opacity="0.12"/>
            </g>
            {/* labels */}
            {layers.map((id,i) => (
              <g key={id} className={"anat-tick"+(active===id?" active":"")} onClick={()=>setActive(id)}>
                <line x1="430" y1={92+i*42} x2="450" y2={92+i*42} stroke="var(--muted)" strokeWidth="0.8"/>
                <circle cx="450" cy={92+i*42} r="4" fill={active===id?"var(--accent)":"var(--surface)"} stroke="var(--muted)" strokeWidth="1"/>
              </g>
            ))}
          </svg>
        </div>
        <div className="anat-panel">
          <div className="anat-list">
            {layers.map((id,i)=>(
              <button key={id} className={"anat-item"+(active===id?" active":"")} onClick={()=>setActive(id)}>
                <span className="anat-num">0{i+1}</span>
                <span className="anat-name">{parts[id].name}</span>
              </button>
            ))}
          </div>
          <div className="anat-detail">
            <div className="eyebrow">Detail prvku</div>
            <h3 className="h3" style={{marginTop:6}}>{parts[active].name}</h3>
            <p className="muted" style={{marginTop:8,fontSize:14.5,lineHeight:1.5}}>{parts[active].use}</p>
            <div className="anat-meta">
              <div><span>V typové konstrukci</span><b>{parts[active].count}</b></div>
              <div><span>Cena</span><b>{parts[active].price}</b></div>
            </div>
            <button className="btn ghost sm" onClick={()=>setPage("shop")}>Zobrazit v katalogu →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =================================================================
   3. POROVNÁNÍ VARIANT
   ================================================================= */
function VariantCompare({ setPage, addToCart }) {
  const variants = [
    { id:"v60",  name:"Bungalov 9 × 7",   area:63,  size:"14 × 10 modulů", ribs:52, price:220500, diff:"2 lidi · víkend",          popular:false },
    { id:"v80",  name:"Bungalov 10 × 8",  area:80,  size:"16 × 12 modulů", ribs:62, price:280000, diff:"2 lidi · ~7 dní",          popular:true  },
    { id:"v100", name:"Bungalov 12 × 10", area:120, size:"19 × 16 modulů", ribs:84, price:420000, diff:"3 lidi · ~10 dní",         popular:false },
  ];
  return (
    <section className="section app" style={{paddingTop:0}}>
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Porovnání variant</span>
          <h2 className="h2">Která velikost dává smysl?</h2>
          <p>Tři typové konstrukce vedle sebe. Stejný systém, jiná plocha. Vyberte výchozí bod a doladíme v konfigurátoru.</p>
        </div>
      </div>
      <div className="cmp">
        <div className="cmp-row cmp-head">
          <div className="cmp-cell"></div>
          {variants.map(v => (
            <div key={v.id} className={"cmp-cell cmp-col"+(v.popular?" pop":"")}>
              {v.popular && <div className="cmp-pop">Nejčastější volba</div>}
              <h4>{v.name}</h4>
            </div>
          ))}
        </div>
        {[
          ["Užitná plocha", v=>`${v.area} m²`],
          ["Modul", v=>v.size],
          ["Nosných žeber", v=>`${v.ribs} ks`],
          ["Montáž svépomocí", v=>v.diff],
          ["Cena konstrukce", v=>`od ${v.price.toLocaleString("cs-CZ")} Kč`],
          ["Vhodné pro", v=>v.area<=70 ? "1–2 osoby" : v.area<=90 ? "rodinu 3+" : "rodinu 4+ s rezervou"],
        ].map(([label, fn], i) => (
          <div key={i} className="cmp-row">
            <div className="cmp-cell cmp-lbl">{label}</div>
            {variants.map(v => (
              <div key={v.id} className={"cmp-cell"+(v.popular?" pop":"")}>{fn(v)}</div>
            ))}
          </div>
        ))}
        <div className="cmp-row cmp-foot">
          <div className="cmp-cell"></div>
          {variants.map(v => (
            <div key={v.id} className={"cmp-cell"+(v.popular?" pop":"")}>
              <button className={"btn sm "+(v.popular?"":"ghost")} onClick={()=>setPage("config")}>Upravit v konfigurátoru →</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =================================================================
   4. UPLOAD PŮDORYSU
   ================================================================= */
function UploadPlan({ setPage }) {
  const [file, setFile] = useStateE(null);
  const [drag, setDrag] = useStateE(false);
  const [sent, setSent] = useStateE(false);
  const inputRef = useRefE(null);

  const onDrop = (e) => { e.preventDefault(); setDrag(false); if (e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]); };
  const onFile = (e) => { if (e.target.files[0]) setFile(e.target.files[0]); };
  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(()=>setSent(false), 3000); };

  return (
    <section className="section app" id="upload-section" style={{paddingTop:0}}>
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Máte půdorys?</span>
          <h2 className="h2">Nahrajte ho. Ověříme, jestli<br/>jde převést do modulu 625 mm.</h2>
          <p>Stačí PDF, JPG, PNG nebo DWG. Do 24 hodin se ozveme s odhadem proveditelnosti, počtem prvků a orientační cenou.</p>
        </div>
      </div>
      <form className="upload" onSubmit={submit}>
        <div
          className={"upload-drop"+(drag?" drag":"")+(file?" filled":"")}
          onDragOver={e=>{e.preventDefault();setDrag(true);}}
          onDragLeave={()=>setDrag(false)}
          onDrop={onDrop}
          onClick={()=>inputRef.current?.click()}
        >
          {!file ? (
            <>
              <div className="upload-ic">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                  <path d="M12 17V3M5 10l7-7 7 7M3 21h18"/>
                </svg>
              </div>
              <div className="upload-hd">Přetáhněte půdorys sem</div>
              <div className="upload-sub">nebo <span className="linkish">vyberte soubor z počítače</span></div>
              <div className="upload-fmt">PDF · JPG · PNG · DWG · max 20 MB</div>
            </>
          ) : (
            <>
              <div className="upload-ic">📄</div>
              <div className="upload-hd">{file.name}</div>
              <div className="upload-sub">{(file.size/1024).toFixed(0)} KB · {file.type || "neznámý formát"}</div>
              <button type="button" className="linkish" onClick={(e)=>{e.stopPropagation();setFile(null);}}>Vybrat jiný soubor</button>
            </>
          )}
          <input ref={inputRef} type="file" hidden onChange={onFile} accept=".pdf,.jpg,.jpeg,.png,.dwg"/>
        </div>
        <div className="upload-form">
          <label><span>Vaše jméno</span><input required type="text" placeholder="Jan Novák"/></label>
          <label><span>E-mail</span><input required type="email" placeholder="vy@example.cz"/></label>
          <label><span>Lokalita stavby</span><input type="text" placeholder="Třebíč, ČR"/></label>
          <label><span>Poznámka</span><textarea rows="3" placeholder="Co o projektu víme? Časový horizont, požadavky…"/></label>
          <button type="submit" className={"btn"+(sent?" accent":"")} disabled={!file}>
            {sent ? "✓ Odesláno — ozveme se do 24 h" : "Odeslat ke kontrole →"}
          </button>
          <div className="muted" style={{fontSize:12,marginTop:6}}>Vaše data zůstanou neveřejná. Posíláme do interní fronty projektantů.</div>
        </div>
      </form>
    </section>
  );
}

/* =================================================================
   5. INSPIRACE PODLE VELIKOSTI
   ================================================================= */
function SizeInspiration() {
  const [size, setSize] = useStateE("60-80");
  const sizes = [
    { id:"-40",     label:"do 40 m²",    use:"studio · home office · zahradní pokoj" },
    { id:"40-60",   label:"40–60 m²",    use:"přístavba · víkendová chata · garsonka" },
    { id:"60-80",   label:"60–80 m²",    use:"bungalov pro pár · 2+kk · 3+kk kompakt" },
    { id:"80-100",  label:"80–100 m²",   use:"rodinný bungalov · 3+kk komfort · 4+kk" },
    { id:"100+",    label:"100+ m²",     use:"větší rodina · 4+kk · 5+kk · pracovna" },
  ];
  const examples = {
    "-40":    [["Studio 6×4","24 m²","1+kk","bydlení / dílna"], ["Zahradní pokoj 5×4","20 m²","1 prostor","klid / práce"], ["Modul 4×4","16 m²","sklad / wellness","přístavba"]],
    "40-60":  [["Přístavba 8×5","40 m²","2 místnosti","rozšíření domu"], ["Chata 8×6","48 m²","2+kk","víkend"], ["Garsonka 10×5","50 m²","1+kk","kompakt"]],
    "60-80":  [["Bungalov 9×7","63 m²","2+kk","pár"], ["Bungalov 10×7","70 m²","3+kk","mladá rodina"], ["Bungalov 10×8","80 m²","3+kk","rodina 3+"]],
    "80-100": [["Bungalov 11×8","88 m²","3+kk komfort","rodina 3+"], ["Bungalov 11×9","99 m²","4+kk","rodina 4"], ["L bungalov 10×10","100 m²","4+kk","atrium"]],
    "100+":   [["Bungalov 12×10","120 m²","4+kk","rodina 4+"], ["L bungalov 13×10","130 m²","5+kk","velká rodina"], ["Bungalov 14×11","154 m²","5+kk + pracovna","komfort"]],
  };
  return (
    <section className="section app" style={{paddingTop:0}}>
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Inspirace podle velikosti</span>
          <h2 className="h2">Kolik domu se vejde<br/>do vaší plochy?</h2>
          <p>Vyberte velikost a uvidíte, co v ní typicky funguje. Konkrétní rozměry pak doladíte v konfigurátoru.</p>
        </div>
      </div>
      <div className="size-tabs">
        {sizes.map(s => (
          <button key={s.id} className={"size-tab"+(size===s.id?" active":"")} onClick={()=>setSize(s.id)}>
            <b>{s.label}</b>
            <span>{s.use}</span>
          </button>
        ))}
      </div>
      <div className="size-grid">
        {examples[size].map(([name,area,layout,target],i) => (
          <div key={i} className="size-card">
            <div className="size-vis">
              <svg viewBox="0 0 200 140">
                <rect x="20" y="30" width="160" height="80" fill="var(--primary-soft)" opacity="0.4"/>
                <rect x="20" y="30" width="160" height="80" fill="none" stroke="var(--fg)" strokeWidth="1.5"/>
                {Array.from({length:8}).map((_,j)=>(
                  <line key={j} x1={20+j*22} y1={30} x2={20+j*22} y2={110} stroke="var(--primary)" strokeOpacity={j===0||j===7?0:0.25} strokeWidth="0.6"/>
                ))}
                <rect x="50" y="27" width="20" height="6" fill="var(--accent)"/>
                <rect x="100" y="27" width="20" height="6" fill="var(--accent)"/>
                <rect x="150" y="27" width="14" height="6" fill="var(--primary)"/>
              </svg>
            </div>
            <div className="size-meta">
              <h4>{name}</h4>
              <div className="size-row"><span>Plocha</span><b>{area}</b></div>
              <div className="size-row"><span>Dispozice</span><b>{layout}</b></div>
              <div className="size-row"><span>Vhodné pro</span><b>{target}</b></div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* =================================================================
   6. STICKY PROJEKTOVÝ PANEL — bottom on mobile, top-right on desktop
   ================================================================= */
function ProjectPanel({ cart, setPage, openCart }) {
  const count = cart.reduce((s,i)=>s+i.qty, 0);
  const total = cart.reduce((s,i)=>s+i.price*i.qty, 0);
  if (count === 0) return null;
  return (
    <div className="proj-panel">
      <div className="proj-info">
        <div className="proj-lbl">Moje konfigurace</div>
        <div className="proj-meta">
          <span>{count} položek</span>
          <span className="dot">·</span>
          <span><b>od {total.toLocaleString("cs-CZ")} Kč</b></span>
        </div>
      </div>
      <div className="proj-cta">
        <button className="btn sm ghost" onClick={openCart}>Zobrazit</button>
        <button className="btn sm accent" onClick={()=>setPage("kontakt")}>Odeslat ke kontrole →</button>
      </div>
    </div>
  );
}

/* =================================================================
   7. BENTO GRID — výhody systému
   ================================================================= */
function Bento({ setPage }) {
  return (
    <section className="section app" style={{paddingTop:0}}>
      <div className="sec-head">
        <div className="sec-head-text">
          <span className="eyebrow">Proč STAV</span>
          <h2 className="h2">Šest věcí,<br/>které dělají rozdíl.</h2>
        </div>
      </div>
      <div className="bento">
        <div className="bento-cell">
          <div className="bento-eye">— 01 · Modul 625 mm</div>
          <h3>Stejný rastr.<br/>Po celou stavbu.</h3>
          <p>Žebra, otvory, profily — vše respektuje jeden modul. Odpadají individuální korekce a tolerance.</p>
        </div>
        <div className="bento-cell">
          <div className="bento-eye">— 02 · Výkaz online</div>
          <h3>Soupis prvků<br/>za pár minut.</h3>
          <p>Konfigurátor spočítá počet žeber, profilů a překladů automaticky.</p>
        </div>
        <div className="bento-cell">
          <div className="bento-eye">— 03 · Cena ihned</div>
          <h3>Orientace<br/>v reálném čase.</h3>
          <p>Při každé změně rozměru uvidíte aktualizovanou cenu konstrukce.</p>
        </div>
        <div className="bento-cell">
          <div className="bento-eye">— 04 · Buildability</div>
          <h3>Návrh sám<br/>kontroluje pravidla.</h3>
          <p>Modulové rozměry, počet otvorů, vhodnost střechy. Skóre 0–100 % řekne, kdy je čas zavolat projektantovi.</p>
          <button className="btn sm ghost" onClick={()=>setPage("config")}>Vyzkoušet →</button>
        </div>
        <div className="bento-cell">
          <div className="bento-eye">— 05 · 4 typy prvků</div>
          <h3>Méně dílů.<br/>Jednodušší logika.</h3>
          <p>U profil, žebro, věncový profil, doplňky pro otvory. To je celá sada.</p>
        </div>
        <div className="bento-cell">
          <div className="bento-eye">— 06 · Svépomocí</div>
          <h3>Postup, který<br/>se dá pochopit.</h3>
          <p>Prvky do sebe zapadají v definovaných pozicích. Žádné improvizace.</p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StartingPoint, Anatomy, VariantCompare, UploadPlan, SizeInspiration, ProjectPanel, Bento });