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

// ---------- VARIANTI (alias of shop with focus) ----------
const VariantiPage = () => {
  const pageRef = usePageMotion();
  return (
  <main ref={pageRef} className="page-enter bg-warm">
    <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/60"/>
      <div className="absolute inset-0 grain"/>
      <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-16 lg:py-24">
        <div className="text-[10px] tracking-mega uppercase text-gold mb-3">Le nostre varianti</div>
        <h1 data-lines className="font-display font-bold text-5xl lg:text-7xl tracking-tight">
          <span className="line"><span className="line-inner">Cinque ricette.</span></span>
          <span className="line"><span className="line-inner font-serif-d italic font-medium text-gold">Una sola filosofia.</span></span>
        </h1>
      </div>
    </section>
    <section className="max-w-[1400px] mx-auto px-6 lg:px-10 py-16 space-y-6">
      {PRODUCTS.map((p,i)=>(
        <article key={p.slug} data-reveal className={`grid lg:grid-cols-12 gap-8 items-center border hairline bg-white ${i%2?'':'lg:[direction:rtl]'}`}>
          <div className="lg:col-span-5 prod-bg-light aspect-[4/3] relative overflow-hidden [direction:ltr] group">
            <img src={p.img} className="absolute inset-0 m-auto max-h-[85%] max-w-[85%] object-contain transition-transform duration-700 group-hover:scale-105" alt={p.name}/>
            <span className="absolute bottom-4 left-4 font-serif-d text-5xl text-ramen/25 select-none" aria-hidden="true">0{i+1}</span>
          </div>
          <div data-reveal-item className="lg:col-span-7 p-8 lg:p-12 [direction:ltr]">
            <div className="text-[10px] tracking-mega uppercase text-ramen mb-2">0{i+1} · {p.line}</div>
            <h2 className="font-display font-bold text-3xl lg:text-5xl tracking-tight">{p.name.toUpperCase()}</h2>
            <p className="mt-4 text-ink/75 max-w-xl leading-relaxed">{p.long}</p>
            <div className="mt-5 flex items-center gap-3 text-xs">
              <Stars value={p.rating} size="w-4 h-4"/> <span className="text-ink/60">{p.rating} ({p.reviews})</span>
              <span className="ml-2 inline-flex items-center gap-1">Spice <Spice level={p.spice}/></span>
            </div>
            <div className="mt-7 flex gap-3 items-center">
              <ProductGoButton slug={p.slug}/>
              <span className="text-sm text-ink/60">da <span className="font-display font-semibold text-ink">€{p.price.toFixed(2)}</span></span>
            </div>
          </div>
        </article>
      ))}
    </section>
  </main>
  );
};

const ProductGoButton = ({slug}) => {
  const { go } = useRouter();
  return <Button variant="primary" onClick={()=>go(`product/${slug}`)}>Scopri <Icon name="arrow-right" className="w-4 h-4"/></Button>;
};

Object.assign(window, { VariantiPage });