// Reusable UI components: Header, Footer, CartDrawer, ProductCard, etc.
const { useState, useEffect, useMemo, useRef, createContext, useContext } = React;

// Brand social profiles
const SOCIALS = [
  { name: 'instagram', label: 'Instagram', url: 'https://www.instagram.com/nudo.ramen' },
  { name: 'tiktok',    label: 'TikTok',    url: 'https://www.tiktok.com/@nudoramen' },
  { name: 'facebook',  label: 'Facebook',  url: 'https://www.facebook.com/nudoramen' },
];

// ---------- Cart context ----------
const CartCtx = createContext(null);
const useCart = () => useContext(CartCtx);

const CartProvider = ({ children }) => {
  const [items, setItems] = useState(() => {
    try { return JSON.parse(localStorage.getItem('nudo-cart') || '[]'); } catch { return []; }
  });
  const [open, setOpen] = useState(false);
  useEffect(() => { localStorage.setItem('nudo-cart', JSON.stringify(items)); }, [items]);

  const add = (product, qty = 1) => {
    setItems(prev => {
      const existing = prev.find(i => i.slug === product.slug);
      if (existing) return prev.map(i => i.slug === product.slug ? { ...i, qty: i.qty + qty } : i);
      return [...prev, { slug: product.slug, name: product.name, price: product.price, img: product.img, qty }];
    });
    setOpen(true);
  };
  const remove = slug => setItems(prev => prev.filter(i => i.slug !== slug));
  const setQty = (slug, qty) => setItems(prev => prev.map(i => i.slug === slug ? { ...i, qty: Math.max(1, qty) } : i));
  const clear = () => setItems([]);
  const count = items.reduce((s, i) => s + i.qty, 0);
  const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0);

  return <CartCtx.Provider value={{ items, add, remove, setQty, clear, open, setOpen, count, subtotal }}>{children}</CartCtx.Provider>;
};

// ---------- Router context ----------
const RouterCtx = createContext(null);
const useRouter = () => useContext(RouterCtx);

const RouterProvider = ({ children }) => {
  const [route, setRoute] = useState(() => {
    const h = window.location.hash.slice(1);
    return h || 'home';
  });
  useEffect(() => {
    const onHash = () => setRoute(window.location.hash.slice(1) || 'home');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const go = (r) => {
    window.location.hash = r;
    if (window.__lenis) window.__lenis.scrollTo(0, { immediate: true });
    else window.scrollTo({ top: 0, behavior: 'instant' });
  };
  return <RouterCtx.Provider value={{ route, go }}>{children}</RouterCtx.Provider>;
};

// ---------- Primitives ----------
const Button = ({ children, variant = 'primary', size = 'md', onClick, className = '', as = 'button', href, magnetic = false, disabled = false }) => {
  const magRef = useMagnetic();
  const sizeCls = size === 'lg' ? 'h-14 px-8 text-sm' : size === 'sm' ? 'h-10 px-5 text-xs' : 'h-12 px-7 text-xs';
  const cls = `inline-flex items-center justify-center gap-2 ${sizeCls} font-display font-semibold tracking-wider2 uppercase transition-colors duration-200 ${
    variant === 'primary' ? 'btn-primary btn-sweep' :
    variant === 'gold' ? 'btn-gold btn-sweep' :
    variant === 'ghost-light' ? 'btn-ghost-light bg-transparent' :
    variant === 'ghost-dark' ? 'btn-ghost-dark bg-transparent' :
    variant === 'dark' ? 'bg-ink text-white btn-sweep' : ''
  } ${disabled ? 'opacity-60 pointer-events-none' : ''} ${className}`;
  if (as === 'a') return <a href={href} ref={magnetic ? magRef : null} className={cls}>{children}</a>;
  return <button onClick={onClick} disabled={disabled} ref={magnetic ? magRef : null} className={cls}>{children}</button>;
};

// Editorial section header: eyebrow + display title (+ optional serif accent) + rule
const SectionHead = ({ eyebrow, title, accent, dark = false, gold = false, center = false, className = '' }) => (
  <div data-reveal className={`${center ? 'text-center' : ''} ${className}`}>
    {eyebrow && <div data-reveal-item className={`text-[10px] tracking-mega uppercase mb-3 ${gold ? 'text-gold' : 'text-ramen'}`}>{eyebrow}</div>}
    <h2 data-reveal-item className={`font-display font-bold text-4xl lg:text-5xl tracking-tight ${dark ? 'text-white' : 'text-ink'}`}>
      {title}
      {accent && <span className={`font-serif-d italic font-medium ${gold ? 'text-gold' : 'text-ramen'}`}> {accent}</span>}
    </h2>
    <span data-reveal-item className={`${gold ? 'rule-gold' : 'rule-red'} mt-4 ${center ? 'mx-auto' : ''} block`}></span>
  </div>
);

const Badge = ({ children, tone = 'red' }) => {
  const tones = {
    red:   'bg-ramen text-white',
    green: 'bg-emerald-700 text-white',
    gold:  'bg-gold text-ink',
    light: 'bg-warm text-ink border border-ink/10',
    dark:  'bg-ink text-white',
  };
  return <span className={`inline-block text-[10px] font-display font-bold tracking-wider2 px-2.5 py-1 ${tones[tone]}`}>{children}</span>;
};

const Stars = ({ value = 5, size = 'w-4 h-4', className = '' }) => {
  const full = Math.floor(value);
  const half = value - full >= 0.5;
  return (
    <span className={`inline-flex items-center gap-0.5 text-ramen ${className}`}>
      {Array.from({ length: 5 }).map((_, i) => {
        const filled = i < full || (i === full && half);
        return <Icon key={i} name={filled ? 'star' : 'star-empty'} className={size} />;
      })}
    </span>
  );
};

const Spice = ({ level = 0 }) => (
  <span className="inline-flex items-center gap-0.5">
    {Array.from({ length: 3 }).map((_, i) => (
      <Icon key={i} name="flame" className={`w-3.5 h-3.5 ${i < level ? 'text-ramen' : 'text-ink/15'}`} />
    ))}
  </span>
);

// ---------- Header ----------
const Header = ({ variant = 'dark' }) => {
  const { route, go } = useRouter();
  const { count, setOpen } = useCart();
  const [menuOpen, setMenuOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const dark = variant === 'dark';
  const bg = dark
    ? (scrolled ? 'bg-ink/90 backdrop-blur-md text-white' : 'bg-ink text-white')
    : 'bg-warm/95 text-ink backdrop-blur';
  const border = dark ? 'border-white/10' : 'border-ink/10';

  return (
    <>
      <header className={`app-header sticky top-0 ${bg} border-b ${border} transition-all duration-300 ${scrolled ? 'shadow-[0_8px_24px_-12px_rgba(0,0,0,0.5)]' : ''}`}>
        <div className={`max-w-[1400px] mx-auto px-5 lg:px-10 flex items-center gap-6 transition-all duration-300 ${scrolled ? 'h-14 lg:h-16' : 'h-16 lg:h-20'}`}>
          {/* Mobile menu */}
          <button className="lg:hidden -ml-1 p-2" onClick={() => setMenuOpen(true)} aria-label="Apri menu">
            <Icon name="menu" className="w-6 h-6"/>
          </button>

          {/* Logo */}
          <a href="#home" onClick={(e)=>{e.preventDefault(); go('home');}} className="lg:flex-none flex-1 flex justify-center lg:justify-start items-center">
            <img src={dark ? 'assets/logo-oriz-white.png' : 'assets/logo-oriz.png'} alt="NUDO Ramen" className="h-8 lg:h-9 w-auto"/>
          </a>

          {/* Desktop nav */}
          <nav className="hidden lg:flex flex-1 justify-center gap-8 text-[11px] font-display font-semibold tracking-wider2 uppercase">
            {NAV_LINKS.map(l => (
              <a key={l.id} href={`#${l.id}`}
                 onClick={(e)=>{e.preventDefault(); go(l.id);}}
                 className={`nav-link ${route === l.id ? 'active' : ''}`}>{l.label}</a>
            ))}
          </nav>

          {/* Right icons */}
          <div className="flex items-center gap-1 lg:gap-2">
            <button className="p-2 hover:opacity-80" aria-label="Cerca" onClick={()=> setSearchOpen(true)}><Icon name="search"/></button>
            <button className="p-2 hover:opacity-80 hidden md:inline-flex" aria-label="Account"><Icon name="user"/></button>
            <button className="p-2 hover:opacity-80 relative" aria-label="Carrello" onClick={()=> setOpen(true)}>
              <Icon name="cart"/>
              {count > 0 && (
                <span className="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-ramen text-white text-[10px] font-bold rounded-full flex items-center justify-center">{count}</span>
              )}
            </button>
          </div>
        </div>

        {/* Top trust bar marquee on dark variant */}
        {dark && (
          <div className={`border-t border-white/10 overflow-hidden transition-all duration-300 ${scrolled ? 'max-h-0 opacity-0 border-t-0' : 'max-h-9 opacity-100'}`}>
            <div className="marquee-track whitespace-nowrap py-2 text-[11px] tracking-wider2 uppercase font-display text-white/60">
              {Array.from({length: 2}).flatMap((_,k)=> [
                'Spedizione gratuita sopra €49',
                '— Surgelato premium —',
                'Senza glutine certificato',
                '— Pronto in 5 minuti —',
                'Drop limited disponibili',
                '— Made in Italy / Spirit of Japan —',
              ].map((t,i)=> <span key={`${k}-${i}`} className="px-6">{t}</span>))}
            </div>
          </div>
        )}
      </header>

      {/* Mobile drawer */}
      <MobileMenu open={menuOpen} onClose={()=> setMenuOpen(false)} />

      {/* Search overlay */}
      {searchOpen && <SearchOverlay onClose={()=> setSearchOpen(false)} />}
    </>
  );
};

const MobileMenu = ({ open, onClose }) => {
  const { go } = useRouter();
  return (
    <div className={`fixed inset-0 z-[60] lg:hidden transition-opacity ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
      <div className="absolute inset-0 bg-black/60" onClick={onClose}/>
      <div className={`absolute top-0 left-0 bottom-0 w-[86%] max-w-sm bg-ink text-white flex flex-col transition-transform duration-300 ${open ? 'translate-x-0':'-translate-x-full'}`}>
        <div className="flex items-center justify-between px-5 h-16 border-b border-white/10">
          <img src="assets/logo-oriz-white.png" alt="NUDO" className="h-7"/>
          <button onClick={onClose} className="p-2"><Icon name="close"/></button>
        </div>
        <nav className="flex-1 overflow-y-auto p-5 flex flex-col gap-1">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={`#${l.id}`} onClick={(e)=>{e.preventDefault(); go(l.id); onClose();}}
               className="py-4 border-b border-white/10 font-display font-semibold tracking-wider2 uppercase text-sm flex items-center justify-between">
              {l.label} <Icon name="arrow-right" className="w-4 h-4 text-white/50"/>
            </a>
          ))}
        </nav>
        <div className="p-5 border-t border-white/10 flex items-center gap-4 text-white/60">
          {SOCIALS.map(s => (
            <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.label} className="hover:text-gold transition-colors"><Icon name={s.name}/></a>
          ))}
        </div>
      </div>
    </div>
  );
};

const SearchOverlay = ({ onClose }) => {
  const [q, setQ] = useState('');
  const all = [...PRODUCTS, ...LIMITED];
  const results = q.length > 0 ? all.filter(p => p.name.toLowerCase().includes(q.toLowerCase())) : all.slice(0, 4);
  const { go } = useRouter();
  return (
    <div className="fixed inset-0 z-[70] bg-black/70" onClick={onClose}>
      <div className="bg-warm text-ink p-6 lg:p-12 max-w-3xl mx-auto mt-20 lg:mt-32" onClick={e=>e.stopPropagation()}>
        <div className="flex items-center gap-3 border-b border-ink/20 pb-3">
          <Icon name="search" className="w-6 h-6"/>
          <input autoFocus value={q} onChange={e=>setQ(e.target.value)} placeholder="Cerca un ramen, un ingrediente…" className="flex-1 bg-transparent outline-none text-lg lg:text-2xl font-display"/>
          <button onClick={onClose}><Icon name="close"/></button>
        </div>
        <div className="mt-6">
          <div className="text-[10px] tracking-mega uppercase text-ink/50 mb-3">{q ? 'Risultati' : 'Suggerimenti'}</div>
          <ul>
            {results.map(p => (
              <li key={p.slug} className="border-b border-ink/10 last:border-0">
                <button onClick={()=>{ go(`product/${p.slug}`); onClose(); }} className="w-full flex items-center gap-4 py-3 hover:bg-ink/5 -mx-2 px-2 text-left">
                  <img src={p.img} className="w-12 h-12 object-contain"/>
                  <div className="flex-1">
                    <div className="font-display font-semibold tracking-wider2 uppercase text-sm">{p.name}</div>
                    <div className="text-xs text-ink/60">{p.short}</div>
                  </div>
                  <div className="text-sm font-display font-semibold">€{p.price.toFixed(2)}</div>
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

// ---------- Cart drawer ----------
const CartDrawer = () => {
  const { items, open, setOpen, remove, setQty, subtotal, count } = useCart();
  const { go } = useRouter();
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState(null);
  const shipping = subtotal >= 49 || subtotal === 0 ? 0 : 6.90;
  const total = subtotal + shipping;

  const checkout = async () => {
    setLoading(true); setErr(null);
    try {
      const res = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items: items.map(i => ({ slug: i.slug, qty: i.qty })) }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.url) throw new Error(data.error || 'Checkout non disponibile');
      window.location.href = data.url;
    } catch (e) {
      setErr(e.message || 'Errore. Riprova.');
      setLoading(false);
    }
  };
  return (
    <div className={`fixed inset-0 z-[80] ${open ? 'pointer-events-auto':'pointer-events-none'}`}>
      <div className={`absolute inset-0 bg-black/60 transition-opacity ${open?'opacity-100':'opacity-0'}`} onClick={()=>setOpen(false)}/>
      <div className={`absolute top-0 right-0 bottom-0 w-full sm:w-[440px] bg-warm text-ink flex flex-col transition-transform duration-300 ${open?'translate-x-0':'translate-x-full'}`}>
        <div className="flex items-center justify-between px-6 h-16 border-b border-ink/10">
          <div className="font-display font-semibold tracking-wider2 uppercase text-sm">Carrello {count > 0 && <span className="text-ink/50">({count})</span>}</div>
          <button onClick={()=>setOpen(false)} className="p-2"><Icon name="close"/></button>
        </div>

        <div className="flex-1 overflow-y-auto">
          {items.length === 0 ? (
            <div className="p-10 text-center">
              <Icon name="bowl" className="w-14 h-14 mx-auto text-ink/30"/>
              <div className="mt-4 font-display font-semibold tracking-wider2 uppercase text-sm">Il carrello è vuoto</div>
              <div className="text-ink/60 text-sm mt-1">Inizia dalla nostra selezione di ramen.</div>
              <div className="mt-6"><Button variant="primary" onClick={()=>{ setOpen(false); go('shop'); }}>Scopri i ramen</Button></div>
            </div>
          ) : (
            <ul className="divide-y divide-ink/10">
              {items.map(it => (
                <li key={it.slug} className="p-5 flex gap-4">
                  <div className="w-20 h-20 prod-bg-light flex items-center justify-center">
                    <img src={it.img} className="w-16 h-16 object-contain"/>
                  </div>
                  <div className="flex-1">
                    <div className="font-display font-semibold tracking-wider2 uppercase text-sm">{it.name}</div>
                    <div className="text-xs text-ink/60 mt-1">€{it.price.toFixed(2)}</div>
                    <div className="mt-3 flex items-center gap-3">
                      <div className="inline-flex items-center border border-ink/20">
                        <button onClick={()=>setQty(it.slug, it.qty-1)} className="w-8 h-8 hover:bg-ink/5"><Icon name="minus" className="w-3 h-3 mx-auto"/></button>
                        <div className="w-8 text-center text-sm">{it.qty}</div>
                        <button onClick={()=>setQty(it.slug, it.qty+1)} className="w-8 h-8 hover:bg-ink/5"><Icon name="plus" className="w-3 h-3 mx-auto"/></button>
                      </div>
                      <button onClick={()=>remove(it.slug)} className="text-xs text-ink/50 underline underline-offset-2 hover:text-ramen">Rimuovi</button>
                    </div>
                  </div>
                  <div className="text-sm font-display font-semibold">€{(it.qty*it.price).toFixed(2)}</div>
                </li>
              ))}
            </ul>
          )}
        </div>

        {items.length > 0 && (
          <div className="border-t border-ink/10 p-6 space-y-4">
            <div className="flex justify-between text-sm"><span className="text-ink/60">Subtotale</span><span>€{subtotal.toFixed(2)}</span></div>
            <div className="flex justify-between text-sm"><span className="text-ink/60">Spedizione</span><span>{shipping === 0 ? <span className="text-emerald-700">Gratuita</span> : `€${shipping.toFixed(2)}`}</span></div>
            {subtotal > 0 && subtotal < 49 && (
              <div className="text-xs text-ink/60">Aggiungi €{(49-subtotal).toFixed(2)} per la spedizione gratuita.</div>
            )}
            <div className="flex justify-between font-display font-semibold tracking-wider2 uppercase text-sm border-t border-ink/10 pt-3"><span>Totale</span><span>€{total.toFixed(2)}</span></div>
            {err && <div className="text-xs text-ramen bg-ramen/10 border border-ramen/20 px-3 py-2">{err}</div>}
            <Button variant="primary" className="w-full" size="lg" onClick={checkout} disabled={loading}>
              {loading ? 'Attendi…' : <>Procedi al checkout <Icon name="arrow-right" className="w-4 h-4"/></>}
            </Button>
            <div className="flex items-center justify-center gap-2 text-[10px] tracking-wider2 uppercase text-ink/45">
              <Icon name="lock" className="w-3 h-3"/> Pagamento sicuro con Stripe
            </div>
            <button onClick={()=>{ setOpen(false); go('shop'); }} className="block mx-auto text-xs underline underline-offset-2 text-ink/60">Continua lo shopping</button>
          </div>
        )}
      </div>
    </div>
  );
};

// ---------- Product Card ----------
const ProductCard = ({ p, dark = false, limited = false }) => {
  const { add } = useCart();
  const { go } = useRouter();
  const tilt = useTilt(7);
  const hoverImg = p.imgFrozen && p.imgFrozen !== p.img ? p.imgFrozen : null;
  return (
    <article ref={tilt} className={`group tilt-3d relative transition-shadow duration-500 hover:shadow-[0_36px_66px_-30px_rgba(0,0,0,0.45)] ${dark ? 'bg-ink text-white border border-white/10 hover:border-white/25' : 'bg-warm text-ink border border-ink/10 hover:border-ink/30'}`}>
      {p.badge && <div className="absolute top-4 left-4 z-10"><Badge tone={p.badgeTone || (limited?'gold':'red')}>{p.badge}</Badge></div>}
      {limited && !p.badge && <div className="absolute top-4 left-4 z-10"><Badge tone="gold">LIMITED</Badge></div>}
      <button onClick={()=> go(`product/${p.slug}`)} className={`block w-full h-64 ${dark ? 'prod-bg-dark' : 'prod-bg-light'} relative overflow-hidden`}>
        <img src={p.img} className={`swap-img absolute inset-0 m-auto max-h-[88%] max-w-[88%] object-contain ${hoverImg ? 'group-hover:opacity-0 group-hover:scale-105' : 'group-hover:scale-105'}`} alt={p.name}/>
        {hoverImg && (
          <img src={hoverImg} aria-hidden="true" loading="lazy"
               className="swap-img absolute inset-0 w-full h-full object-cover opacity-0 scale-105 group-hover:opacity-100 group-hover:scale-100"/>
        )}
        <span className={`absolute bottom-3 right-3 w-10 h-10 rounded-full flex items-center justify-center translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ${limited ? 'bg-gold text-ink' : 'bg-ramen text-white'}`}
              role="presentation">
          <Icon name="arrow-right" className="w-4 h-4"/>
        </span>
      </button>
      <div className="p-5 lg:p-6 flex flex-col gap-3">
        <div className="flex items-start justify-between gap-3">
          <div>
            <div className="font-display font-semibold tracking-wider2 uppercase text-sm leading-tight">{p.name}</div>
            <div className="mt-1 flex items-center gap-2 text-xs text-current/70">
              <Stars value={p.rating} size="w-3 h-3"/>
              <span className={dark ? 'text-white/60' : 'text-ink/60'}>{p.rating} ({p.reviews})</span>
            </div>
          </div>
          <div className="text-right">
            <div className={`text-[10px] uppercase tracking-wider2 ${dark?'text-white/50':'text-ink/50'}`}>da</div>
            <div className="font-display font-semibold">€{p.price.toFixed(2)}</div>
          </div>
        </div>
        <p className={`text-xs leading-relaxed ${dark?'text-white/70':'text-ink/65'}`}>{p.short}</p>
        <div className="flex items-center justify-between mt-2">
          <button onClick={()=> go(`product/${p.slug}`)} className={`text-[11px] tracking-wider2 uppercase font-display font-semibold underline underline-offset-4 ${dark?'decoration-white/30':'decoration-ink/30'} hover:decoration-ramen hover:text-ramen`}>Scopri</button>
          <button onClick={()=> add(p)} className={`text-[11px] tracking-wider2 uppercase font-display font-semibold flex items-center gap-1 ${limited?'text-gold':'text-ramen'} hover:opacity-80`}>
            <Icon name="plus" className="w-3 h-3"/> Aggiungi
          </button>
        </div>
      </div>
    </article>
  );
};

// ---------- Footer ----------
const Footer = () => {
  const { go } = useRouter();
  return (
    <footer className="bg-ink text-white relative">
      {/* Trust strip */}
      <div className="border-b border-white/10">
        <div className="max-w-[1400px] mx-auto grid grid-cols-2 md:grid-cols-4 px-6 lg:px-10">
          {[
            { icon:'truck', t:'Consegna refrigerata', s:'24/48h in tutta Italia' },
            { icon:'snow',  t:'Surgelato subito',     s:'Catena del freddo garantita' },
            { icon:'lock',  t:'Pagamenti sicuri',     s:'SSL · 3D Secure' },
            { icon:'chat',  t:'Assistenza dedicata',  s:'hello@nudoramen.com' },
          ].map((c,i)=>(
            <div key={i} className="flex items-center gap-4 py-6 border-r border-white/10 last:border-r-0 px-2">
              <Icon name={c.icon} className="w-7 h-7 text-gold"/>
              <div>
                <div className="text-[11px] tracking-wider2 uppercase font-display font-semibold">{c.t}</div>
                <div className="text-xs text-white/60">{c.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="max-w-[1400px] mx-auto px-6 lg:px-10 py-14 grid grid-cols-2 lg:grid-cols-12 gap-8">
        <div className="col-span-2 lg:col-span-4">
          <img src="assets/logo-oriz-white.png" alt="NUDO Ramen" className="h-12 mb-6"/>
          <p className="text-sm text-white/60 max-w-sm leading-relaxed">Ramen surgelato artigianale, senza glutine. Ricette autentiche, ingredienti selezionati. <br/>Made in Italy. Spirit of Japan.</p>
          <div className="mt-6 flex items-center gap-3 text-white/50">
            {SOCIALS.map(s => (
              <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.label} className="p-2 border border-white/10 hover:text-gold hover:border-gold transition-colors"><Icon name={s.name}/></a>
            ))}
          </div>
        </div>

        {[
          { title:'Shop', links:[['Tutti i ramen','shop'],['Limited Edition','le'],['Vegan','shop'],['Spicy','shop']] },
          { title:'Brand', links:[['Chi siamo','about'],['Come funziona','come'],['Gluten Free','gluten'],['Filosofia','about']] },
          { title:'Supporto', links:[['FAQ','faq'],['Spedizioni','faq'],['Resi','faq'],['Contatti','faq']] },
          { title:'Legal', links:[['Privacy','#'],['Termini','#'],['Cookie','#']] },
        ].map((col, i) => (
          <div key={i} className="lg:col-span-2">
            <div className="text-[10px] uppercase tracking-mega text-white/50 mb-4">{col.title}</div>
            <ul className="space-y-2.5">
              {col.links.map(([l,r],j)=>(
                <li key={j}><a href={`#${r}`} onClick={(e)=>{e.preventDefault(); go(r);}} className="text-sm text-white/80 hover:text-gold">{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Giant outline wordmark */}
      <div className="overflow-hidden select-none" aria-hidden="true">
        <div className="outline-word text-center text-[22vw] lg:text-[18vw] -mb-[4vw]">NUDO</div>
      </div>

      <div className="border-t border-white/10 relative">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-10 py-5 flex flex-col md:flex-row items-center justify-between gap-3 text-xs text-white/40">
          <div>© 2026 NUDO Ramen S.r.l. — P.IVA 12345678901</div>
          <div className="flex items-center gap-2"><Icon name="globe" className="w-4 h-4"/> Italia / EU</div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, {
  CartProvider, useCart, RouterProvider, useRouter,
  Button, Badge, Stars, Spice, SectionHead,
  Header, MobileMenu, CartDrawer, ProductCard, Footer,
});