// Pages: Home, Shop, Product, LimitedEdition, HowItWorks, GlutenFree, About, FAQ

// ---------- SHOP ----------
const ShopPage = () => {
  const [filter, setFilter] = useStateP('all');
  const [sort, setSort] = useStateP('featured');
  const filtered = useMemoP(() => {
    let list = [...PRODUCTS, ...LIMITED.map(l => ({...l, line:'Limited', badge: l.badge || 'LIMITED', badgeTone:'gold'}))];
    if (filter !== 'all') list = list.filter(p =>
      filter === 'core' ? p.line === 'Core' :
      filter === 'limited' ? p.line === 'Limited' :
      filter === 'vegan' ? p.vegan :
      filter === 'spicy' ? p.spice >= 2 : true
    );
    if (sort === 'price-asc') list.sort((a,b)=>a.price-b.price);
    if (sort === 'price-desc') list.sort((a,b)=>b.price-a.price);
    if (sort === 'rating') list.sort((a,b)=>b.rating-a.rating);
    return list;
  }, [filter, sort]);

  const pageRef = usePageMotion();

  return (
    <main ref={pageRef} className="page-enter bg-warm">
      {/* Subhero */}
      <section className="bg-ink text-white relative overflow-hidden">
        <div className="absolute inset-0 marble-black opacity-80"/>
        <div className="absolute inset-0 bg-black/55"/>
        <div className="absolute inset-0 grain"/>
        <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-14 lg:py-20">
          <div className="text-[10px] tracking-mega uppercase text-gold mb-3">Shop</div>
          <h1 data-lines className="font-display font-bold text-5xl lg:text-6xl tracking-tight">
            <span className="line"><span className="line-inner">La <span className="font-serif-d italic font-medium text-gold">collezione</span></span></span>
          </h1>
          <p className="mt-4 text-white/70 max-w-xl">Cinque ricette core, drop limited a tiratura ridotta. Tutti senza glutine, surgelati e pronti in 5 minuti.</p>
        </div>
      </section>

      {/* Filters */}
      <div className="border-b hairline sticky top-16 lg:top-20 z-30 bg-warm/95 backdrop-blur">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-10 py-4 flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-1 lg:gap-2 overflow-x-auto no-scrollbar">
            {[
              ['all','Tutti'], ['core','Core'], ['limited','Limited'], ['vegan','Vegan'], ['spicy','Spicy'],
            ].map(([v,l])=>(
              <button key={v} onClick={()=>setFilter(v)} className={`px-4 h-9 text-[11px] tracking-wider2 uppercase font-display font-semibold whitespace-nowrap border ${filter===v?'bg-ink text-white border-ink':'bg-transparent border-ink/20 hover:border-ink'}`}>{l}</button>
            ))}
          </div>
          <div className="flex items-center gap-3 text-xs">
            <span className="text-ink/60 hidden sm:inline">Ordina per</span>
            <select value={sort} onChange={e=>setSort(e.target.value)} className="h-9 px-3 border border-ink/20 bg-transparent font-display tracking-wider2 uppercase text-[11px]">
              <option value="featured">In evidenza</option>
              <option value="price-asc">Prezzo crescente</option>
              <option value="price-desc">Prezzo decrescente</option>
              <option value="rating">Più amati</option>
            </select>
          </div>
        </div>
      </div>

      <section className="max-w-[1400px] mx-auto px-6 lg:px-10 py-12">
        <div data-reveal className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {filtered.map(p => <div key={p.slug} data-reveal-item><ProductCard p={p} limited={p.line === 'Limited'}/></div>)}
        </div>
      </section>
    </main>
  );
};

// ---------- PRODUCT (reusable) ----------
const ProductPage = ({ slug }) => {
  const all = [...PRODUCTS, ...LIMITED];
  const p = all.find(x => x.slug === slug) || PRODUCTS[0];
  const isLimited = LIMITED.some(l => l.slug === p.slug);
  const { add } = useCart();
  const { go } = useRouter();
  const [qty, setQty] = useStateP(1);
  const [tab, setTab] = useStateP('descrizione');
  const pageRef = usePageMotion();

  const gallery = [...new Set(
    [p.imgFrozen, p.imgAlt, p.img, p.imgPackaging, p.imgDeluxe, p.imgTop, p.imgHot].filter(Boolean)
  )];
  const [active, setActive] = useStateP(0);

  return (
    <main ref={pageRef} className="page-enter bg-warm">
      {/* Breadcrumb */}
      <div className="max-w-[1400px] mx-auto px-6 lg:px-10 pt-6 pb-2 text-xs text-ink/60 flex items-center gap-2">
        <a href="#home" onClick={(e)=>{e.preventDefault(); go('home');}} className="hover:text-ink">Home</a>
        <span>/</span>
        <a href="#shop" onClick={(e)=>{e.preventDefault(); go('shop');}} className="hover:text-ink">Shop</a>
        <span>/</span>
        <span className="text-ink">{p.name}</span>
      </div>

      <section className="max-w-[1400px] mx-auto px-6 lg:px-10 py-6 lg:py-10 grid lg:grid-cols-12 gap-10">
        {/* Gallery */}
        <div className="lg:col-span-7">
          <div className={`relative ${isLimited?'prod-bg-dark':'prod-bg-light'} aspect-[5/4]`}>
            <img src={gallery[active]} className="absolute inset-0 m-auto max-h-[88%] max-w-[88%] object-contain" alt={p.name}/>
            {p.badge && <div className="absolute top-5 left-5"><Badge tone={p.badgeTone || (isLimited?'gold':'red')}>{p.badge}</Badge></div>}
            {isLimited && !p.badge && <div className="absolute top-5 left-5"><Badge tone="gold">LIMITED</Badge></div>}
          </div>
          <div className="mt-4 grid grid-cols-4 sm:grid-cols-6 gap-3">
            {gallery.map((g,i)=>(
              <button key={i} onClick={()=>setActive(i)} aria-label={`Immagine ${i+1}`} className={`aspect-square ${isLimited?'prod-bg-dark':'prod-bg-light'} border transition-colors ${active===i?'border-ramen':'border-transparent hover:border-ink/25'}`}>
                <img src={g} className="w-full h-full object-contain p-2"/>
              </button>
            ))}
          </div>
        </div>

        {/* Info */}
        <div className="lg:col-span-5">
          <div className="lg:sticky lg:top-28">
            {p.badge && <div className="mb-3"><Badge tone={p.badgeTone || (isLimited?'gold':'red')}>{p.badge}</Badge></div>}
            <h1 className="font-display font-bold tracking-tight text-4xl lg:text-5xl">{p.name.toUpperCase()}</h1>
            <div className="mt-3 flex items-center gap-3"><Stars value={p.rating}/> <span className="text-sm text-ink/60">{p.rating} ({p.reviews} recensioni)</span></div>
            <p className="mt-5 text-ink/75 leading-relaxed">{p.long}</p>

            <ul className="mt-7 space-y-3 text-sm">
              <li className="flex items-center gap-3"><span className="w-8 h-8 rounded-full border border-ink/15 flex items-center justify-center"><Icon name="leaf" className="w-4 h-4"/></span> Senza glutine certificato</li>
              <li className="flex items-center gap-3"><span className="w-8 h-8 rounded-full border border-ink/15 flex items-center justify-center"><Icon name="clock" className="w-4 h-4"/></span> Pronto in 5 minuti</li>
              <li className="flex items-center gap-3"><span className="w-8 h-8 rounded-full border border-ink/15 flex items-center justify-center"><Icon name="snow" className="w-4 h-4"/></span> Surgelato subito</li>
              <li className="flex items-center gap-3"><span className="w-8 h-8 rounded-full border border-ink/15 flex items-center justify-center"><Icon name="bowl" className="w-4 h-4"/></span> Ricetta autentica · {p.weight}</li>
            </ul>

            <div className="mt-7 flex items-end justify-between border-t hairline pt-5">
              <div>
                <div className="text-[10px] tracking-mega uppercase text-ink/50">Prezzo</div>
                <div className="font-display font-bold text-3xl">€{p.price.toFixed(2)}</div>
                <div className="text-xs text-ink/50">IVA inclusa</div>
              </div>
              <div className="text-right text-xs text-ink/50">
                <div>Brodo: <span className="text-ink">{p.spice ? `Piccante ` : 'Delicato'}</span></div>
                <div className="mt-1 inline-flex items-center gap-2">Spice: <Spice level={p.spice||0}/></div>
              </div>
            </div>

            <div className="mt-5 flex items-center gap-3">
              <div className="inline-flex items-center border border-ink/20 h-12">
                <button onClick={()=>setQty(Math.max(1,qty-1))} className="w-12 h-12 hover:bg-ink/5"><Icon name="minus" className="w-4 h-4 mx-auto"/></button>
                <div className="w-12 text-center">{qty}</div>
                <button onClick={()=>setQty(qty+1)} className="w-12 h-12 hover:bg-ink/5"><Icon name="plus" className="w-4 h-4 mx-auto"/></button>
              </div>
              <Button variant={isLimited?'gold':'primary'} size="lg" className="flex-1" onClick={()=>add(p,qty)}>
                Aggiungi al carrello <Icon name="arrow-right" className="w-4 h-4"/>
              </Button>
            </div>
            <Button variant="ghost-light" size="md" className="w-full mt-3"><Icon name="heart" className="w-4 h-4"/> Aggiungi ai preferiti</Button>

            <div className="mt-6 grid grid-cols-2 gap-3 text-xs">
              <div className="flex items-center gap-2 border hairline p-3"><Icon name="truck" className="w-5 h-5"/><div><div className="font-display font-semibold tracking-wider2 uppercase text-[10px]">Consegna</div>24/48h refrigerata</div></div>
              <div className="flex items-center gap-2 border hairline p-3"><Icon name="lock" className="w-5 h-5"/><div><div className="font-display font-semibold tracking-wider2 uppercase text-[10px]">Pagamento</div>Sicuro · 3DS</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* Tabs */}
      <section className="max-w-[1400px] mx-auto px-6 lg:px-10 py-12">
        <div className="border-b hairline flex gap-6 lg:gap-10 overflow-x-auto no-scrollbar">
          {['descrizione','ingredienti','valori','preparazione'].map(t=>(
            <button key={t} onClick={()=>setTab(t)} className={`pb-4 text-[11px] tracking-wider2 uppercase font-display font-semibold whitespace-nowrap border-b-2 -mb-px ${tab===t?'border-ramen text-ink':'border-transparent text-ink/50 hover:text-ink'}`}>
              {t === 'descrizione'?'Descrizione':t==='ingredienti'?'Ingredienti':t==='valori'?'Valori nutrizionali':'Come si prepara'}
            </button>
          ))}
        </div>
        <div className="py-10 grid lg:grid-cols-12 gap-10">
          {tab==='descrizione' && (
            <>
              <div className="lg:col-span-7">
                <div className="font-serif-d text-3xl lg:text-4xl leading-snug max-w-xl">L'autentico {p.name.split(' ')[0]}, come in Giappone.</div>
                <p className="mt-6 text-ink/75 leading-relaxed max-w-xl">{p.long}</p>
                <p className="mt-4 text-ink/75 leading-relaxed max-w-xl">Noodles senza glutine dalla consistenza perfetta, accompagnati dai topping della tradizione. Semplice, autentico, irresistibile.</p>
              </div>
              <div className="lg:col-span-5">
                <div className="text-[10px] tracking-mega uppercase text-ink/50 mb-4">Nella bowl</div>
                <ul className="border-t hairline">
                  {(p.ingredients || []).slice(0,6).map(([t],i)=>(
                    <li key={i} className="border-b hairline py-3.5 flex items-center gap-4">
                      <span className="font-serif-d text-xl text-ramen w-8">{String(i+1).padStart(2,'0')}</span>
                      <span className="text-[11px] tracking-wider2 uppercase font-display font-semibold">{t}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </>
          )}
          {tab==='ingredienti' && (
            <div className="lg:col-span-12 grid md:grid-cols-2 gap-x-12 gap-y-2">
              {(p.ingredients || []).map(([t,d],i)=>(
                <div key={i} className="border-b hairline py-4 flex items-start gap-4">
                  <div className="text-[10px] tracking-mega uppercase text-ramen pt-1 w-6">{String(i+1).padStart(2,'0')}</div>
                  <div className="flex-1">
                    <div className="font-display font-semibold tracking-wider2 uppercase text-sm">{t}</div>
                    {d && <div className="text-sm text-ink/65 mt-1">{d}</div>}
                  </div>
                </div>
              ))}
            </div>
          )}
          {tab==='valori' && p.nutrition && (
            <div className="lg:col-span-8">
              <div className="text-xs text-ink/60 mb-3">Valori medi per porzione ({p.weight})</div>
              <table className="w-full">
                <tbody>
                  {[
                    ['Energia', `${p.nutrition.kcal} kcal`],
                    ['Grassi', `${p.nutrition.fat} g`],
                    ['di cui saturi', `${p.nutrition.sat} g`],
                    ['Carboidrati', `${p.nutrition.carb} g`],
                    ['di cui zuccheri', `${p.nutrition.sugar} g`],
                    ['Proteine', `${p.nutrition.prot} g`],
                    ['Sale', `${p.nutrition.salt} g`],
                  ].map(([k,v],i)=>(
                    <tr key={i} className="border-b hairline"><td className="py-3 text-ink/70">{k}</td><td className="py-3 text-right font-display font-semibold">{v}</td></tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
          {tab==='preparazione' && (
            <div className="lg:col-span-12 grid md:grid-cols-3 gap-6">
              {[
                ['01','Dal freezer','Estrai la confezione dal freezer e rimuovi il coperchio.'],
                ['02','Scalda','Segui la linea indicata sulla confezione e scalda secondo istruzioni.'],
                ['03','Servi','Mescola, aggiungi i topping e gusta entro pochi minuti.'],
              ].map(([n,t,s],i)=>(
                <div key={i} className="border hairline p-8">
                  <div className="font-serif-d text-6xl text-ramen leading-none">{n}</div>
                  <div className="mt-3 font-display font-semibold tracking-wider2 uppercase text-sm">{t}</div>
                  <div className="mt-2 text-sm text-ink/65">{s}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Cross-sell */}
      <section className="bg-ink text-white">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-10 py-16">
          <div className="flex items-end justify-between mb-8">
            <h3 className="font-display font-bold text-3xl lg:text-4xl tracking-tight">Potrebbe piacerti anche</h3>
            <button onClick={()=>go('shop')} className="text-[11px] tracking-wider2 uppercase text-gold hover:opacity-80">Vedi tutti →</button>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {PRODUCTS.filter(x=>x.slug!==p.slug).slice(0,4).map(x => <ProductCard key={x.slug} p={x} dark/>)}
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { ShopPage, ProductPage });