// Produktkarte — überall verwendet

const ProductCard = ({p, onOpen, onAdd}) => {
  const { wish, toggleWish } = useApp();
  const isWished = wish.includes(p.id);
  return (
    <div className="card" onClick={()=>onOpen(p)}>
      <div className={"imgwrap"+(p.hasStudio?" studio":"")}>
        <Ph tone={p.tone} src={p.img} label={p.mono} alt={p.name}/>
        {p.imgHover && p.imgHover !== p.img && (
          <img className="hover-img" src={p.imgHover} alt="" loading="lazy" referrerPolicy="no-referrer"/>
        )}
        <div className="flags">
          {p.flag==='new' && <span className="flag new">Neu</span>}
          {p.flag==='offer' && <span className="flag brass">Limitiert</span>}
          {p.price==null && <span className="flag">Auf Anfrage</span>}
        </div>
        <button className={`wish ${isWished?'on':''}`} onClick={(e)=>{e.stopPropagation();toggleWish(p.id)}} aria-label="Merken">
          <Icon name="heart"/>
        </button>
        <div className="qa">
          <button onClick={(e)=>{e.stopPropagation();onAdd(p)}}>{p.sizes.length>1?'Schnellansicht':'In den Warenkorb'}</button>
          <button className="eye" onClick={(e)=>{e.stopPropagation();onOpen(p)}}><Icon name="arrow"/></button>
        </div>
      </div>
      <div className="meta">
        <div>
          <div className="cat">{p.cat}</div>
          <div className="nm">{p.name}</div>
          <div className="swatches">
            {p.tones.slice(0,4).map((t,i)=><Swatch key={i} c={t}/>)}
          </div>
        </div>
        <div className="pr">
          {p.price==null ? <span style={{fontSize:12,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--ink-2)'}}>Auf Anfrage</span> :
            p.priceMax ? <><span className="from">ab</span>{fmt(p.price)}</> :
            fmt(p.price)
          }
        </div>
      </div>
    </div>
  );
};

const Home = () => {
  const { go, openPDP, quickAdd } = useApp();
  const heroProducts = ['satori','tukkon-console','zen-console'].map(id=>PRODUCTS.find(p=>p.id===id));
  const [heroI, setHeroI] = React.useState(0);
  const hero = heroProducts[heroI];
  const bestsellers = ['kinko','zen-dining','origami','taisho'].map(id=>PRODUCTS.find(p=>p.id===id));
  const newPieces = PRODUCTS.filter(p=>p.flag==='new').slice(0,3);

  return <>
    {/* HERO */}
    <section className="hero hero-video">
      <video className="hero-bg" autoPlay muted loop playsInline preload="metadata" poster="assets/hero-poster.jpg">
        <source src="assets/hero-video.webm" type="video/webm"/>
        <source src="assets/hero-video.mp4" type="video/mp4"/>
      </video>
      <div className="hero-grad"></div>
      <div className="hero-copy">
        <div className="hero-copy-row">
          <div className="hero-copy-left">
            <div>
              <div className="eyebrow">Manufaktur für Metallmöbel · Nürtingen</div>
              <h1>Metall <span className="accent-word">mit Seele</span>.</h1>
              <p className="hero-sub">Messing, Stahl, Kupfer. Von Hand geformt seit 2000.</p>
            </div>
            <div className="hero-cta">
              <button className="btn" onClick={()=>go({page:'shop'})}>Kollektion entdecken <Icon name="arrow"/></button>
              <button className="btn ghost" onClick={()=>go({page:'about'})}>Über uns</button>
            </div>
          </div>
          <div className="hero-copy-right">
            <div className="pill">
              <div className="micro">Im Bild · ZEN Esstisch</div>
              <div className="name">ZEN DINING TABLE</div>
              <div className="price">Messing, handgeschliffen · ab {fmt(3150)}</div>
              <div style={{marginTop:12,display:'flex',gap:10,alignItems:'center'}}>
                <button className="link-u" onClick={()=>openPDP(PRODUCTS.find(p=>p.id==='zen-dining'))}>Stück ansehen</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <TrustStrip />

    {/* KATEGORIEN */}
    <section className="sect">
      <div className="sect-head">
        <div>
          <div className="eyebrow">01 · Kategorien</div>
          <h2>28 Stücke. <span className="accent-word">Kein Stück zuviel.</span></h2>
          <p className="sect-sub">Kein saisonaler Wechsel. Was wir anfangen, bleibt. Und wird besser mit der Zeit.</p>
        </div>
        <div className="right"><button className="link-u" onClick={()=>go({page:'shop'})}>Alle Stücke <Icon name="arrow"/></button></div>
      </div>
      <div className="cats">
        {CATEGORIES.map(c=>(
          <div className="cat" key={c.id} onClick={()=>go({page:'shop', filter:c.name})}>
            <Ph tone={c.tone} src={c.img} label={`${c.name.toUpperCase()} · ${c.count} STÜCKE`}/>
            <div className="overlay"/>
            <div className="cap">
              <div>
                <div className="t">{c.name}</div>
                <div className="c">{c.line}</div>
              </div>
              <div className="c">{String(c.count).padStart(2,'0')}</div>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* BESTSELLER */}
    <section className="sect" style={{paddingTop:0}}>
      <div className="sect-head">
        <div>
          <div className="eyebrow">02 · Signature-Stücke</div>
          <h2>Was <span className="accent-word">bleibt.</span></h2>
        </div>
        <div className="right"><button className="link-u" onClick={()=>go({page:'shop'})}>Alles ansehen <Icon name="arrow"/></button></div>
      </div>
      <div className="grid">
        {bestsellers.map(p=> <ProductCard key={p.id} p={p} onOpen={openPDP} onAdd={quickAdd}/>)}
      </div>
    </section>

    {/* SPLIT ZEN */}
    <section className="split">
      <div className="txt">
        <div className="eyebrow">Kollektion · ZEN</div>
        <h3>Eine Grammatik <span className="accent-word">in sechs Stücken.</span></h3>
        <p>Tisch, Bank, Konsole, drei Regale. Alle nach derselben Regel gebaut: schwere Platte, leichteste Basis. ZEN war unsere erste Kollektion. Sechs Jahre später bestellen Kunden sie immer noch zuerst.</p>
        <div style={{marginTop:32,display:'flex',gap:12,flexWrap:'wrap'}}>
          <button className="btn" onClick={()=>go({page:'shop', filter:'ZEN'})}>ZEN entdecken <Icon name="arrow"/></button>
          <button className="btn ghost">Mehr über ZEN</button>
        </div>
      </div>
      <div className="img"><Ph tone="brass" src={"https://images.weserv.nl/?url=www.zincutec.eu/wp-content/uploads/2025/03/zen-esstisch-raum.jpg&w=1600"} label="ZEN · RAUMAUFNAHME"/></div>
    </section>

    {/* NEU */}
    <section className="sect" style={{borderTop:'1px solid var(--line)'}}>
      <div className="sect-head">
        <div>
          <div className="eyebrow">03 · Frühjahr 26 · Neu</div>
          <h2>Vier <span className="accent-word">Neuzugänge</span> in dieser Saison.</h2>
        </div>
        <div className="right"><button className="link-u" onClick={()=>go({page:'shop',filter:'new'})}>Alle neuen Stücke <Icon name="arrow"/></button></div>
      </div>
      <div className="grid g3">
        {newPieces.map(p=> <ProductCard key={p.id} p={p} onOpen={openPDP} onAdd={quickAdd}/>)}
      </div>
    </section>

    {/* ZITAT */}
    <section className="quote" style={{borderBottom:'1px solid var(--line)'}}>
      <div className="eyebrow">Kundenstimmen</div>
      <blockquote style={{marginTop:24}}>„Das Gewicht, die Oberfläche, die Sorgfalt in der Verpackung. Es kam an wie <span className="accent-word">ein Stück Architektur.</span> Wir haben den Raum um den Tisch herum neu gestellt."</blockquote>
      <cite>C. Bergmann · Hamburg · SATORI Esstisch</cite>
      <div className="press">
        <span>AD Germany</span><span>·</span><span>Wallpaper*</span><span>·</span><span>Architectural Digest</span><span>·</span><span>Dezeen</span>
      </div>
    </section>

    {/* ATELIER SPLIT */}
    <section className="split reverse">
      <div className="img"><Ph tone="dark" src={"https://images.weserv.nl/?url=www.zincutec.eu/wp-content/uploads/2026/03/slider-team.jpg&w=1600"} label="TEAM · NÜRTINGEN"/></div>
      <div className="txt">
        <div className="eyebrow">Wer wir sind</div>
        <h3>Ein Kollektiv. Ein Dach. <span className="accent-word">Kein Outsourcing.</span></h3>
        <p>Wir sind Freunde. Verbunden durch Kreativität, angetrieben durch Leidenschaft. Was hier rausgeht, wurde hier geschnitten, geschweißt und veredelt.</p>
        <div style={{marginTop:28}}><button className="btn" onClick={()=>go({page:'about'})}>Die Werkstatt kennenlernen <Icon name="arrow"/></button></div>
      </div>
    </section>

    {/* NEWSLETTER */}
    <section className="news">
      <div className="inner">
        <div className="eyebrow">Newsletter</div>
        <h3>Nah dran.<br/><span className="accent-word">An Metall und Macher.</span></h3>
        <p>Werkstatt-Updates, neue Stücke, limitierte Editionen. Selten, aber mit Substanz.</p>
        <form onSubmit={(e)=>{e.preventDefault();alert('Abonniert. Sie hören von uns.')}}>
          <input type="email" placeholder="ihre@adresse"/>
          <button type="submit">Abonnieren <Icon name="arrow"/></button>
        </form>
      </div>
    </section>
  </>;
};

Object.assign(window, { Home, ProductCard });