// components.jsx, shared building blocks (NL)
const { useState, useEffect, useRef, useMemo } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Icons (inline SVG, small + clean)
// ─────────────────────────────────────────────────────────────────────────────
const Icon = {
  Menu: () =>
  <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
      <path d="M0 1h18M0 7h18M0 13h18" stroke="currentColor" strokeWidth="1.4" />
    </svg>,

  Search: () =>
  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
      <circle cx="8.5" cy="8.5" r="6.5" stroke="currentColor" strokeWidth="1.4" />
      <path d="M13.5 13.5l5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>,

  User: () =>
  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="7" r="3.2" stroke="currentColor" strokeWidth="1.4" />
      <path d="M3 18c1.4-3.6 4.2-5.2 7-5.2s5.6 1.6 7 5.2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>,

  Bag: () =>
  <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
      <path d="M4 6h12l-1 12H5L4 6z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
      <path d="M7 6V4.5a3 3 0 013-3 3 3 0 013 3V6" stroke="currentColor" strokeWidth="1.4" />
    </svg>,

  ArrowR: () =>
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M2 7h10m0 0L8 3m4 4L8 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  ArrowL: () =>
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M12 7H2m0 0l4-4m-4 4l4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  X: () =>
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>,

  Star: ({ filled = true, half = false }) =>
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M6 .5l1.65 3.45 3.78.42-2.83 2.6.79 3.73L6 8.79 2.61 10.7l.79-3.73L.57 4.37l3.78-.42L6 .5z"
    fill={filled ? "currentColor" : "none"}
    stroke="currentColor" strokeWidth=".8" strokeLinejoin="round" />
    </svg>,

  Check: () =>
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M2 7.5l3.5 3.5L12 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  Plus: () => <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 0v10M0 5h10" stroke="currentColor" strokeWidth="1.4" /></svg>,
  Minus: () => <svg width="10" height="2" viewBox="0 0 10 2"><path d="M0 1h10" stroke="currentColor" strokeWidth="1.4" /></svg>
};

// ─────────────────────────────────────────────────────────────────────────────
// Data
// ─────────────────────────────────────────────────────────────────────────────
const PRODUCTS = [
{
  id: 'lite-300', name: 'LITE 300', sub: 'Desktop Rood Licht Paneel',
  cat: 'panel', tag: 'Bestseller', price: 279, was: 399,
  rating: 4.8, reviews: 220,
  desc: 'Een compact desktoppaneel voor gezicht, hoofdhuid en gerichte herstelsessies. 660nm rood + 850nm nabij-infrarood in één armatuur.',
  badges: ['Gericht', 'Beste prijs'],
  images: ['img/lite300-2.png', 'img/lite300-1.png', 'img/lite300-3.png', 'img/lite300-4.png']
},
{
  id: 'lite-1500', name: 'LITE 1500', sub: 'Half-Body Rood Licht Paneel',
  cat: 'panel', tag: 'Sale', price: 1044, was: 1499,
  rating: 4.9, reviews: 383,
  desc: 'Half-body bedekking voor huid, herstel en circadiaanse ondersteuning. Dagelijkse sessies in minder dan 15 minuten.',
  badges: ['Half-body', 'Premium'],
  images: ['img/lite1500-2.png', 'img/lite1500-1.png', 'img/lite1500-stand.jpg', 'img/lite1500-3.png']
},
{
  id: 'core-300', name: 'CORE 300', sub: 'Gericht Rood Licht Paneel',
  cat: 'panel', tag: 'Premium', price: 349, was: 499,
  rating: 4.9, reviews: 142,
  desc: 'Hogere irradiantie voor gerichte behandelingen. Puls- en flikkervrije werking.',
  badges: ['Gericht', 'Premium'],
  images: ['img/core300-2.png', 'img/core300-1.png', 'img/core300-3.png', 'img/core300-4.png']
},
{
  id: 'core-1500', name: 'CORE 1500', sub: 'Full-Body Rood Licht Paneel',
  cat: 'panel', tag: 'Premium', price: 1179, was: 1699,
  rating: 4.9, reviews: 96,
  desc: 'Klinische full-body irradiantie met premium afwerking. 4 golflengtes, lage EMF, modulaire bevestiging.',
  badges: ['Full-body', 'Premium'],
  images: ['img/duo-labels.png', 'img/hero-duo-lifestyle.png', 'img/lite1500-2.png', 'img/duo-labels-2.png']
},
{
  id: 'core-duo', name: 'CORE 1500 DUO', sub: 'Full-Body Combi Set',
  cat: 'bundle', tag: 'Combi', price: 2199, was: 3797,
  rating: 5.0, reviews: 44,
  desc: 'Twee CORE 1500 panelen voor volledige lichaamsbedekking. Inclusief muurmontage.',
  badges: ['Bundel', 'Beste deal'],
  images: ['img/duo-labels.png', 'img/hero-duo-lifestyle.png', 'img/hero-duo-lifestyle-2.png', 'img/duo-labels-2.png']
},
{
  id: 'aura', name: 'AURA+', sub: 'LED Gezichts- & Décolletémasker',
  cat: 'mask', tag: 'Nieuw', price: 344.95, was: 599.90,
  rating: 4.8, reviews: 312,
  desc: 'Flexibel siliconen LED-masker voor gezicht en décolleté. 4 golflengtes, handsfree, sessies van 10 minuten.',
  badges: ['Gezicht', 'Premium'],
  images: ['img/aura-product.png', 'img/aura-lifestyle.png', 'img/aura-product-2.png', 'img/aura-lifestyle-2.png']
},
{
  id: 'blanket', name: 'Infrarood Sauna Deken', sub: 'Detox & Herstel',
  cat: 'sauna', tag: 'Beste deal', price: 399, was: 499,
  rating: 4.7, reviews: 261,
  desc: 'Infrarooddeken met lage EMF en niet-toxische binnenkant. Warmt op tot 75°C in minder dan 15 minuten.',
  badges: ['Herstel', 'Detox'],
  images: ['img/blanket-1.png', 'img/blanket-2.png', 'img/blanket-3.png', 'img/blanket-4.png']
},
{
  id: 'lite-bed', name: 'LITE Bed', sub: 'Full-Body Therapiebed',
  cat: 'bed', tag: 'Pro', price: 6499, was: 7999,
  rating: 4.9, reviews: 18,
  desc: 'Horizontaal therapiebed voor het hele lichaam. Voor klinieken, studio’s en serieuze thuissetups.',
  badges: ['Full-body', 'Pro'],
  images: ['img/lite1500-stand.jpg', 'img/lite1500-stand-alt.jpg', 'img/lite1500-2.png', 'img/hero-duo-lifestyle.png']
}];


const CATEGORIES = [
{ id: 'all', label: 'Alles' },
{ id: 'panel', label: 'Panelen' },
{ id: 'mask', label: 'Masker' },
{ id: 'sauna', label: 'Sauna' },
{ id: 'bed', label: 'Bedden' },
{ id: 'bundle', label: 'Bundels' }];


const NAV = [
{ id: 'shop', label: 'Alle producten' },
{ id: 'panels', label: 'Panelen', cat: 'panel' },
{ id: 'mask', label: 'Masker', cat: 'mask' },
{ id: 'blanket', label: 'Deken', cat: 'sauna' },
{ id: 'beds', label: 'Bedden', cat: 'bed' },
{ id: 'best', label: 'Bestsellers' }];


const MEGA = {
  shop: {
    title: 'Shop',
    links: ['Panelen', 'AURA+ Masker', 'Saunadeken', 'Therapiebedden', 'Accessoires', 'Alles bekijken'],
    products: [
    { id: 'core-1500', label: 'CORE 1500\nFull-Body Paneel' },
    { id: 'aura', label: 'AURA+\nLED Masker' }]

  },
  panels: {
    title: 'Rood Licht Panelen',
    links: ['LITE 300', 'LITE 1500', 'CORE 300', 'CORE 1500', 'CORE 1500 DUO', 'Alle panelen'],
    products: [
    { id: 'lite-1500', label: 'LITE 1500\nHalf-Body' },
    { id: 'core-1500', label: 'CORE 1500\nFull-Body' }]

  },
  mask: {
    title: 'AURA+ Masker',
    links: ['AURA+ Gezichtsmasker', 'AURA+ Décolleté', 'AURA+ Bundel', 'Accessoires'],
    products: [
    { id: 'aura', label: 'AURA+\nGezichtsmasker' },
    { id: 'aura', label: 'AURA+ Décolleté\nBundel' }]

  },
  blanket: {
    title: 'Saunadeken',
    links: ['Infrarooddeken', 'Inlegvellen', 'Reistas', 'Accessoires'],
    products: [
    { id: 'blanket', label: 'Infrarood\nSaunadeken' },
    { id: 'blanket', label: 'Deken\n+ Inlegvel set' }]

  },
  beds: {
    title: 'Therapiebedden',
    links: ['LITE Bed', 'CORE Bed', 'PRO Bed', 'Voor klinieken', 'Financiering'],
    products: [
    { id: 'lite-bed', label: 'LITE Bed\nFull-Body' },
    { id: 'lite-bed', label: 'PRO Bed\nKlinieken' }]

  },
  best: {
    title: 'Bestsellers',
    links: ['Meest geliefd', 'Nieuw binnen', 'In de uitverkoop', 'Alles bekijken'],
    products: [
    { id: 'lite-300', label: 'LITE 300\nDesktop Paneel' },
    { id: 'aura', label: 'AURA+\nLED Masker' },
    { id: 'blanket', label: 'Infrarood\nDeken' }]

  }
};

const findProduct = (id) => PRODUCTS.find((p) => p.id === id) || PRODUCTS[0];

// ─────────────────────────────────────────────────────────────────────────────
// Promo bar
// ─────────────────────────────────────────────────────────────────────────────
function PromoBar() {
  const items = [
  '120 Dagen Risicovrij Thuis Uitproberen',
  'LENTE SALE: TIJDELIJK TOT 40% KORTING',
  'Gratis Verzekerde Verzending',
  '★★★★★ 4,8/5 UIT 185+ RECENSIES',
  'Achteraf betalen met Klarna'];

  const loop = [...items, ...items, ...items];
  return (
    <div className="nv-promo">
      <div className="nv-marquee">
        {loop.map((m, i) =>
        <span key={i} className="nv-promo-item">{m} <span style={{ opacity: 0.4, margin: '0 0 0 32px' }}>◦</span></span>
        )}
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Header (sticky, centered wordmark)
// ─────────────────────────────────────────────────────────────────────────────
function Header({ onNav, onOpenMega, onCloseMega, openMega, onOpenCart, cartCount, currentPage }) {
  return (
    <div className="nv-header-wrap">
      <PromoBar />
      <header className="nv-header" style={{ color: "rgb(218, 146, 146)", fontFamily: "sans-serif" }}>
        <div className="nv-header-l">
          <button className="nv-icon-btn" aria-label="Menu"><Icon.Menu /></button>
          {NAV.map((it) =>
          <button
            key={it.id}
            className={`nv-nav-link ${openMega === it.id ? 'is-active' : ''}`}
            onClick={() => openMega === it.id ? onCloseMega() : onOpenMega(it.id)}>
            {it.label}</button>
          )}
        </div>
        <a className="nv-logo" onClick={() => {onCloseMega();onNav('home');}}>
          <img src="img/logo.png" alt="Nuvibody" style={{ height: 22, width: 'auto', maxWidth: 'none', display: 'block' }} />
        </a>
        <div className="nv-header-r">
          <button className="nv-pill is-ghost is-sm">Doe de quiz <span className="nv-dot" /></button>
          <button className="nv-pill is-ghost is-sm" onClick={() => onNav('product', 'core-1500')}>Bekijk CORE 1500</button>
          <button className="nv-icon-btn" aria-label="Zoeken"><Icon.Search /></button>
          <button className="nv-icon-btn" aria-label="Account"><Icon.User /></button>
          <button className="nv-icon-btn" onClick={onOpenCart} aria-label="Winkelmand">
            <Icon.Bag />
            {cartCount > 0 && <span className="nv-cart-badge">{cartCount}</span>}
          </button>
          <button className="nv-lang">NL | EN <Icon.ArrowR /></button>
        </div>
      </header>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Mega menu overlay
// ─────────────────────────────────────────────────────────────────────────────
function MegaMenu({ open, onClose, onNav }) {
  const data = open ? MEGA[open] : null;
  const isOpen = !!data;

  useEffect(() => {
    if (!isOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [isOpen, onClose]);

  return (
    <>
      <div
        className={`nv-mega-backdrop ${isOpen ? 'is-open' : ''}`}
        onClick={onClose} />
      
      <div className={`nv-mega ${isOpen ? 'is-open' : ''}`}>
        <button className="nv-mega-close" onClick={onClose} aria-label="Sluiten"><Icon.X /></button>
        {data &&
        <>
            <div className="nv-mega-links">
              <div className="mono" style={{ color: 'var(--ink-3)', marginBottom: 24 }}>{data.title}</div>
              {data.links.map((l, i) => {
              const isFirst = i === 0;
              return (
                <a
                  key={i}
                  className={`nv-mega-link ${isFirst ? 'is-current' : ''}`}
                  onClick={() => {onNav('shop');onClose();}}>
                  {l}</a>);

            })}
              <div className="nv-mega-region">
                Nederland EUR <Icon.ArrowR />
              </div>
            </div>
            <div className="nv-mega-products">
              {data.products.map((p, i) => {
              const prod = findProduct(p.id);
              return (
                <a key={i} className="nv-mega-prod" onClick={() => {onNav('product', p.id);onClose();}}>
                    <div className="nv-mega-prod-img" style={{ position: 'relative', overflow: 'hidden', borderRadius: 12 }}>
                      <img src={prod.images[0]} alt={prod.name}
                    style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 12 }} />
                    </div>
                    <div>
                      <div className="nv-mega-prod-title" style={{ whiteSpace: 'pre-line' }}>{p.label}</div>
                      <button className="nv-pill is-filled is-sm" style={{ marginTop: 14 }}>Nu kopen</button>
                    </div>
                  </a>);

            })}
            </div>
          </>
        }
      </div>
    </>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Star rating bit
// ─────────────────────────────────────────────────────────────────────────────
function Stars({ rating, reviews }) {
  return (
    <div className="nv-card-rating">
      <span className="nv-card-stars">
        {[1, 2, 3, 4, 5].map((i) =>
        <span key={i} style={{ display: 'inline-block', marginRight: 1 }}>
            <Icon.Star filled={i <= Math.round(rating)} />
          </span>
        )}
      </span>
      <span>({reviews})</span>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Price formatter
// ─────────────────────────────────────────────────────────────────────────────
const fmt = (n) => '€' + n.toLocaleString('nl-NL', { minimumFractionDigits: n % 1 ? 2 : 0, maximumFractionDigits: 2 });

// ─────────────────────────────────────────────────────────────────────────────
// Product card
// ─────────────────────────────────────────────────────────────────────────────
function ProductCard({ product, onView, onAdd, slotPrefix = 'card' }) {
  const [imgIdx, setImgIdx] = useState(0);
  const images = product.images || [];
  const total = images.length || 1;
  const cycle = (delta) => setImgIdx((imgIdx + total + delta) % total);
  return (
    <div className="nv-card">
      <div className="nv-card-img" onClick={() => onView(product.id)}>
        {product.tag && <span className={`nv-card-tag ${product.tag === 'Sale' || product.tag === 'Beste deal' ? 'is-accent' : ''}`}>{product.tag}</span>}
        {images.map((src, i) =>
        <img key={i} src={src} alt={`${product.name} ${i + 1}`}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          opacity: i === imgIdx ? 1 : 0, transition: 'opacity .3s' }} />
        )}
        <button className="nv-card-arrow l" onClick={(e) => {e.stopPropagation();cycle(-1);}} aria-label="Vorige"><Icon.ArrowL /></button>
        <button className="nv-card-arrow r" onClick={(e) => {e.stopPropagation();cycle(1);}} aria-label="Volgende"><Icon.ArrowR /></button>
        <div className="nv-card-dots">
          {Array.from({ length: total }).map((_, i) =>
          <span key={i} className={i === imgIdx ? 'is-active' : ''} />
          )}
        </div>
      </div>
      <div className="nv-card-info" onClick={() => onView(product.id)}>
        <div className="nv-card-title">Nuvibody {product.name}</div>
        <div className="nv-card-subtitle">{product.sub}</div>
        <div className="nv-card-price">
          {product.was && <s>{fmt(product.was)}</s>}
          {fmt(product.price)}
        </div>
        <Stars rating={product.rating} reviews={product.reviews} />
        <div className="nv-card-actions">
          <button className="nv-pill is-sm" onClick={(e) => {e.stopPropagation();onView(product.id);}} style={{ flex: 1, justifyContent: 'center', background: '#da2000', color: '#fff', borderColor: '#da2000' }}>Bekijk meer</button>
          <button className="nv-pill is-sm is-filled" onClick={(e) => {e.stopPropagation();onAdd(product);}} style={{ flex: 1, justifyContent: 'center', background: '#ffffff', color: 'var(--ink)', borderColor: 'var(--ink)' }}>In winkelmand</button>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Mini cart
// ─────────────────────────────────────────────────────────────────────────────
function MiniCart({ open, onClose, items, onChangeQty, onRemove, onCheckout }) {
  const total = items.reduce((s, i) => s + i.product.price * i.qty, 0);
  return (
    <>
      <div className={`nv-cart-backdrop ${open ? 'is-open' : ''}`} onClick={onClose} />
      <aside className={`nv-cart ${open ? 'is-open' : ''}`}>
        <div className="nv-cart-head">
          <h2>Jouw winkelmand ({items.length})</h2>
          <button className="nv-icon-btn" onClick={onClose} aria-label="Sluiten"><Icon.X /></button>
        </div>
        <div className="nv-cart-body">
          {items.length === 0 &&
          <div className="nv-cart-empty">
              <p>Je winkelmand is leeg.</p>
              <button className="nv-pill" style={{ marginTop: 8 }} onClick={onClose}>Begin met winkelen</button>
            </div>
          }
          {items.map((it) =>
          <div key={it.product.id} className="nv-cart-row">
              <div className="nv-cart-row-img" style={{ overflow: 'hidden' }}>
                <img src={it.product.images[0]} alt={it.product.name}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div>
                <div className="nv-cart-row-title">Nuvibody {it.product.name}</div>
                <div className="nv-cart-row-sub">{it.product.sub}</div>
                <div className="nv-cart-qty">
                  <button onClick={() => onChangeQty(it.product.id, -1)} aria-label="Min"><Icon.Minus /></button>
                  <span style={{ minWidth: 14, textAlign: 'center' }}>{it.qty}</span>
                  <button onClick={() => onChangeQty(it.product.id, 1)} aria-label="Plus"><Icon.Plus /></button>
                  <button onClick={() => onRemove(it.product.id)} style={{ marginLeft: 8, color: 'var(--ink-3)' }}>Verwijder</button>
                </div>
              </div>
              <div className="mono" style={{ fontSize: 13 }}>{fmt(it.product.price * it.qty)}</div>
            </div>
          )}
        </div>
        {items.length > 0 &&
        <div className="nv-cart-foot">
            <div className="nv-cart-total">
              <span>Subtotaal</span>
              <b>{fmt(total)}</b>
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 14 }}>Verzendkosten & btw worden berekend bij het afrekenen. Gratis verzekerde verzending vanaf €50.</div>
            <button className="nv-pill is-filled" style={{ width: '100%', height: 52, justifyContent: 'center', fontSize: 15 }} onClick={onCheckout}>
              Afrekenen, {fmt(total)}
            </button>
            <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginTop: 14, flexWrap: 'wrap' }}>
              {['iDEAL', 'Klarna', 'Apple Pay', 'PayPal', 'Visa'].map((p) =>
            <span key={p} className="mono" style={{ padding: '4px 8px', border: '1px solid var(--line)', borderRadius: 4, color: 'var(--ink-3)' }}>{p}</span>
            )}
            </div>
          </div>
        }
      </aside>
    </>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Toast (added to bag confirmation)
// ─────────────────────────────────────────────────────────────────────────────
function Toast({ msg, show }) {
  return <div className={`nv-toast ${show ? 'is-show' : ''}`}>{msg}</div>;
}

// ─────────────────────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────────────────────
function Footer({ onNav }) {
  return (
    <footer className="nv-footer">
      <div className="nv-footer-grid">
        <div>
          <a className="nv-logo" style={{ color: '#f4ede0' }}>
            <img src="img/logo-white.png" alt="Nuvibody" style={{ height: 28, width: 'auto', maxWidth: 'none', display: 'block', filter: 'brightness(0) invert(1)' }} />
          </a>
          <p className="nv-footer-tagline">Klinische kwaliteit rood licht therapie. Ontworpen in Nijmegen. Gebouwd voor de lange termijn.</p>
          <button className="nv-pill" style={{ borderColor: '#f4ede0', color: '#f4ede0' }}>Product Quiz <span className="nv-dot" /></button>
        </div>
        <div className="nv-footer-col">
          <h4>Onze producten</h4>
          <a onClick={() => onNav('shop')}>LITE 300 Desktop</a>
          <a onClick={() => onNav('shop')}>LITE 1500 Full Body</a>
          <a onClick={() => onNav('shop')}>CORE 300 Desktop</a>
          <a onClick={() => onNav('shop')}>CORE 1500 Full Body</a>
          <a onClick={() => onNav('shop')}>AURA+ LED Masker</a>
          <a onClick={() => onNav('shop')}>Infrarood Saunadeken</a>
          <a onClick={() => onNav('shop')}>Full Body BEDs</a>
        </div>
        <div className="nv-footer-col">
          <h4>Nuvibody</h4>
          <a onClick={() => onNav('about')}>Ons verhaal</a>
          <a>Affiliates</a>
          <a>Retailers</a>
          <a>Carrières</a>
          <a>Blog / Kennisbank</a>
        </div>
        <div className="nv-footer-col">
          <h4>Support</h4>
          <a>Klantenservice</a>
          <a>Garantie</a>
          <a>Privacybeleid</a>
          <a>Retourbeleid</a>
          <a>Algemene voorwaarden</a>
        </div>
        <div className="nv-footer-col">
          <h4>Contact</h4>
          <a>+31 85 250 2810</a>
          <a>support@nuvibody.com</a>
          <a>b2b@nuvibody.com</a>
          <a>socials@nuvibody.com</a>
        </div>
      </div>
      <div className="nv-footer-bottom">
        <div>© 2026 Nuvibody, Spoorstraat 30a, 6511AH Nijmegen · KVK 80973698</div>
        <div className="nv-footer-pay">
          {['iDEAL', 'Klarna', 'Apple Pay', 'Bancontact', 'PayPal', 'Mastercard', 'Visa', 'Shop Pay'].map((p) => <span key={p}>{p}</span>)}
        </div>
      </div>
    </footer>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Trust strip (4-up)
// ─────────────────────────────────────────────────────────────────────────────
function TrustStrip() {
  const items = [
  { label: '120 Dagen op Proef', sub: 'Risicovrij thuis uitproberen' },
  { label: 'Achteraf betalen', sub: 'Shop nu, betaal later met Klarna' },
  { label: 'Tot 5 Jaar Garantie', sub: 'Op uitgekozen modellen' },
  { label: 'Gratis Verzending', sub: 'Verzekerd, in 2–4 dagen' }];

  return (
    <div className="nv-trust">
      {items.map((it, i) =>
      <div key={i} className="nv-trust-item">
          <span className="mono">{it.sub}</span>
          <b>{it.label}</b>
        </div>
      )}
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Press strip (marquee)
// ─────────────────────────────────────────────────────────────────────────────
function PressStrip() {
  const items = [
  { logo: 'Noor, 44', quote: 'Ik gebruik het nu drie maanden en mijn huid is rustiger dan ooit. Minder roodheid, gladder.' },
  { logo: 'James, 28', quote: 'Eerste 2 weken voelde ik me moe, daarna ineens lichter, energieker. Alsof er iets "aan" ging.' },
  { logo: 'Lisette, 52', quote: 'Na jaren fibromyalgie voelde ik voor het eerst verlichting die niet uit een potje kwam. Geen wondermiddel, maar wél echt effect.' },
  { logo: 'Holly D., 34', quote: 'Wat mij verraste, was hoeveel rust het in m\u2019n hoofd bracht. Ik slaap beter, maar voel me vooral helderder overdag.' },
  { logo: 'Marijke, 49', quote: 'Ik gebruik het met mijn dochter. Zij tegen acne, ik tegen pigmentvlekken. We zien allebei resultaat.' },
  { logo: 'Petra, 48', quote: 'Sinds ik dit gebruik, heb ik overdag meer focus, \u2019s avonds meer rust. Ik voel me gewoon stabieler.' }];

  const loop = [...items, ...items];
  return (
    <section className="nv-press">
      <div className="nv-press-track">
        {loop.map((it, i) =>
        <div key={i} className="nv-press-item">
            <div className="nv-press-logo">{it.logo}</div>
            <div className="nv-press-quote">{it.quote}</div>
          </div>
        )}
      </div>
    </section>);

}

// Expose to global scope
Object.assign(window, {
  Icon, PRODUCTS, CATEGORIES, NAV, MEGA, findProduct, fmt,
  PromoBar, Header, MegaMenu, ProductCard, MiniCart, Toast, Footer, TrustStrip, PressStrip, Stars
});