// Ankündigungsleiste, Navigation, Footer, Warenkorb-Drawer

const Announcement = () => {
  const items = [
    {i:"truck", t:"Kostenlose Premium-Lieferung in der EU ab 2.500 €"},
    {i:"shield", t:"2 Jahre Werkstatt-Garantie auf jedes Stück"},
    {i:"hand", t:"Handgefertigt in Nürtingen, Deutschland. Since 2000"},
    {i:"return", t:"30 Tage Rückgaberecht auf lagernde Stücke"},
  ];
  const [i,setI] = React.useState(0);
  React.useEffect(()=>{const t=setInterval(()=>setI(x=>(x+1)%items.length),3800);return()=>clearInterval(t)},[]);
  return (
    <div className="ann">
      <div className="slide"><Icon name={items[i].i}/> <span>{items[i].t}</span></div>
    </div>
  );
};

const Nav = () => {
  const { route, go, cart, wish, openCart } = useApp();
  const total = cart.reduce((s,l)=>s+l.qty,0);
  const [menu, setMenu] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{ document.body.style.overflow = menu ? 'hidden' : ''; }, [menu]);
  React.useEffect(()=>{
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, {passive:true});
    return () => window.removeEventListener('scroll', onScroll);
  }, [route.page]);
  const isHome = route.page === 'home';
  const clear = isHome && !scrolled && !menu;
  const nav = (target) => { setMenu(false); go(target); };
  return (
    <React.Fragment>
    <nav className={"nav"+(clear?" nav-clear":"")}>
      <div className="nav-inner">
        <button className="nav-burger" aria-label="Menü" onClick={()=>setMenu(true)}><Icon name="menu"/></button>
        <div className="nav-left">
          <a className={`link ${route.page==='shop'?'active':''}`} onClick={()=>go({page:'shop'})}>Shop</a>
          <a className={`link ${route.page==='collection'?'active':''}`} onClick={()=>go({page:'shop', filter:'zen'})}>Kollektionen</a>
          <a className="link" onClick={()=>go({page:'shop', filter:'new'})}>Neu</a>
          <a className={`link ${route.page==='about'?'active':''}`} onClick={()=>go({page:'about'})}>Über uns</a>
        </div>
        <a className="brand" onClick={()=>go({page:'home'})}>
          <img src={clear ? "assets/logo-white.png" : "assets/logo-black.png"} alt="ZinCuTec" className="logo-img"/>
        </a>
        <div className="nav-right">
          <button className="nav-icon link" aria-label="Suche"><Icon name="search"/></button>
          <button className="nav-icon link">DE / EN</button>
          <button className="nav-icon link b2b-link" onClick={()=>go({page:'b2b'})} aria-label="Händler-Login"><Icon name="lock"/> <span className="b2b-label">Händler</span></button>
          <button className="nav-icon link"><Icon name="heart"/> {wish.length>0 && <span className="cart-count">{wish.length}</span>}</button>
          <button className="nav-icon link" onClick={openCart}><Icon name="cart"/> <span className="cart-count">{total}</span></button>
        </div>
      </div>
    </nav>
    <div className={"mobile-menu"+(menu?" open":"")}>
      <div className="mm-head">
        <a className="brand" onClick={()=>nav({page:'home'})}>
          <img src="assets/logo-black.png" alt="ZinCuTec" className="logo-img" style={{height:22}}/>
        </a>
        <button onClick={()=>setMenu(false)} aria-label="Schließen"><Icon name="close"/></button>
      </div>
      <nav>
        <a onClick={()=>nav({page:'shop'})}>Shop <Icon name="arrow"/></a>
        <a onClick={()=>nav({page:'shop', filter:'zen'})}>Kollektionen <Icon name="arrow"/></a>
        <a onClick={()=>nav({page:'shop', filter:'new'})}>Neu <Icon name="arrow"/></a>
        <a onClick={()=>nav({page:'about'})}>Über uns <Icon name="arrow"/></a>
        <a onClick={()=>nav({page:'b2b'})}>Händler <Icon name="arrow"/></a>
      </nav>
      <div className="mm-foot">
        <div className="row"><span>Sprache</span><span>DE / EN</span></div>
        <div className="row"><span>Service</span><a>+49 7022 12345</a></div>
        <div className="row"><span>Werkstatt</span><span>Nürtingen, DE</span></div>
      </div>
    </div>
    </React.Fragment>
  );
};

const TrustStrip = () => (
  <div className="trust">
    <div><Icon name="hand"/><div className="t"><b>Handgefertigt</b><span>Manufaktur · Nürtingen</span></div></div>
    <div><Icon name="truck"/><div className="t"><b>Premium-Lieferung</b><span>Kostenlos in der EU ab 2.500 €</span></div></div>
    <div><Icon name="shield"/><div className="t"><b>Werkstatt-Garantie</b><span>Zwei Jahre, bei uns aufgearbeitet</span></div></div>
    <div><Icon name="return"/><div className="t"><b>30 Tage Rückgabe</b><span>Auf lagernde Stücke, ohne Nachfragen</span></div></div>
  </div>
);

const Footer = () => {
  const { go } = useApp();
  return (
    <footer>
      <div className="inner">
        <div>
          <img src="assets/logo-white.png" alt="ZinCuTec" style={{width:180,height:'auto',display:'block',marginBottom:16}}/>
          <p>Metallmöbel aus Nürtingen. Ein Dach, seit 2000. Metal becomes Art.</p>
          <div style={{display:'flex', gap:10, marginTop:24, flexWrap:'wrap'}}>
            <span className="paychip">VISA</span><span className="paychip">MC</span><span className="paychip">KLARNA</span><span className="paychip">PAYPAL</span><span className="paychip">APPLE PAY</span>
          </div>
        </div>
        <div><details open><summary><h5>Shop</h5></summary><ul>
          <li><a onClick={()=>go({page:'shop'})}>Alle Stücke</a></li>
          <li><a onClick={()=>go({page:'shop', filter:'Tische'})}>Tische</a></li>
          <li><a onClick={()=>go({page:'shop', filter:'Regale'})}>Regale</a></li>
          <li><a onClick={()=>go({page:'shop', filter:'Sitzen'})}>Sitzen</a></li>
          <li><a onClick={()=>go({page:'shop', filter:'Objekte'})}>Objekte</a></li>
        </ul></details></div>
        <div><details open><summary><h5>Kollektionen</h5></summary><ul>
          <li><a>ZEN</a></li><li><a>TUKKON</a></li><li><a>MYSTERY</a></li><li><a>Editionen</a></li>
        </ul></details></div>
        <div><details open><summary><h5>Über uns</h5></summary><ul>
          <li><a onClick={()=>go({page:'about'})}>Die Werkstatt</a></li>
          <li><a>Materialien</a></li>
          <li><a onClick={()=>go({page:'b2b'})}>Händler-Programm</a></li>
          <li><a>Presse</a></li>
          <li><a>Katalog PDF</a></li>
        </ul></details></div>
        <div><details open><summary><h5>Service</h5></summary><ul>
          <li><a>Versand und Lieferung</a></li>
          <li><a>Rückgabe</a></li>
          <li><a>Pflege und Patina</a></li>
          <li><a>FAQ</a></li>
          <li><a>Kontakt</a></li>
        </ul></details></div>
      </div>
      <div className="bottom">
        <div>© 2026 ZinCuTec GmbH · Siemensstr. 9–11, 72622 Nürtingen</div>
        <div>Impressum · Datenschutz · AGB · Widerruf</div>
      </div>
    </footer>
  );
};

const CartDrawer = () => {
  const { cart, closeCart, cartOpen, removeFromCart, updateQty, addToCart } = useApp();
  const subtotal = cart.reduce((s,l)=>s+(l.price*l.qty),0);
  const threshold = 2500;
  const toFree = Math.max(0, threshold - subtotal);
  const pct = Math.min(100, (subtotal/threshold)*100);
  const upsells = PRODUCTS.filter(p => !cart.find(l=>l.id===p.id) && p.price).slice(0,2);
  return <>
    <div className={`drawer-bg ${cartOpen?'open':''}`} onClick={closeCart}/>
    <div className={`drawer ${cartOpen?'open':''}`}>
      <div className="dh">
        <h4>Ihre Auswahl <span style={{color:'var(--ink-3)',fontSize:14,marginLeft:6}}>({cart.length})</span></h4>
        <button onClick={closeCart} aria-label="Schließen"><Icon name="close"/></button>
      </div>
      <div className="progress">
        <span style={{flexShrink:0,minWidth:'fit-content'}}>
          {toFree>0 ? <>Noch {fmt(toFree)} bis zur kostenlosen Lieferung</> : <>Kostenlose Lieferung freigeschaltet ✓</>}
        </span>
        <div className="pb"><span style={{width:pct+'%'}}/></div>
      </div>
      <div className="items">
        {cart.length===0 && <div style={{padding:'40px 0',textAlign:'center',color:'var(--ink-3)',fontSize:14}}>Ihre Auswahl ist leer.<br/>Beginnen Sie mit einem kleinen Stück.</div>}
        {cart.map((l,i)=>(
          <div className="li" key={i}>
            <div className="th"><Ph tone={l.tone} src={l.img}/></div>
            <div className="body">
              <div className="nm">{l.name}</div>
              <div className="v">{l.size} · {l.finish}</div>
              <div className="qc">
                <button onClick={()=>updateQty(i,l.qty-1)}><Icon name="minus"/></button>
                <div className="n">{l.qty}</div>
                <button onClick={()=>updateQty(i,l.qty+1)}><Icon name="plus"/></button>
              </div>
              <a className="rm" onClick={()=>removeFromCart(i)}>Entfernen</a>
            </div>
            <div className="price">{fmt(l.price*l.qty)}</div>
          </div>
        ))}
      </div>
      {cart.length>0 && <div className="upsell">
        <h5>Wird oft dazu bestellt</h5>
        {upsells.map(p=>(
          <div className="u" key={p.id} style={{marginBottom:10}}>
            <div className="th"><Ph tone={p.tone} src={p.img}/></div>
            <div>
              <div className="nm">{p.name}</div>
              <div className="p">ab {fmt(p.price)}</div>
            </div>
            <button className="add" onClick={()=>addToCart({id:p.id,name:p.name,tone:p.tone,img:p.img,price:p.price,size:p.sizes[0].k,finish:p.tones[0],qty:1})}>Hinzu</button>
          </div>
        ))}
      </div>}
      <div className="foot">
        <div className="row"><span>Zwischensumme</span><span>{fmt(subtotal)}</span></div>
        <div className="row"><span>Lieferung</span><span>{toFree>0?'An der Kasse berechnet':'Kostenlos'}</span></div>
        <div className="tot"><span>Gesamt</span><span>{fmt(subtotal)}</span></div>
        <button className="btn brass" disabled={cart.length===0}>Zur Kasse · {fmt(subtotal)} <Icon name="arrow"/></button>
        <div className="sec"><span>SSL sicher</span><span>·</span><span>inkl. MwSt.</span><span>·</span><span>Klarna</span></div>
      </div>
    </div>
  </>;
};

const Tweaks = () => {
  const { tweaks, setTweaks, tweaksAvail, tweaksOpen } = useApp();
  if (!tweaksAvail) return null;
  const setK = (k,v) => setTweaks({...tweaks, [k]:v});
  return (
    <div className={`tweaks ${tweaksOpen?'open':''}`}>
      <h5>Tweaks <span style={{color:'var(--ink-3)'}}>ZinCuTec</span></h5>
      <div className="body">
        <div>
          <label>Akzentfarbe</label>
          <div className="colors">
            {[['brass','#897643'],['copper','#b06a3b'],['steel','#6e6e6e'],['ink','#000000'],['white','#ffffff']].map(([k,c])=>(
              <button key={k} onClick={()=>setK('accent',k)} className={tweaks.accent===k?'on':''} style={{background:c, border: k==='white'?'1px solid var(--line)':undefined}}/>
            ))}
          </div>
        </div>
        <div>
          <label>Dichte</label>
          <div className="seg">
            {[['comfortable','Großzügig'],['compact','Kompakt']].map(([m,l])=><button key={m} className={tweaks.density===m?'on':''} onClick={()=>setK('density',m)}>{l}</button>)}
          </div>
        </div>
        <div>
          <label>Display-Font</label>
          <div className="seg">
            {[['bricolage','Bricolage'],['instrument','Instrument'],['onest','Onest'],['wix','Madefor'],['archivo','Archivo']].map(([m,l])=><button key={m} className={tweaks.display===m?'on':''} onClick={()=>setK('display',m)}>{l}</button>)}
          </div>
        </div>

        <div>
          <label>Startseiten-Hero</label>
          <div className="seg">
            {[['editorial','Editorial'],['fullbleed','Vollbild'],['grid','Raster']].map(([m,l])=><button key={m} className={tweaks.heroVariant===m?'on':''} onClick={()=>setK('heroVariant',m)}>{l}</button>)}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Announcement, Nav, TrustStrip, Footer, CartDrawer, Tweaks });