// Pages: Home
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

// Full-bleed hero backdrop: cinematic still by default, crossfades to the
// video loop when assets/media/hero-loop.* exists.
const HeroBackdrop = () => {
  const [videoOn, setVideoOn] = useStateP(false);
  return (
    <div className="absolute inset-0" aria-hidden="true">
      <div className="absolute inset-0 scale-105" data-parallax="-0.05">
        <picture>
          <source media="(max-width: 640px)" srcSet="assets/media/hero-mobile.webp"/>
          <img src="assets/media/hero-start.webp" className="w-full h-full object-cover" alt=""/>
        </picture>
        <video
          autoPlay muted loop playsInline preload="metadata"
          className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${videoOn ? 'opacity-100' : 'opacity-0'}`}
          onCanPlay={() => setVideoOn(true)}
          onError={() => setVideoOn(false)}>
          <source src="assets/media/hero-loop.webm" type="video/webm"/>
          <source src="assets/media/hero-loop.mp4" type="video/mp4"/>
        </video>
      </div>
      {/* Desktop: horizontal scrim keeps left copy-zone dark */}
      <div className="absolute inset-0 hidden md:block bg-gradient-to-r from-black/88 via-black/40 to-transparent"/>
      {/* Mobile: vertical scrim so the stacked headline + paragraph stay legible over the bowl */}
      <div className="absolute inset-0 md:hidden bg-gradient-to-b from-black/85 via-black/55 to-black/70"/>
      <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-black/75 to-transparent"/>
      <div className="absolute inset-0 grain"/>
    </div>
  );
};

// Steps data shared by the pinned story and its reduced-motion fallback.
const HOW_STEPS = [
  {n:'01', t:'Dal freezer', s:'Tienilo nel freezer fino al momento giusto: la surgelazione rapida blocca gusto, brodo e texture.', img:'assets/products/tonkotsu-frozen.png', icon:'snow'},
  {n:'02', t:'Scalda', s:'Segui la linea sul packaging e scalda secondo istruzioni. Il brodo torna setoso, i noodles ritrovano tensione.', img:'assets/products/tonkotsu-packaging.png', icon:'clock'},
  {n:'03', t:'Pronto da gustare', s:'In pochi minuti un ramen completo, caldo e autentico. Mescola, aggiungi i topping e gusta subito.', img:'assets/products/tonkotsu-hot.png', icon:'bowl'},
];

// Pinned scrollytelling: the sticky panel holds while the three product images
// (frozen → packaging → hot) crossfade and the step list advances.
const HowItWorksStory = () => {
  const ref = usePinnedStory(HOW_STEPS.length);

  // Reduced-motion / no-JS: a clean static 3-column layout instead of the pin.
  if (typeof MOTION_REDUCED !== 'undefined' && MOTION_REDUCED) {
    return (
      <section id="come" className="bg-ink text-white relative overflow-hidden">
        <div className="absolute inset-0 seigaiha opacity-[0.05]"/>
        <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-20 lg:py-24">
          <SectionHead eyebrow="3 step semplici" title="Come" accent="funziona" dark gold center className="mb-14"/>
          <div className="grid md:grid-cols-3 gap-6">
            {HOW_STEPS.map((s,k)=>(
              <div key={k} className="border border-white/10 bg-white/[0.02]">
                <div className="prod-bg-dark aspect-[5/4] relative overflow-hidden">
                  <img src={s.img} className="absolute inset-0 m-auto max-h-[88%] max-w-[88%] object-contain" alt={s.t}/>
                  <div className="absolute top-4 left-4 font-serif-d text-5xl text-gold">{s.n}</div>
                </div>
                <div className="p-7">
                  <div className="text-sm tracking-wider2 uppercase font-display font-semibold">{s.t}</div>
                  <p className="mt-2 text-sm text-white/65">{s.s}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="come" ref={ref} className="relative bg-ink text-white" style={{ height: '320vh' }}>
      <div data-sticky className="h-screen w-full overflow-hidden flex items-center relative">
        <div className="absolute inset-0 seigaiha opacity-[0.05]"/>
        <div className="absolute inset-0 grain"/>
        <div className="relative w-full max-w-[1400px] mx-auto px-6 lg:px-10 grid lg:grid-cols-12 gap-10 lg:gap-16 items-center">
          {/* Copy + steps */}
          <div className="lg:col-span-6 order-2 lg:order-1">
            <div className="text-[10px] tracking-mega uppercase text-gold mb-4">Come funziona · 3 step</div>
            <h2 className="font-display font-bold text-4xl lg:text-6xl tracking-tight leading-[0.98]">
              Dal freezer<br/><span className="font-serif-d italic font-medium text-gold">alla bowl.</span>
            </h2>
            <div className="mt-10 lg:mt-12 space-y-1">
              {HOW_STEPS.map((s,i)=>(
                <div key={i} data-step className="relative pl-6 py-4">
                  <span className="step-bar absolute left-0 top-3 bottom-3 w-[2px] bg-gold"/>
                  <span className="absolute left-0 top-3 bottom-3 w-[2px] bg-white/10 -z-0"/>
                  <div className="flex items-start gap-4">
                    <span className="font-serif-d text-3xl lg:text-4xl text-gold leading-none w-10">{s.n}</span>
                    <div>
                      <div className="text-sm tracking-wider2 uppercase font-display font-semibold flex items-center gap-2">
                        <Icon name={s.icon} className="w-4 h-4 text-gold"/> {s.t}
                      </div>
                      <p className="mt-1.5 text-white/60 text-sm max-w-md leading-relaxed">{s.s}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* Media: cinematic clip scrubbed frame-by-frame as you scroll */}
          <div className="lg:col-span-6 order-1 lg:order-2">
            <div className="relative aspect-[4/5] max-w-md mx-auto w-full">
              <div className="absolute -inset-3 border border-white/10"/>
              <div className="absolute inset-0 prod-bg-dark overflow-hidden">
                <video
                  data-scrub-video muted playsInline preload="auto" tabIndex="-1"
                  poster="assets/products/tonkotsu-frozen.png"
                  className="absolute inset-0 w-full h-full object-cover">
                  <source src="assets/media/freezer.webm" type="video/webm"/>
                  <source src="assets/media/freezer.mp4" type="video/mp4"/>
                </video>
                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent"/>
                <div data-shot-num className="absolute bottom-5 left-5 font-serif-d text-6xl text-gold/80 drop-shadow-lg">01</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Animated stat band — counts up on scroll.
const NumbersBand = () => (
  <section className="relative bg-ink text-white marble-black overflow-hidden">
    <div className="absolute inset-0 bg-black/80"/>
    <div className="absolute inset-0 grain"/>
    <div data-reveal className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-16 lg:py-20 grid grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-6">
      {[
        { v: 12, suffix:'h', label:'di cottura lenta del brodo' },
        { v: 5,  suffix:'′', label:'dal freezer alla bowl' },
        { v: 100, suffix:'%', label:'senza glutine certificato' },
        { v: 7,  suffix:'', label:'ricette tra core e limited' },
      ].map((n,i)=>(
        <div key={i} data-reveal-item className="text-center lg:text-left lg:pl-8 lg:border-l border-white/10 first:border-0">
          <div className="font-display font-bold text-5xl lg:text-6xl tracking-tight text-white tabular-nums">
            <CountUp to={n.v} suffix={n.suffix}/>
          </div>
          <div className="mt-3 text-[11px] tracking-wider2 uppercase text-white/55 max-w-[180px] mx-auto lg:mx-0">{n.label}</div>
        </div>
      ))}
    </div>
  </section>
);

// ---------- HOME ----------
const HomePage = () => {
  const { go } = useRouter();
  const pageRef = usePageMotion();

  return (
    <main ref={pageRef} className="page-enter">
      {/* HERO */}
      <section className="relative bg-ink text-white overflow-hidden">
        <HeroBackdrop/>

        {/* Vertical Japanese ornament */}
        <div className="jp-vertical absolute right-5 lg:right-8 top-1/2 -translate-y-1/2 text-white/25 text-xs hidden xl:block" aria-hidden="true">
          本物のラーメン・五分で完成
        </div>

        <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 min-h-[90vh] py-20 lg:py-24 flex items-start sm:items-center">
          <div className="max-w-2xl relative z-10">
            <div data-reveal>
              <div data-reveal-item className="text-[10px] tracking-mega uppercase text-gold mb-6">Made in Italy · Spirit of Japan</div>
            </div>
            <h1 data-lines className="font-display font-bold tracking-tight text-5xl md:text-6xl lg:text-[4.6rem] leading-[0.98]">
              <span className="line"><span className="line-inner">RAMEN</span></span>
              <span className="line"><span className="line-inner">AUTENTICO.</span></span>
              <span className="line"><span className="line-inner font-serif-d italic font-medium text-ramen lowercase tracking-normal text-6xl md:text-7xl lg:text-[5.2rem]">pronto in 5 minuti.</span></span>
            </h1>
            <div data-reveal>
              <p data-reveal-item className="mt-7 text-white/75 text-base lg:text-lg max-w-lg leading-relaxed">
                La prima linea di ramen surgelato artigianale, <strong className="text-white">senza glutine</strong>. Ricette autentiche, ingredienti selezionati e nessun compromesso.
              </p>
              <div data-reveal-item className="mt-8 flex flex-wrap gap-3">
                <Button variant="primary" size="lg" magnetic onClick={()=>go('shop')}>Scopri i ramen <span className="btn-arrow"><Icon name="arrow-right" className="w-4 h-4"/></span></Button>
                <Button variant="ghost-dark" size="lg" onClick={()=>go('come')}>Come funziona</Button>
              </div>

              <div data-reveal-item className="mt-12 grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-5 max-w-2xl">
                {[
                  {i:'leaf', t:'Ingredienti naturali'},
                  {i:'snow', t:'Surgelato subito'},
                  {i:'clock', t:'Pronto in 5 minuti'},
                  {i:'bowl', t:'Ricette autentiche'},
                ].map((b,k)=>(
                  <div key={k} className="flex items-center gap-3">
                    <span className="w-9 h-9 rounded-full border border-white/20 flex items-center justify-center text-gold shrink-0"><Icon name={b.i} className="w-4 h-4"/></span>
                    <span className="text-[11px] tracking-wider2 uppercase font-display font-semibold text-white/85">{b.t}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Product chip anchored over the bowl */}
        <button onClick={()=>go('product/tonkotsu')} className="absolute bottom-8 right-6 lg:right-24 hidden md:flex items-center gap-4 bg-ink/60 backdrop-blur border border-white/15 hover:border-gold/60 transition-colors px-5 py-3.5 text-left">
          <div>
            <div className="text-[10px] tracking-mega uppercase text-gold">Best Seller</div>
            <div className="text-sm font-display font-semibold tracking-wider2 uppercase mt-1">Tonkotsu Ramen · <span className="text-white/70">da €12,90</span></div>
          </div>
          <Icon name="arrow-right" className="w-4 h-4 text-gold"/>
        </button>

        {/* Scroll cue */}
        <div className="absolute bottom-6 left-6 lg:left-10 hidden md:flex flex-col items-center gap-3" aria-hidden="true">
          <span className="text-[9px] tracking-mega uppercase text-white/40 jp-vertical" style={{letterSpacing:'0.3em'}}>Scroll</span>
          <span className="scroll-cue"></span>
        </div>
      </section>

      {/* BENEFIT STRIP */}
      <section id="why" className="marble-white relative">
        <div className="absolute inset-0 bg-warm/85"/>
        <div data-reveal className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-16 grid grid-cols-2 lg:grid-cols-4 gap-8">
          {[
            {i:'leaf', t:'Ingredienti naturali', s:'Solo ingredienti selezionati, senza additivi artificiali.'},
            {i:'snow', t:'Surgelato subito', s:'Per preservare gusto, texture e freschezza.'},
            {i:'clock', t:'Pronto in 5 minuti', s:'Dal freezer alla bowl. Veloce, facile, autentico.'},
            {i:'bowl', t:'100% Gluten Free', s:'Pensato per chi cerca gusto senza glutine.'},
          ].map((b,k)=>(
            <div key={k} data-reveal-item className="flex flex-col items-center text-center">
              <span className="w-14 h-14 rounded-full border border-ink/20 flex items-center justify-center"><Icon name={b.i} className="w-6 h-6"/></span>
              <div className="mt-4 text-[11px] tracking-wider2 uppercase font-display font-semibold">{b.t}</div>
              <div className="mt-2 text-sm text-ink/65 max-w-[220px]">{b.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* I NOSTRI RAMEN */}
      <section id="shop" className="bg-warm">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-10 py-20 lg:py-24">
          <div className="flex items-end justify-between mb-12 gap-6">
            <SectionHead eyebrow="La collezione" title="I nostri" accent="ramen"/>
            <button onClick={()=>go('shop')} className="hidden md:flex items-center gap-2 text-[11px] tracking-wider2 uppercase font-display font-semibold text-ramen hover:gap-3 transition-all">Vedi tutti <Icon name="arrow-right" className="w-4 h-4"/></button>
          </div>
          <div data-reveal className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-5 lg:gap-6">
            {PRODUCTS.map(p => <div key={p.slug} data-reveal-item><ProductCard p={p}/></div>)}
          </div>
        </div>
      </section>

      {/* NUMBERS BAND */}
      <NumbersBand/>

      {/* COME FUNZIONA — pinned scrollytelling */}
      <HowItWorksStory/>

      {/* GOLD MARQUEE — rhythm band into the limited drop */}
      <div className="bg-gold text-ink overflow-hidden border-y border-ink/20" aria-hidden="true">
        <div className="marquee-track marquee-fast whitespace-nowrap py-3 text-[12px] tracking-mega uppercase font-display font-bold">
          {Array.from({length: 2}).flatMap((_,k)=> [
            'Limited Edition', '·', 'Drop 02', '·', 'Black Garlic', '·', 'Tiratura limitata', '·',
            'Limited Edition', '·', 'Drop 02', '·', 'Black Garlic', '·', 'Tiratura limitata', '·',
          ].map((t,i)=> <span key={`${k}-${i}`} className="px-5">{t}</span>))}
        </div>
      </div>

      {/* LIMITED EDITION BANNER */}
      <section id="le" className="relative overflow-hidden bg-ink text-white">
        <div className="absolute inset-0 marble-black opacity-90"/>
        <div className="absolute inset-0 bg-gradient-to-r from-black/90 via-black/50 to-black/80"/>
        <div className="absolute inset-0 grain"/>
        <div className="relative max-w-[1400px] mx-auto px-6 lg:px-10 py-20 lg:py-28 grid lg:grid-cols-12 items-center gap-10">
          <div data-reveal className="lg:col-span-6 order-2 lg:order-1">
            <div data-reveal-item className="text-[10px] tracking-mega uppercase text-gold mb-4">Limited Edition · Drop 02</div>
            <h2 data-reveal-item className="font-display font-bold text-5xl lg:text-7xl tracking-tight">
              <span className="text-white">BLACK GARLIC</span><br/>
              <span className="font-serif-d italic font-medium text-gold">ramen</span>
            </h2>
            <p data-reveal-item className="mt-6 text-white/75 text-lg max-w-md">Intenso. Profondo. Indimenticabile. Aglio nero fermentato, brodo profondo al sesamo nero, funghi shiitake.</p>
            <div data-reveal-item className="mt-8 flex flex-wrap gap-3">
              <Button variant="gold" size="lg" magnetic onClick={()=>go('le')}>Scopri la limited <span className="btn-arrow"><Icon name="arrow-right" className="w-4 h-4"/></span></Button>
              <Button variant="ghost-dark" size="lg" onClick={()=>go('product/black-garlic')}>Vedi prodotto</Button>
            </div>
          </div>
          <div className="lg:col-span-6 order-1 lg:order-2 relative">
            <div data-parallax="0.1">
              <img src="assets/products/black-garlic-full.png" className="w-full max-w-md mx-auto drop-shadow-[0_40px_60px_rgba(0,0,0,0.6)]" alt="Black Garlic Ramen"/>
            </div>
            <div className="absolute -top-2 -left-2 w-24 h-24 rounded-full border border-gold/40 flex flex-col items-center justify-center text-gold text-center">
              <div className="text-[9px] tracking-mega uppercase">Edizione</div>
              <div className="font-serif-d text-2xl">02</div>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="bg-warm">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-10 py-20 lg:py-24">
          <SectionHead eyebrow="Dicono di noi" title="Come a" accent="Tokyo" className="mb-12"/>
          <div data-reveal className="grid md:grid-cols-3 gap-6">
            {[
              ['Il primo ramen surgelato che mi ha sorpresa. Brodo come a Tokyo.', 'Anna M.', 'Tonkotsu'],
              ['Senza glutine ma senza compromessi sul gusto. Davvero.', 'Luca R.', 'Spicy Tan Tan'],
              ['Sembra preparato al momento. Lo tengo sempre in freezer.', 'Sofia P.', 'Vegan Shio'],
            ].map(([q,n,p],k)=>(
              <figure key={k} data-reveal-item className="border border-ink/10 bg-white p-8 relative">
                <div className="font-serif-d text-6xl text-ramen/20 leading-none absolute top-4 right-6 select-none" aria-hidden="true">「」</div>
                <Stars value={5} size="w-4 h-4"/>
                <blockquote className="mt-5 text-xl leading-relaxed font-serif-d italic">«{q}»</blockquote>
                <figcaption className="mt-6 text-[10px] tracking-mega uppercase text-ink/50">{n} · {p}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <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-[900px] mx-auto px-6 py-20 lg:py-24 text-center">
          <div data-reveal-item className="text-[10px] tracking-mega uppercase text-gold mb-3">Newsletter</div>
          <h3 data-reveal-item className="font-display font-bold text-4xl lg:text-5xl tracking-tight">Entra nel mondo <span className="font-serif-d italic font-medium text-gold">NUDO</span></h3>
          <p data-reveal-item className="mt-4 text-white/70 max-w-xl mx-auto">Iscriviti e ricevi novità, offerte esclusive e accesso anticipato ai drop limited.</p>
          <form data-reveal-item className="mt-9 flex flex-col sm:flex-row items-end gap-4 max-w-lg mx-auto" onSubmit={e=>{e.preventDefault(); alert('Grazie! Ti abbiamo aggiunto alla lista.');}}>
            <input type="email" required placeholder="la-tua-email@esempio.it" aria-label="Email" className="input-line flex-1 w-full h-12 px-1 text-sm"/>
            <Button variant="primary" size="md" className="!h-12 w-full sm:w-auto">Iscriviti <span className="btn-arrow"><Icon name="arrow-right" className="w-4 h-4"/></span></Button>
          </form>
          <div data-reveal-item className="text-[10px] tracking-wider2 uppercase text-white/40 mt-5">Niente spam. Solo cose buone.</div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { HomePage });