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

// ---------- LIMITED EDITION PAGE ----------
const LimitedEditionPage = () => {
  const p = LIMITED[0]; // Black Garlic with countdown
  const truffle = LIMITED[1];
  const { go } = useRouter();
  const [t, setT] = useStateP(()=> {
    const target = Date.now() + (p.countdown.days*86400 + p.countdown.hours*3600 + p.countdown.minutes*60 + p.countdown.seconds) * 1000;
    return target;
  });
  const [now, setNow] = useStateP(Date.now());
  useEffectP(()=>{
    const id = setInterval(()=> setNow(Date.now()), 1000);
    return ()=> clearInterval(id);
  },[]);
  const diff = Math.max(0, Math.floor((t - now)/1000));
  const dd = Math.floor(diff/86400);
  const hh = Math.floor((diff%86400)/3600);
  const mm = Math.floor((diff%3600)/60);
  const ss = diff%60;
  const pageRef = usePageMotion();

  return (
    <main ref={pageRef} className="page-enter bg-ink text-white">
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 marble-black"/>
        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/55 to-black/85"/>
        <div className="absolute inset-0 grain"/>
        <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-16 lg:py-24 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-6">
            <div className="inline-block border border-gold/60 px-3 py-1 text-[10px] tracking-mega uppercase text-gold mb-6">Limited Edition · Drop 02</div>
            <h1 data-lines className="font-display font-bold tracking-tight text-6xl lg:text-8xl leading-[0.9]">
              <span className="line"><span className="line-inner text-white">BLACK GARLIC</span></span>
              <span className="line"><span className="line-inner font-serif-d italic font-medium text-gold lowercase">ramen</span></span>
            </h1>
            <p className="mt-6 text-white/80 text-lg max-w-md">Un'edizione limitata. Intensa. Profonda. Indimenticabile.</p>
            <div className="mt-8 flex flex-wrap gap-6">
              {[['leaf','Aglio nero fermentato'],['bowl','Brodo ricco e avvolgente'],['leaf','100% Gluten Free']].map(([i,t],k)=>(
                <div key={k} className="flex items-center gap-2 text-sm text-white/85"><span className="w-9 h-9 rounded-full border border-gold/40 flex items-center justify-center text-gold"><Icon name={i} className="w-4 h-4"/></span> {t}</div>
              ))}
            </div>

            {/* Countdown */}
            <div className="mt-10 border border-gold/30 bg-black/40 backdrop-blur p-6 max-w-md">
              <div className="text-center text-[10px] tracking-mega uppercase text-gold mb-4">Disponibile tra</div>
              <div className="grid grid-cols-4 gap-2 text-center">
                {[['GIORNI',dd],['ORE',hh],['MINUTI',mm],['SECONDI',ss]].map(([l,v],k)=>(
                  <div key={k}>
                    <div className="font-serif-d text-4xl lg:text-5xl text-gold tabular-nums">{String(v).padStart(2,'0')}</div>
                    <div className="text-[9px] tracking-mega uppercase text-white/60 mt-1">{l}</div>
                  </div>
                ))}
              </div>
              <div className="mt-5"><Button variant="gold" className="w-full"><Icon name="bell" className="w-4 h-4"/> Notifica il lancio</Button></div>
              <div className="mt-3 text-[10px] tracking-wider2 uppercase text-white/50 text-center">Iscriviti e ricevi un promemoria.</div>
            </div>
          </div>
          <div className="lg:col-span-6">
            <div data-parallax="0.08">
              <img src="assets/products/black-garlic-full.png" className="w-full max-w-lg mx-auto drop-shadow-[0_40px_60px_rgba(0,0,0,0.6)]" alt="Black Garlic"/>
            </div>
          </div>
        </div>
      </section>

      <section className="border-y border-white/10 bg-black/40">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-10 grid grid-cols-2 lg:grid-cols-4">
          {[['leaf','Senza glutine','certificato'],['bowl','Ingredienti','naturali'],['snow','Surgelato subito','per preservare bontà'],['clock','Pronto in 5 minuti','semplice e veloce']].map(([i,t,s],k)=>(
            <div key={k} className="flex items-center gap-3 p-6 border-r border-white/10 last:border-r-0">
              <span className="w-10 h-10 rounded-full border border-white/15 flex items-center justify-center text-gold"><Icon name={i} className="w-4 h-4"/></span>
              <div>
                <div className="text-[10px] tracking-mega uppercase">{t}</div>
                <div className="text-xs text-white/60">{s}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="relative">
        <div className="absolute inset-0 marble-black opacity-90"/>
        <div className="absolute inset-0 bg-black/55"/>
        <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-20 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-5">
            <div data-parallax="0.08">
              <img src="assets/products/black-garlic-top.png" className="w-full" alt="Black Garlic Ramen dall'alto"/>
            </div>
          </div>
          <div data-reveal className="lg:col-span-7">
            <div data-reveal-item className="text-center lg:text-left text-[10px] tracking-mega uppercase text-gold mb-3">Limited Edition</div>
            <h2 data-reveal-item className="font-display font-bold text-4xl lg:text-5xl tracking-tight">SOLO PER UN TEMPO <span className="font-serif-d italic font-medium text-gold lowercase">limitato</span></h2>
            <div data-reveal-item className="mt-6 font-serif-d italic text-2xl lg:text-3xl text-white/85 max-w-xl">L'umami nella sua forma più profonda.</div>
            <p data-reveal-item className="mt-6 text-white/75 max-w-xl leading-relaxed">{p.long} Il brodo ricco di aglio nero fermentato, funghi shiitake e olio al sesamo nero regala un'esperienza unica, profonda e avvolgente.</p>
            <div data-reveal-item className="mt-8 grid grid-cols-2 sm:grid-cols-4 gap-4 max-w-xl">
              {[['Aglio nero','fermentato'],['Funghi','shiitake'],['Olio sesamo','nero'],['Cipollotto','fresco']].map(([t,s],k)=>(
                <div key={k} className="border border-white/10 p-4 text-center">
                  <Icon name="leaf" className="w-6 h-6 text-gold mx-auto"/>
                  <div className="mt-2 text-[10px] tracking-mega uppercase">{t}</div>
                  <div className="text-[10px] text-white/55">{s}</div>
                </div>
              ))}
            </div>
            <div data-reveal-item className="mt-8 border border-gold/40 p-5 flex items-center gap-4 max-w-xl">
              <Icon name="box" className="w-8 h-8 text-gold"/>
              <div>
                <div className="text-[11px] tracking-wider2 uppercase font-display font-semibold">Edizione Limitata</div>
                <div className="text-xs text-white/65">Prodotta in quantità limitata. Una volta esaurita, non tornerà fino alla prossima uscita.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Past drops */}
      <section className="bg-ink py-20">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-10">
          <div className="text-[10px] tracking-mega uppercase text-gold mb-3">Drop precedenti</div>
          <h3 className="font-display font-bold text-3xl lg:text-4xl tracking-tight">Le edizioni che hanno fatto storia</h3>
          <div className="mt-8 grid sm:grid-cols-2 gap-6">
            <ProductCard p={truffle} dark limited/>
            <div className="border border-white/10 p-8 flex flex-col justify-center">
              <div className="text-[10px] tracking-mega uppercase text-gold">Drop 03 · in arrivo</div>
              <div className="mt-3 font-display font-bold text-3xl tracking-tight">YUZU SHIO?</div>
              <p className="mt-3 text-white/65 text-sm">La prossima edizione è ancora un segreto. Iscriviti per essere il primo a saperlo.</p>
              <div className="mt-6"><Button variant="gold" size="md" onClick={()=>go('home')}>Iscriviti alla newsletter</Button></div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

// ---------- HOW IT WORKS ----------
const HowItWorksPage = () => {
  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/55"/>
      <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">Come funziona</div>
        <h1 data-lines className="font-display font-bold text-5xl lg:text-7xl tracking-tight max-w-4xl">
          <span className="line"><span className="line-inner">Dal freezer alla bowl</span></span>
          <span className="line"><span className="line-inner font-serif-d italic font-medium text-gold">in 5 minuti.</span></span>
        </h1>
        <p className="mt-5 text-white/70 max-w-xl">Un metodo semplice per portare in tavola un ramen autentico, senza glutine, senza compromessi.</p>
      </div>
    </section>

    <section data-reveal className="max-w-[1400px] mx-auto px-6 lg:px-10 py-20 grid lg:grid-cols-3 gap-6 lg:gap-10">
      {[
        {n:'01', t:'Dal freezer', s:'Conserviamo gusto e texture grazie alla surgelazione rapida. Tu lo tieni nel freezer fino al momento giusto.', img:'assets/products/tonkotsu-frozen.png'},
        {n:'02', t:'Scalda', s:'Segui la linea sul packaging e scalda secondo istruzioni. Il brodo torna setoso, i noodles ritrovano la loro tensione.', img:'assets/products/tonkotsu-packaging.png'},
        {n:'03', t:'Pronto da gustare', s:'In pochi minuti hai un ramen completo, caldo, autentico. Pronto per essere mescolato e gustato subito.', img:'assets/products/tonkotsu-hot.png'},
      ].map((s,k)=>(
        <div key={k} data-reveal-item className="border hairline bg-white lift">
          <div className="prod-bg-light aspect-[5/4] relative overflow-hidden">
            <img src={s.img} className="absolute inset-0 m-auto max-h-[88%] max-w-[88%] object-contain"/>
            <div className="absolute top-4 left-4 font-serif-d text-5xl text-ramen">{s.n}</div>
          </div>
          <div className="p-7">
            <div className="text-[11px] tracking-wider2 uppercase font-display font-semibold">{s.t}</div>
            <p className="mt-2 text-sm text-ink/65 leading-relaxed">{s.s}</p>
          </div>
        </div>
      ))}
    </section>

    <section className="bg-ink text-white py-20 relative overflow-hidden">
      <div className="absolute inset-0 seigaiha opacity-[0.05]"/>
      <div data-reveal className="relative max-w-[1100px] mx-auto px-6 text-center">
        <div data-reveal-item className="text-[10px] tracking-mega uppercase text-gold mb-3">Il metodo NUDO</div>
        <h2 data-reveal-item className="font-display font-bold text-4xl lg:text-5xl tracking-tight">Surgelato. <span className="font-serif-d italic font-medium text-gold">Non istantaneo.</span></h2>
        <p data-reveal-item className="mt-5 text-white/70 max-w-2xl mx-auto leading-relaxed">Niente liofilizzazione, niente disidratazione. Brodo, noodles e topping vengono cotti, assemblati e surgelati subito. Il risultato è un ramen come quello servito al ristorante, conservato senza compromessi.</p>
      </div>
    </section>
  </main>
  );
};

// ---------- GLUTEN FREE ----------
const GlutenFreePage = () => {
  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/55"/>
      <div className="absolute inset-0 grain"/>
      <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-16 lg:py-24 grid lg:grid-cols-12 gap-10 items-center">
        <div className="lg:col-span-7">
          <div className="text-[10px] tracking-mega uppercase text-gold mb-3">Gluten Free</div>
          <h1 data-lines className="font-display font-bold text-5xl lg:text-7xl tracking-tight">
            <span className="line"><span className="line-inner">Senza glutine.</span></span>
            <span className="line"><span className="line-inner font-serif-d italic font-medium text-ramen">Senza compromessi.</span></span>
          </h1>
          <p className="mt-5 text-white/70 max-w-xl">Crediamo che il gusto non debba essere un sacrificio. La nostra intera linea è certificata senza glutine, dal noodle al brodo, fino all'ultimo topping.</p>
        </div>
        <div className="lg:col-span-5">
          <div data-parallax="0.08">
            <img src="assets/products/vegan-full.png" className="w-full max-w-sm mx-auto drop-shadow-[0_40px_60px_rgba(0,0,0,0.6)]" alt="NUDO Vegan Shio Ramen"/>
          </div>
        </div>
      </div>
    </section>

    <section data-reveal className="max-w-[1100px] mx-auto px-6 lg:px-10 py-20 grid md:grid-cols-3 gap-6">
      {[
        ['Noodles dedicati', 'Trafilati artigianalmente con farine certificate gluten free.'],
        ['Stabilimento dedicato', 'Produzione separata per evitare ogni contaminazione crociata.'],
        ['Certificazione', 'Spiga Barrata AIC sulla maggior parte delle referenze.'],
      ].map(([t,s],k)=>(
        <div key={k} data-reveal-item className="border hairline bg-white p-8 lift">
          <Icon name="leaf" className="w-8 h-8 text-ramen"/>
          <div className="mt-4 text-[11px] tracking-wider2 uppercase font-display font-semibold">{t}</div>
          <p className="mt-2 text-sm text-ink/65 leading-relaxed">{s}</p>
        </div>
      ))}
    </section>

    <section className="bg-warm">
      <div className="max-w-[1100px] mx-auto px-6 lg:px-10 pb-20">
        <div className="border-t hairline pt-10">
          <div className="text-[10px] tracking-mega uppercase text-ramen mb-3">Domande comuni</div>
          <h2 className="font-display font-bold text-3xl lg:text-4xl tracking-tight">Sul gluten free</h2>
          <div className="mt-8 divide-y hairline border-y hairline">
            {[
              ['Posso fidarmi se sono celiaco?','Sì. Le nostre referenze certificate riportano la Spiga Barrata AIC. Etichetta sempre verificabile sul singolo prodotto.'],
              ['I brodi sono tutti gluten free?','Sì. Anche i brodi sono prodotti senza glutine, controllati lotto per lotto.'],
              ['I topping sono inclusi?','Sì, il piatto è completo. Tutti i topping sono già nella confezione, già conformi al protocollo gluten free.'],
            ].map(([q,a],k)=>(
              <details key={k} className="group">
                <summary className="flex items-center justify-between py-5 cursor-pointer list-none">
                  <span className="font-display font-semibold tracking-wider2 uppercase text-sm">{q}</span>
                  <span className="text-ramen group-open:rotate-45 transition-transform"><Icon name="plus"/></span>
                </summary>
                <p className="pb-5 text-sm text-ink/70 max-w-3xl">{a}</p>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  </main>
  );
};

// ---------- ABOUT ----------
const AboutPage = () => {
  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/55"/>
      <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">Chi siamo</div>
        <h1 data-lines className="font-display font-bold text-5xl lg:text-7xl tracking-tight max-w-4xl leading-[0.95]">
          <span className="line"><span className="line-inner">L'arte del ramen</span></span>
          <span className="line"><span className="line-inner">incontra <span className="font-serif-d italic font-medium text-gold">il rigore italiano.</span></span></span>
        </h1>
      </div>
    </section>

    <section data-reveal className="max-w-[1100px] mx-auto px-6 lg:px-10 py-20 grid md:grid-cols-2 gap-12 items-start">
      <div data-reveal-item>
        <div className="font-serif-d italic text-3xl lg:text-4xl leading-snug">NUDO nasce da un'ossessione: portare il vero ramen nelle case italiane, senza scendere a compromessi sul glutine.</div>
      </div>
      <div data-reveal-item className="text-ink/75 leading-relaxed space-y-4">
        <p>Abbiamo studiato in Giappone con ramen-ya tradizionali. Abbiamo testato decine di farine senza glutine. Abbiamo scartato tutto ciò che non sapeva di Tokyo.</p>
        <p>Quello che resta è una linea di cinque ricette core e drop limited a tiratura ridotta, prodotti in Italia, surgelati subito, certificati senza glutine.</p>
        <p>Ramen autentico. Senza glutine. Senza compromessi.</p>
      </div>
    </section>

    <section data-reveal className="max-w-[1400px] mx-auto px-6 lg:px-10 pb-20 grid lg:grid-cols-3 gap-4">
      {[
        ['2024','Primo prototipo nella cucina di un ramen-ya a Roma.'],
        ['2025','Lancio della linea core: Tonkotsu, Miso, Shoyu, Spicy Tan Tan, Vegan Shio.'],
        ['2026','Apertura ai mercati EU. Primo drop Limited Edition.'],
      ].map(([y,t],k)=>(
        <div key={k} data-reveal-item className="border hairline bg-white p-8 lift">
          <div className="font-serif-d text-5xl text-ramen">{y}</div>
          <p className="mt-3 text-sm text-ink/65 leading-relaxed">{t}</p>
        </div>
      ))}
    </section>

    <section className="bg-ink text-white relative overflow-hidden">
      <div className="absolute inset-0 seigaiha opacity-[0.05]"/>
      <div data-reveal className="relative max-w-[1100px] mx-auto px-6 py-20 text-center">
        <div data-reveal-item className="text-[10px] tracking-mega uppercase text-gold mb-3">I nostri valori</div>
        <h2 data-reveal-item className="font-display font-bold text-4xl lg:text-5xl tracking-tight">Tre principi. <span className="font-serif-d italic font-medium text-gold">Niente eccezioni.</span></h2>
        <div className="mt-12 grid md:grid-cols-3 gap-6 text-left">
          {[
            ['Autenticità','Ricette costruite con maestri ramen-ya. Niente scorciatoie.'],
            ['Trasparenza','Ingredienti dichiarati. Filiera tracciabile. Etichetta pulita.'],
            ['Inclusione','Senza glutine non come limite, ma come standard di partenza.'],
          ].map(([t,s],k)=>(
            <div key={k} data-reveal-item className="border border-white/10 hover:border-gold/40 transition-colors duration-500 p-8">
              <div className="font-display font-semibold tracking-wider2 uppercase text-sm">{t}</div>
              <p className="mt-2 text-sm text-white/65 leading-relaxed">{s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  </main>
  );
};

// ---------- FAQ ----------
const FAQPage = () => {
  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/55"/>
      <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">FAQ</div>
        <h1 data-lines className="font-display font-bold text-5xl lg:text-7xl tracking-tight">
          <span className="line"><span className="line-inner">Domande <span className="font-serif-d italic font-medium text-gold">frequenti</span></span></span>
        </h1>
      </div>
    </section>

    <section className="max-w-[900px] mx-auto px-6 lg:px-10 py-16">
      <div className="border-y hairline divide-y hairline">
        {FAQ.map(([q,a],k)=>(
          <details key={k} className="group" {...(k===0?{open:true}:{})}>
            <summary className="flex items-start justify-between py-6 cursor-pointer list-none gap-6">
              <span className="font-display font-semibold tracking-wider2 uppercase text-sm pt-1">{q}</span>
              <span className="text-ramen group-open:rotate-45 transition-transform shrink-0"><Icon name="plus"/></span>
            </summary>
            <p className="pb-6 text-sm text-ink/70 leading-relaxed">{a}</p>
          </details>
        ))}
      </div>
    </section>
  </main>
  );
};

Object.assign(window, { LimitedEditionPage, HowItWorksPage, GlutenFreePage, AboutPage, FAQPage });