// Produktdetailseite

const PDP = ({product}) => {
  const { openPDP, quickAdd, addToCart, openCart, go, toggleWish, wish } = useApp();
  const [img, setImg] = React.useState(0);
  const [size, setSize] = React.useState(0);
  const [finish, setFinish] = React.useState(0);
  const [qty, setQty] = React.useState(1);
  const [open, setOpen] = React.useState({desc:true});
  const related = PRODUCTS.filter(p=>p.id!==product.id && (p.category===product.category || p.cat===product.cat)).slice(0,4);
  const wishOn = wish.includes(product.id);
  const tones = product.tones;
  const MAT_MAP = {brass:'linear-gradient(135deg,#d7b56a,#8d6d3a)',copper:'linear-gradient(135deg,#d08863,#7c4a2a)',steel:'linear-gradient(135deg,#cdd0d3,#7b8087)',black:'linear-gradient(135deg,#3a352b,#141210)'};
  const TONE_NAME = {brass:'Messing, gebürstet',copper:'Kupfer, gealtert',steel:'Edelstahl, gebürstet',black:'Stahl, geschwärzt'};

  const price = product.price==null ? null : (product.priceMax ? product.price + (product.priceMax-product.price)*(size/Math.max(1,product.sizes.length-1)) : product.price) * qty;

  const handleAdd = () => {
    if (product.price==null) return;
    addToCart({id:product.id,name:product.name,tone:product.tone,img:product.img,price:Math.round(price/qty),size:product.sizes[size].k,finish:TONE_NAME[tones[finish]],qty});
    openCart();
  };

  return <>
    <div className="crumb"><a onClick={()=>go({page:'home'})}>Home</a><span>/</span><a onClick={()=>go({page:'shop'})}>Shop</a><span>/</span>{product.cat}<span>/</span>{product.name}</div>

    <div className="pdp">
      <div className="gallery">
        <div className="thumbs">
          {[0,1,2,3,4].map(i=>(
            <button key={i} className={img===i?'on':''} onClick={()=>setImg(i)}>
              <Ph tone={i%2===0?product.tone:(tones[1]||product.tone)} src={i===0?product.img:null}/>
            </button>
          ))}
        </div>
        <div>
          <div className="main-img"><Ph tone={img%2===0?product.tone:(tones[1]||product.tone)} src={img===0?product.img:null} label={product.mono} center={`${product.name} · ANSICHT ${String(img+1).padStart(2,'0')}`}/></div>
          <div className="pdp-room-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:10}}>
            <div style={{aspectRatio:'1/1',position:'relative',border:'1px solid var(--line)'}}><Ph tone={product.tone} label="IM RAUM"/></div>
            <div style={{aspectRatio:'1/1',position:'relative',border:'1px solid var(--line)'}}><Ph tone={tones[1]||product.tone} label="DETAIL"/></div>
          </div>
        </div>
      </div>

      <div className="info">
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
          <div>
            <div className="cat">{product.cat} · {product.category}</div>
            <h1>{product.name}</h1>
            <div className="by"><Stars n={5}/> <span style={{marginLeft:6}}>4,9 · 187 Bewertungen</span></div>
          </div>
          <button className="nav-icon link" onClick={()=>toggleWish(product.id)} style={{padding:8,border:'1px solid var(--line)',borderRadius:999,background:wishOn?'var(--paper-3)':'transparent'}}>
            <Icon name="heart"/>
          </button>
        </div>

        <div className="price">
          {product.price==null ? <span style={{fontSize:20,fontFamily:"Geist",textTransform:'uppercase',letterSpacing:'0.1em',color:'var(--ink-2)'}}>Preis auf Anfrage</span> :
            <>{fmt(price)} <span className="vat">inkl. MwSt. · Versand an der Kasse</span></>}
        </div>

        <p className="short">{product.desc} <em style={{color:'var(--brass-deep)'}}>{product.tagline}.</em></p>

        <div className="opt">
          <div className="lbl"><span>Oberfläche</span><b>{TONE_NAME[tones[finish]]}</b></div>
          <div className="finish-grid">
            {tones.map((t,i)=>(
              <button key={t} className={`finish ${finish===i?'on':''}`} onClick={()=>setFinish(i)} style={{background:MAT_MAP[t]}}>
                <span className="n">{t}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="opt">
          <div className="lbl"><span>Größe</span><b>{product.sizes[size].k}</b></div>
          <div className="size-grid">
            {product.sizes.map((s,i)=>(
              <button key={s.k} className={`size ${size===i?'on':''}`} onClick={()=>setSize(i)}>
                {s.k}<div className="dim">{s.dim}</div>
              </button>
            ))}
          </div>
        </div>

        <div className="opt">
          <div className="lbl"><span>Lieferung</span><b>{product.flag==='new'?'Auftragsarbeit · 6 – 8 Wochen':'Lagernd · Versand in 48 h'}</b></div>
          <div style={{fontSize:13,color:'var(--ink-2)',marginTop:10,lineHeight:1.6}}>
            <div>Kostenlose Premium-Lieferung in der EU ab 2.500 €. Zwei-Mann-Aufbau inklusive.</div>
          </div>
        </div>

        {product.price!=null ? <>
          <div className="qty">
            <div className="qbox">
              <button onClick={()=>setQty(Math.max(1,qty-1))}><Icon name="minus"/></button>
              <div className="n">{qty}</div>
              <button onClick={()=>setQty(qty+1)}><Icon name="plus"/></button>
            </div>
            <button className="btn brass" onClick={handleAdd}>In den Warenkorb · {fmt(price)} <Icon name="arrow"/></button>
          </div>
          <button className="btn ghost" style={{width:'100%',justifyContent:'center',marginTop:10}}>Händlerpreise anfragen</button>
        </> : <>
          <button className="btn brass" style={{width:'100%',justifyContent:'center'}}>Preis & Lieferzeit anfragen <Icon name="arrow"/></button>
        </>}

      </div>
    </div>

    <div className="pdp-below">
      <div className="pdp-below-left">
        <div className="accord">
          {[
            {id:'desc',h:'Beschreibung & Geschichte',b:`${product.desc} Jedes ${product.name} wird in unserer Werkstatt in Nürtingen geschnitten, geschweißt und veredelt. Das Stück wird dann gestempelt, nummeriert und in unserem Werkbuch vermerkt, sodass wir in zwanzig Jahren genau wissen, wer es gemacht hat, falls es jemals aufgearbeitet werden muss.`},
            {id:'spec',h:'Spezifikationen & Materialien',b:`Material: massives ${TONE_NAME[tones[0]].toLowerCase()}, innerer Stahlrahmen. Oberfläche: von Hand geschliffen, passiviert, mit mikrokristallinem Wachs versiegelt. Maße: ${product.sizes[size].dim}. Gewicht: ca. 42 kg. Gefertigt in Nürtingen, Deutschland.`},
            {id:'care',h:'Pflege & Patina',b:'Mit einem weichen, trockenen Tuch abwischen. Einmal im Jahr eine dünne Schicht des beigelegten Wachses auftragen. Messing und Kupfer patinieren mit der Zeit, dies ist beabsichtigt; wir lackieren nicht.'},
            {id:'ship',h:'Versand & Lieferung',b:'Lagernde Stücke werden innerhalb von 48 h versandt. Auftragsarbeiten benötigen 6 – 8 Wochen. Premium-Lieferung EU-weit (ab 2.500 € inklusive); weltweiter Versand an der Kasse berechnet.'},
            {id:'ret',h:'Rückgabe & Garantie',b:'30 Tage Rückgaberecht auf lagernde Stücke. Auftragsarbeiten sind vom Umtausch ausgeschlossen. Unsere Zwei-Jahres-Garantie deckt strukturelle oder Oberflächen-Mängel, wir arbeiten kostenlos im Haus nach.'},
          ].map(a=>(
            <div key={a.id} className={`acc ${open[a.id]?'open':''}`}>
              <button className="head" onClick={()=>setOpen({...open,[a.id]:!open[a.id]})}>{a.h}<span className="plus"/></button>
              <div className="body">{a.b}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="pdp-below-right">
        <div className="trust-mini">
          <div className="t"><Icon name="truck"/><div><b>Kostenlose Premium-Lieferung</b>Zwei-Mann-Aufbau, EU-weit</div></div>
          <div className="t"><Icon name="shield"/><div><b>Zwei Jahre Werkstatt-Garantie</b>Bei uns aufgearbeitet, kostenlos</div></div>
          <div className="t"><Icon name="return"/><div><b>30 Tage Rückgabe</b>Auf lagernde Stücke</div></div>
          <div className="t"><Icon name="hand"/><div><b>Nummeriert & signiert</b>Von unserem Team</div></div>
        </div>

        <div className="pdp-consult">
          <div style={{width:36,height:36,borderRadius:999,background:'var(--paper-3)',display:'inline-flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
            <Icon name="user"/>
          </div>
          <div style={{fontSize:13,color:'var(--ink-2)',lineHeight:1.5}}>
            <b style={{color:'var(--ink)'}}>Beratung gewünscht?</b><br/>Direkt mit unserem Team sprechen. Per Videocall oder E-Mail, bevor Sie bestellen.
          </div>
          <button className="btn sm ghost" style={{width:'100%',justifyContent:'center',marginTop:8}}>Termin buchen</button>
        </div>
      </div>
    </div>

    <div className="pdp-spec">
      <div>
        <div className="eyebrow">Das Stück</div>
        <h3>Wie das {product.name.toLowerCase()} entsteht.</h3>
        <p>Jedes ZinCuTec-Stück beginnt als flache Platte. Sie wird geschnitten, gefaltet, geschweißt, geschliffen, patiniert, versiegelt, und dann eine Woche ruhen gelassen, bevor sie geprüft, gestempelt und versandt wird. Der Prozess hat sich seit 2000 nicht geändert. Weil es nicht nötig war.</p>
        <div style={{marginTop:24,display:'flex',gap:12}}>
          <button className="link-u">Der Werkstatt-Film <Icon name="arrow"/></button>
          <button className="link-u">Materialproben</button>
        </div>
      </div>
      <div>
        <div className="eyebrow">Spezifikationen</div>
        <div className="specs" style={{marginTop:14}}>
          {[
            ['Kollektion', product.category],
            ['Maße', product.sizes[size].dim],
            ['Material', TONE_NAME[tones[finish]]],
            ['Gewicht', 'ca. 42 kg'],
            ['Aufbau', 'Inklusive · 2 Personen'],
            ['Lieferzeit', product.flag==='new'?'6 – 8 Wochen':'48 h Versand'],
            ['Herkunft', 'Nürtingen, Deutschland'],
            ['Edition', product.price!=null?'Offen':'Nummeriert · 25 Stück'],
          ].map(r=> <div className="r" key={r[0]}><span>{r[0]}</span><span>{r[1]}</span></div>)}
        </div>
      </div>
    </div>

    <div className="pdp-review">
      <div className="eyebrow">Kundenbewertungen</div>
      <div style={{marginTop:14}}/>
      <div className="pdp-review-head">
        <div>
          <div className="star-big">4,9<span style={{fontSize:22,color:'var(--ink-3)'}}> / 5</span></div>
          <div style={{marginTop:10}}><Stars n={5}/> <span style={{fontSize:13,color:'var(--ink-2)',marginLeft:6}}>{REVIEWS_SUMMARY.count} verifizierte Kunden</span></div>
          <button className="btn sm ghost" style={{marginTop:18}}>Bewertung schreiben</button>
        </div>
        <div className="rev-bars">
          {REVIEWS_SUMMARY.dist.map((v,i)=>(
            <div className="r" key={i}>
              <span>{5-i}★</span>
              <div className="bar"><span style={{width:v+'%'}}/></div>
              <span>{v}%</span>
            </div>
          ))}
        </div>
      </div>
      <div className="reviews-grid">
        {REVIEWS.map((r,i)=>(
          <div className="review" key={i}>
            <div className="who"><span>{r.who} · {r.city}</span><Stars n={r.rating}/></div>
            <div style={{marginTop:10,fontFamily:'"Geist",sans-serif',fontSize:22,lineHeight:1.15}}>{r.title}</div>
            <p>„{r.text}"</p>
            <div style={{marginTop:12,fontFamily:'JetBrains Mono, monospace',fontSize:10,letterSpacing:'0.14em',textTransform:'uppercase',color:'var(--ink-3)'}}>Verifiziert · März 2026</div>
          </div>
        ))}
      </div>
    </div>

    <section className="sect" style={{borderTop:'1px solid var(--line)',borderBottom:0}}>
      <div className="sect-head">
        <div>
          <div className="eyebrow">Den Raum vervollständigen</div>
          <h2>Stücke, die oft <span className="accent-word">zusammen wohnen.</span></h2>
        </div>
        <button className="link-u" onClick={()=>go({page:'shop'})}>Alles ansehen <Icon name="arrow"/></button>
      </div>
      <div className="grid">
        {related.map(p=> <ProductCard key={p.id} p={p} onOpen={openPDP} onAdd={quickAdd}/>)}
      </div>
    </section>
  </>;
};

Object.assign(window, { PDP });