// pages.jsx, Home (3 hero variants), Shop, PDP, About (NL)
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

// ─────────────────────────────────────────────────────────────────────────────
// HERO A, Hello Klean style: split with big product image right, offset copy left
// ─────────────────────────────────────────────────────────────────────────────
function HeroA({ onNav }) {
  return (
    <section className="nv-hero-a" data-screen-label="Home, Hero A">
      <div className="nv-hero-a-l">
        <div className="nv-hero-eyebrow">★★★★★ 4,8 UIT 220+ REVIEWS</div>
        <h1 className="nv-hero-title h-display">Klinische Kwaliteit Rood Licht Therapie.</h1>
        <p className="nv-hero-sub">Verbeter je welzijn met Nuvibody. Rood en nabij-infrarood licht voor herstel, energie en een gezondere huid — thuis, in 10 minuten per dag.</p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <button className="nv-pill is-filled" onClick={() => onNav('shop')}>Shop 40% SALE <Icon.ArrowR /></button>
          <button className="nv-pill">Product Quiz <span className="nv-dot" /></button>
        </div>
      </div>
      <div className="nv-hero-a-r" style={{ overflow: 'hidden' }}>
        <img src="img/hero-danique-lite1500.png" alt="Nuvibody LITE 1500 in gebruik"
        style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
      </div>
      <div className="nv-hero-dots"><span className="is-active" /><span /></div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// HERO B, Dark editorial card with red glow, copy + product right
// ─────────────────────────────────────────────────────────────────────────────
function HeroB({ onNav }) {
  return (
    <section className="nv-hero-b" data-screen-label="Home, Hero B">
      <div className="nv-hero-b-inner">
        <div className="nv-hero-glow" />
        <div className="nv-hero-b-text">
          <div className="nv-hero-eyebrow" style={{ color: 'rgba(244,237,224,.6)' }}>Wetenschap, geen magie.</div>
          <h1 className="nv-hero-title h-display">Klinische Kwaliteit Rood Licht Therapie.</h1>
          <p className="nv-hero-sub">Specifieke golflengtes (630–660nm + 810–850nm) stimuleren je mitochondriën om weer energie te produceren. Onderbouwd door 6.000+ wetenschappelijke studies.</p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button className="nv-pill" onClick={() => onNav('shop')}
            style={{ background: '#da2000', color: '#fff', borderColor: '#da2000' }}>Shop 50% SALE <Icon.ArrowR /></button>
            <button className="nv-pill" style={{ borderColor: 'rgba(244,237,224,.3)', color: '#f4ede0', background: 'transparent' }}>Hoe het werkt</button>
          </div>
          <div className="nv-hero-c-meta" style={{ color: 'rgba(244,237,224,.5)', marginTop: 40 }}>
            <span>Golflengtes<b style={{ color: '#f4ede0' }}>4</b></span>
            <span>Sessie<b style={{ color: '#f4ede0' }}>10 min</b></span>
            <span>Studies<b style={{ color: '#f4ede0' }}>6.000+</b></span>
          </div>
        </div>
        <div className="nv-hero-b-img" style={{ overflow: 'hidden', borderRadius: '18px' }}>
          <img src="img/hero-duo-lifestyle.png" alt="Nuvibody DUO panelen boven bank"
          style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0, borderRadius: '18px' }} />
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// HERO C, Editorial typography, big italic accent
// ─────────────────────────────────────────────────────────────────────────────
function HeroC({ onNav }) {
  return (
    <section className="nv-hero-c" data-screen-label="Home, Hero C">
      <div className="nv-hero-c-text">
        <div className="nv-hero-eyebrow">★★★★★ 4,5 · 1000+ tevreden gebruikers</div>
        <h1 className="h-display">Verbeter je welzijn,<br />met <em>Nuvibody</em>.</h1>
        <p className="nv-hero-sub">Rood en nabij-infrarood licht voor herstel, een gezondere huid, betere slaap en stabielere energie. 10 minuten per dag, gewoon thuis.</p>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <button className="nv-pill is-filled" onClick={() => onNav('shop')}>Shop 40% SALE <Icon.ArrowR /></button>
          <button className="nv-pill">Product Quiz</button>
        </div>
        <div className="nv-hero-c-meta">
          <span>Huid<b>Collageen +</b></span>
          <span>Herstel<b>Sneller herstel</b></span>
          <span>Energie<b>ATP ↑</b></span>
        </div>
      </div>
      <div className="nv-hero-c-img" style={{ overflow: 'hidden', borderRadius: '18px' }}>
        <img src="img/lite1500-stand.jpg" alt="Nuvibody LITE 1500 met statief"
        style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0, borderRadius: '18px' }} />
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────────
// Home page
// ─────────────────────────────────────────────────────────────────────────────
function HomePage({ tweak, onNav, onAdd }) {
  const [appCat, setAppCat] = useStateP('panel');
  const [grid, setGrid] = useStateP('all');

  const Hero = tweak.heroVariant === 'b' ? HeroB : tweak.heroVariant === 'c' ? HeroC : HeroA;

  const featured = PRODUCTS.filter((p) => grid === 'all' || p.cat === grid).slice(0, 4);

  return (
    <main className="nv-page" data-screen-label="01 Home">
      <Hero onNav={onNav} />

      <TrustStrip />

      {/* Featured products grid */}
      <section className="nv-section" style={{ paddingTop: 'calc(var(--density-y) * 0.7)' }}>
        <div className="nv-section-head">
          <span className="mono">Onze producten</span>
          <h2>Klinische tools<br />voor een dagelijks ritueel.</h2>
          <p>Van een desktoppaneel tot een full-body bed. Elk Nuvibody-apparaat is gebouwd volgens dezelfde wetenschappelijk onderbouwde standaard, voor de lange termijn.</p>
        </div>
        <div className="nv-shop-cat-toggle-wrap" style={{ marginBottom: 32 }}>
          <div className="nv-cat-toggle">
            {[{ id: 'all', label: 'Alles' }, { id: 'panel', label: 'Panelen' }, { id: 'mask', label: 'Masker' }, { id: 'sauna', label: 'Sauna' }, { id: 'bundle', label: 'Bundels' }].map((c) =>
            <button key={c.id} className={grid === c.id ? 'is-active' : ''} onClick={() => setGrid(c.id)}>{c.label}</button>
            )}
          </div>
        </div>
        <div className="nv-grid-4">
          {featured.map((p) =>
          <ProductCard key={p.id} product={p} onView={(id) => onNav('product', id)} onAdd={onAdd} />
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <button className="nv-pill" onClick={() => onNav('shop')}>Bekijk alle producten <Icon.ArrowR /></button>
        </div>
      </section>

      {/* Quote / mission */}
      <section className="nv-quote">
        <p>Wij geloven niet in quick fixes of kunstmatige boosts. Duurzame resultaten ontstaan door herhaalbare gewoontes en systemen die zich in de tijd opstapelen. <em>For the long game.</em></p>
      </section>

      {/* Application image with toggle (panels/mask/sauna style) */}
      <section className="nv-apps">
        <div className="nv-apps-img" style={{ overflow: 'hidden' }}>
          <img src="img/hero-danique-lite1500.png" alt="Nuvibody lifestyle"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div className="nv-apps-toggle">
            <div className="nv-cat-toggle">
              <button className={appCat === 'panel' ? 'is-active' : ''} onClick={() => setAppCat('panel')}>Panelen</button>
              <button className={appCat === 'mask' ? 'is-active' : ''} onClick={() => setAppCat('mask')}>Masker</button>
              <button className={appCat === 'sauna' ? 'is-active' : ''} onClick={() => setAppCat('sauna')}>Deken</button>
            </div>
          </div>
        </div>
      </section>

      {/* Products for selected application */}
      <section className="nv-section" style={{ paddingTop: 'calc(var(--density-y) * 0.5)', paddingBottom: 0 }}>
        <div className="nv-section-head" style={{ marginBottom: 'calc(var(--density-y) * 0.4)' }}>
          <span className="mono">
            {appCat === 'panel' ? 'Voor het hele lichaam' : appCat === 'mask' ? 'Voor je gezicht' : 'Voor diep herstel'}
          </span>
          <h2>
            {appCat === 'panel' && 'Onze rood licht panelen.'}
            {appCat === 'mask' && 'Het AURA+ LED masker.'}
            {appCat === 'sauna' && 'De infrarood saunadeken.'}
          </h2>
          <p>
            {appCat === 'panel' && 'Klinische irradiantie in drie maten. Kies de juiste voor jouw lichaam en routine.'}
            {appCat === 'mask' && 'Flexibel, handsfree, en klaar in tien minuten. Voor gezicht en décolleté.'}
            {appCat === 'sauna' && 'Diepe warmte voor herstel en een dagelijkse detox-afsluiter.'}
          </p>
        </div>
        <div className="nv-grid-4">
          {PRODUCTS.filter((p) => p.cat === appCat).slice(0, 4).map((p) =>
          <ProductCard key={`${appCat}-${p.id}`} product={p} onView={(id) => onNav('product', id)} onAdd={onAdd} slotPrefix={`apps-${appCat}`} />
          )}
        </div>
      </section>

      {/* 4-up ingredients/benefits */}
      <section className="nv-section" style={{ paddingTop: 'calc(var(--density-y) * 0.6)' }}>
        <div className="nv-section-head">
          <span className="mono">Waarom Nuvibody werkt</span>
          <h2>Wetenschap, geen magie.</h2>
        </div>
        <div className="nv-grid-4">
          {[
          { label: 'De juiste golflengtes', body: 'Rood licht (630 + 660nm) voor huid en collageen. Nabij-infrarood (810 + 850nm) voor dieper weefsel, organen en gewrichten.', img: 'img/topic-skin.jpg' },
          { label: 'Het juiste vermogen', body: 'Te zwak werkt niet, te sterk verstoort het effect. Onze apparaten zijn afgesteld zoals aanbevolen in wetenschappelijke studies.', img: 'img/topic-recovery.jpg' },
          { label: 'Medisch gecertificeerd', body: 'ISO 9001 + 13485, CE, MDSAP en RoHS. Geproduceerd in een gecertificeerde faciliteit voor medische apparatuur.', img: 'img/nasa-2.jpg' },
          { label: 'Tot 5 jaar garantie', body: 'We gebruiken alleen de beste materialen van de beste leveranciers. 120 dagen op proef en tot 5 jaar garantie.', img: 'img/topic-sleep.jpg' }].
          map((it, i) =>
          <div key={i}>
              <div style={{ aspectRatio: '1', borderRadius: '14px', background: 'var(--bg-card)', position: 'relative', overflow: 'hidden' }}>
                <img src={it.img} alt={it.label}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ marginTop: 18 }}>
                <div style={{ fontWeight: 500, fontSize: 15, marginBottom: 4 }}>{it.label}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>{it.body}</div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Ecosystem 3-up */}
      <section className="nv-section" style={{ paddingTop: 0 }}>
        <div className="nv-section-head">
          <span className="mono">Toepassingen</span>
          <h2>Wat rood licht voor jou kan doen.</h2>
          <p>Van huidverbetering tot snellere recovery, betere slaap en stabielere energie. Eenzelfde licht, voor verschillende doelen.</p>
        </div>
        <div className="nv-grid-3">
          {[
          { tag: 'HUID & ANTI-AGING', body: 'Stimuleert collageen, vermindert ontstekingen en bevordert bloedcirculatie. Effectief tegen rimpels, acne, littekens en pigmentvlekken.', img: 'img/aura-lifestyle.png' },
          { tag: 'HERSTEL & PIJN', body: 'Werkt natuurlijk en effectief tegen pijn en ontstekingen. 10 minuten per dag voor sneller, efficienter herstel.', img: 'img/lite1500-1.png' },
          { tag: 'SLAAP & ENERGIE', body: 'Stimuleert melatonine ’s avonds, ATP en focus overdag. Compenseert de negatieve effecten van blauw licht.', img: 'img/blanket-1.png' }].
          map((it, i) =>
          <div key={i} className="nv-ecosystem-card">
              <div className="nv-ecosystem-img">
                <img src={it.img} alt={it.tag}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div className="nv-ecosystem-label">{it.tag}</div>
              <p>{it.body}</p>
            </div>
          )}
        </div>
      </section>

      <PressStrip />

      {/* About teaser big dark card */}
      <section className="nv-section" style={{ padding: 'var(--density-y) 0' }}>
        <div className="nv-about-big" style={{ justifyContent: 'flex-start' }}>
          <img src="img/about-us.webp" alt="Oprichter Nuvibody"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', transform: 'scale(1.4)', transformOrigin: '0% center' }} />
          <div className="nv-about-big-inner" style={{ textAlign: 'left', marginLeft: '6%', maxWidth: '52ch' }}>
            <span className="mono" style={{ color: 'rgba(255,255,255,.6)', display: 'block', marginBottom: 14 }}>Verhaal van de oprichter</span>
            <h2 style={{ margin: '0 0 20px' }}>Begin twintig kreeg ik ernstige psoriasis. De oplossing volgens artsen: zware steroïdecrèmes.</h2>
            <p>Opgevoed met een vertrouwen in natuurlijke gezondheid, besloot ik een andere weg te zoeken. Zo ontdekte ik roodlichttherapie. Wat me opviel: hoe ontoegankelijk de markt was. Apparaten waren peperduur en betrouwbare informatie ontbrak. Zo is Nuvibody ontstaan, met een missie om roodlichttherapie toegankelijk en betaalbaar te maken.</p>
            <button className="nv-pill" onClick={() => onNav('about')}>Lees het volledige verhaal <Icon.ArrowR /></button>
          </div>
        </div>
      </section>

      {/* Two-up product feature */}
      <section className="nv-two-up">
        <div>
          <span className="mono" style={{ color: 'var(--ink-3)', display: 'block', marginBottom: 14 }}>Welke lamp past bij jou?</span>
          <h2>Grotere panelen voor efficientie. Kleinere modellen voor lokaal en onderweg.</h2>
          <p>Grotere panelen behandelen in één keer een groot oppervlak, handig als je meerdere zones tegelijk wilt aanpakken. Kleinere modellen zijn juist handig als je het lokaal inzet, voor je gezicht, een knie of je onderrug.</p>
          <p>Twijfel je? Gebruik onze keuzehulp quiz om direct te zien welk model bij jouw doelen past.</p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button className="nv-pill is-filled" onClick={() => onNav('shop')} style={{ backgroundColor: "rgb(218, 32, 0)" }}>Vergelijk panelen <Icon.ArrowR /></button>
            <button className="nv-pill">Product Quiz</button>
          </div>
        </div>
        <div className="nv-two-up-img" style={{ overflow: 'hidden' }}>
          <img src="img/duo-labels.png" alt="Nuvibody panelen vergelijking" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </section>
    </main>);}
// ─────────────────────────────────────────────────────────────────────────────
// SHOP page
// ─────────────────────────────────────────────────────────────────────────────
function ShopPage({ onNav, onAdd }) {
  const [cat, setCat] = useStateP('all');
  const filtered = cat === 'all' ? PRODUCTS : PRODUCTS.filter((p) => p.cat === cat);
  return (
    <main className="nv-page" data-screen-label="02 Shop">
      <section style={{ padding: '24px 0 0' }}>
        <div className="nv-shop-hero">
          <img src="img/hero-duo-lifestyle.png" alt="Nuvibody shop hero"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div className="nv-shop-hero-inner" style={{ color: '#fff', textShadow: '0 2px 24px rgba(0,0,0,.4)' }}>
            <span className="mono" style={{ color: 'rgba(255,255,255,.85)', display: 'block', marginBottom: 14 }}>Rood Licht Therapie</span>
            <h1 style={{ color: '#fff' }}>Vind jouw lamp.</h1>
          </div>
        </div>
        <div className="nv-shop-intro">
          <p>Grotere panelen behandelen in één keer een groot oppervlak, handig als je meerdere zones tegelijk wilt aanpakken. Kleinere modellen zijn juist handig voor lokaal gebruik of onderweg. Twijfel je? Gebruik onze keuzehulp quiz om direct te zien welk model bij jouw doelen past.</p>
        </div>
        <div className="nv-shop-cat-toggle-wrap">
          <div className="nv-cat-toggle">
            {CATEGORIES.map((c) =>
            <button key={c.id} className={cat === c.id ? 'is-active' : ''} onClick={() => setCat(c.id)}>{c.label}</button>
            )}
          </div>
        </div>
      </section>
      <section className="nv-shop-grid">
        {filtered.map((p) =>
        <ProductCard key={p.id} product={p} onView={(id) => onNav('product', id)} onAdd={onAdd} slotPrefix="shop" />
        )}
      </section>
      <section className="nv-quote" style={{ paddingTop: 0 }}>
        <p>Niet zeker welke je moet kiezen? <a style={{ textDecoration: 'underline', textUnderlineOffset: 4 }}>Doe de Product Quiz</a>, we adviseren de juiste setup voor jouw doelen en routine.</p>
      </section>
    </main>);

}

// ─────────────────────────────────────────────────────────────────────────────
// PRODUCT detail page, Hello Klean-style layout
// ─────────────────────────────────────────────────────────────────────────────
const SETUP_OPTIONS = {
  panel: [
  { id: 'standalone', label: 'Alleen paneel', thumb: 'img/lite1500-2.png', priceDelta: 0 },
  { id: 'stand', label: 'Met statief', thumb: 'img/lite1500-stand.jpg', priceDelta: 199 },
  { id: 'mount', label: 'Deurmontage', thumb: 'img/lite300-1.png', priceDelta: 89 }],

  mask: [
  { id: 'face', label: 'Alleen gezicht', thumb: 'img/aura-product.png', priceDelta: 0 },
  { id: 'face-dec', label: 'Gezicht + Décolleté', thumb: 'img/aura-product-2.png', priceDelta: 0 }],

  sauna: [
  { id: 'standard', label: 'Standaard', thumb: 'img/blanket-1.png', priceDelta: 0 },
  { id: 'liner', label: 'Met inlegvel', thumb: 'img/blanket-3.png', priceDelta: 49 }],

  bundle: [
  { id: 'standard', label: 'Standaard duo', thumb: 'img/duo-labels.png', priceDelta: 0 },
  { id: 'pro', label: 'Pro montage', thumb: 'img/hero-duo-lifestyle.png', priceDelta: 349 }],

  bed: [
  { id: 'standard', label: 'LITE Bed', thumb: 'img/lite1500-stand.jpg', priceDelta: 0 },
  { id: 'pro', label: 'PRO Bed', thumb: 'img/lite1500-stand-alt.jpg', priceDelta: 1500 }]

};

const GIFT_OPTIONS = [
{ id: 'mask-trial', name: 'AURA+ proefsessie', img: 'img/aura-product.png', wasPrice: 49, badge: 'Cadeau' },
{ id: 'eye', name: 'Oogbescherming', img: 'img/topic-recovery.jpg', wasPrice: 19, badge: 'Cadeau' },
{ id: 'stand', name: 'Verstelbaar statief', img: 'img/lite1500-stand.jpg', wasPrice: 199, badge: 'Cadeau' },
{ id: 'guide', name: 'Ritueel-gids', img: 'img/topic-skin.jpg', wasPrice: 12, badge: 'Cadeau' }];


function ProductPage({ productId, onNav, onAdd }) {
  const product = findProduct(productId);
  const [thumb, setThumb] = useStateP(0);
  const setups = SETUP_OPTIONS[product.cat] || SETUP_OPTIONS.panel;
  const [setupIdx, setSetupIdx] = useStateP(0);
  const [giftIdx, setGiftIdx] = useStateP(0);
  const setup = setups[setupIdx];
  const totalPrice = product.price + setup.priceDelta;

  // Reset state when product changes
  useEffectP(() => {
    setThumb(0);
    setSetupIdx(0);
    setGiftIdx(0);
  }, [productId]);

  const cycle = (delta) => setThumb((thumb + product.images.length + delta) % product.images.length);

  const handleAdd = () => {
    onAdd({ ...product, price: totalPrice });
  };

  return (
    <main className="nv-page nv-pdp" data-screen-label="03 Product">
      {/* Breadcrumb */}
      <div style={{ padding: '12px 0 24px', fontSize: 13, color: 'var(--ink-3)' }}>
        <a onClick={() => onNav('home')}>Home</a> <span style={{ margin: '0 8px' }}>/</span>
        <a onClick={() => onNav('shop')}>Shop</a> <span style={{ margin: '0 8px' }}>/</span>
        <span style={{ color: 'var(--ink)' }}>{product.name}</span>
      </div>

      <div className="nv-pdp-grid">
        {/* Gallery */}
        <div className="nv-pdp-gallery">
          <div className="nv-pdp-gallery-main">
            <img src={product.images[thumb]} alt={`${product.name} weergave ${thumb + 1}`}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div className="nv-pdp-gallery-nav">
            <button className="nv-pdp-gallery-arrow" onClick={() => cycle(-1)} aria-label="Vorige"><Icon.ArrowL /></button>
            <div className="nv-pdp-gallery-dots">
              {product.images.map((_, i) =>
              <span key={i} className={thumb === i ? 'is-active' : ''} onClick={() => setThumb(i)} />
              )}
            </div>
            <button className="nv-pdp-gallery-arrow" onClick={() => cycle(1)} aria-label="Volgende"><Icon.ArrowR /></button>
          </div>
        </div>

        {/* Info */}
        <div className="nv-pdp-info">
          <h1>{product.name}</h1>
          <p className="nv-pdp-sub-h">{product.sub}</p>
          <p className="nv-pdp-desc">{product.desc}</p>

          <div className="nv-pdp-rating-row">
            <Stars rating={product.rating} reviews={product.reviews} />
            <span style={{ color: 'var(--ink-3)' }}>·</span>
            <span className="mono" style={{ color: 'var(--ink-3)' }}>120 dagen proberen</span>
            <span style={{ color: 'var(--ink-3)' }}>·</span>
            <span className="mono" style={{ color: 'var(--ink-3)' }}>3 jaar garantie</span>
          </div>

          {/* Setup swatches */}
          <div className="nv-pdp-variant">
            <div className="nv-pdp-variant-label">Setup: <b>{setup.label}</b></div>
            <div className="nv-pdp-swatches">
              {setups.map((s, i) =>
              <button key={s.id} className={`nv-pdp-swatch ${setupIdx === i ? 'is-active' : ''}`}
              onClick={() => setSetupIdx(i)} aria-label={s.label}>
                  <span className="nv-pdp-swatch-inner"
                style={{ backgroundImage: `url(${s.thumb})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
                </button>
              )}
            </div>
          </div>

          {/* Main card */}
          <div className="nv-pdp-card">
            <div className="nv-pdp-card-head">
              <span className="nv-pdp-card-radio is-checked" />
              <div className="nv-pdp-card-name">
                {product.name}
                <small>+ Welkomstbundel</small>
              </div>
              <div className="nv-pdp-card-price">
                {fmt(totalPrice)}
                {product.was && <s>{fmt(product.was + setup.priceDelta)}</s>}
              </div>
            </div>

            <ul className="nv-pdp-bullets">
              <li>{product.name} {setup.id !== 'standalone' ? `+ ${setup.label.toLowerCase()}` : 'apparaat'}</li>
              <li>Welkomstcadeau {giftIdx >= 0 && GIFT_OPTIONS[giftIdx] ? `, ${GIFT_OPTIONS[giftIdx].name} (t.w.v. €${GIFT_OPTIONS[giftIdx].wasPrice})` : ''}</li>
              <li>120 dagen risicovrij thuis proberen</li>
              <li>3 jaar garantie + gratis reparaties</li>
              <li>Gratis verzekerde verzending, geleverd in 2–4 dagen</li>
            </ul>

            <a className="nv-pdp-card-link">Pauzeer, sla over of stuur terug, wanneer je wilt →</a>

            {/* Choose Your Gift */}
            <div className="nv-pdp-gift">
              <div className="nv-pdp-gift-head">
                <div className="nv-pdp-gift-title">Kies je cadeau</div>
                <span className="mono" style={{ color: 'var(--ink-3)' }}>1 van 4</span>
              </div>
              <div className="nv-pdp-gift-grid">
                {GIFT_OPTIONS.slice(0, 3).map((g, i) =>
                <div key={g.id} className={`nv-pdp-gift-item ${giftIdx === i ? 'is-active' : ''}`}
                onClick={() => setGiftIdx(i)}>
                    <div className="nv-pdp-gift-img">
                      <img src={g.img} alt={g.name} />
                      <span className="nv-pdp-gift-badge">Cadeau</span>
                    </div>
                    <div className="nv-pdp-gift-name">{g.name}</div>
                    <div className="nv-pdp-gift-price"><s>€{g.wasPrice}</s></div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* CTA */}
          <button className="nv-pdp-cta" onClick={handleAdd}>
            In winkelmand <span style={{ opacity: 0.5 }}>,</span> {fmt(totalPrice)}
            {product.was && <s>{fmt(product.was + setup.priceDelta)}</s>}
          </button>

          {/* Payment chips */}
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginTop: 18 }}>
            {['iDEAL', 'Klarna · 3×', 'Apple Pay', 'PayPal', 'Visa'].map((p) =>
            <span key={p} className="mono" style={{ padding: '4px 10px', border: '1px solid var(--line)', borderRadius: 4, color: 'var(--ink-3)', fontSize: 11 }}>{p}</span>
            )}
          </div>
        </div>
      </div>

      {/* Spec strip */}
      <div className="nv-spec">
        {[
        { label: 'LED\u2019s', value: product.cat === 'panel' ? product.name.includes('300') ? '60' : '300' : product.cat === 'mask' ? '132' : 'n.v.t.' },
        { label: 'Golflengtes', value: '4' },
        { label: 'Sessie', value: '12 min' },
        { label: 'Garantie', value: '3 jaar' }].
        map((s, i) =>
        <div key={i} className="nv-spec-item">
            <div className="mono">{s.label}</div>
            <b>{s.value}</b>
          </div>
        )}
      </div>

      {/* Two-up */}
      <section className="nv-two-up" style={{ padding: 'var(--density-y) 0' }}>
        <div className="nv-two-up-img" style={{ overflow: 'hidden' }}>
          <img src={product.images[1] || product.images[0]} alt={`${product.name} lifestyle`}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div>
          <span className="mono" style={{ color: 'var(--ink-3)', display: 'block', marginBottom: 14 }}>Waarom dit {product.cat === 'mask' ? 'masker' : product.cat === 'sauna' ? 'deken' : 'paneel'}</span>
          <h2>Gebouwd voor de lange termijn. Niet voor een tijdelijke trend.</h2>
          <p>Onze {product.cat === 'mask' ? 'maskers' : product.cat === 'sauna' ? 'dekens' : 'panelen'} zijn ontworpen voor langdurig en intensief gebruik. Geen wegwerp of trendgedreven gadgets, maar betrouwbare apparatuur die jaar na jaar consistent presteert.</p>
          <button className="nv-pill is-filled">Bekijk de specificaties <Icon.ArrowR /></button>
        </div>
      </section>

      {/* Cross-sell */}
      <section style={{ padding: '0 0 80px' }}>
        <div className="nv-section-head">
          <span className="mono">Combineer met</span>
          <h2>Maak je ritueel compleet.</h2>
          <p>Onze klanten combineren rood licht therapie vaak met microneedling, peelings of supplementen. Lichttherapie werkt versterkend en ondersteunt het natuurlijke herstelproces.</p>
        </div>
        <div className="nv-grid-4">
          {PRODUCTS.filter((p) => p.id !== product.id).slice(0, 4).map((p) =>
          <ProductCard key={p.id} product={p} onView={(id) => onNav('product', id)} onAdd={onAdd} slotPrefix="cross" />
          )}
        </div>
      </section>
    </main>);

}

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT page
// ─────────────────────────────────────────────────────────────────────────────
function AboutPage({ onNav }) {
  return (
    <main className="nv-page" data-screen-label="04 About">
      <section style={{ padding: '24px 0 0' }}>
        <div className="nv-about-big" style={{ minHeight: '88vh' }}>
          <img src="img/marathon-1.jpg" alt="Nuvibody bij de Rotterdam Marathon"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div className="nv-about-big-inner">
            <span className="mono" style={{ color: 'rgba(255,255,255,.6)', display: 'block', marginBottom: 14 }}>Over Nuvibody</span>
            <h2>Een Europees merk voor roodlichttherapie. Gebaseerd op wetenschap en precisie.</h2>
            <p>Bedoeld om mensen te helpen zich beter te voelen, op een consistente en veilige manier.</p>
            <button className="nv-pill" onClick={() => onNav('shop')}>Bekijk de producten <Icon.ArrowR /></button>
          </div>
        </div>
      </section>

      {/* What we do */}
      <section className="nv-two-up">
        <div>
          <span className="mono" style={{ color: 'var(--ink-3)', display: 'block', marginBottom: 14 }}>Wat we doen</span>
          <h2>Wetenschap, vertaald naar producten die je daadwerkelijk gebruikt.</h2>
          <p>Nuvibody ontwerpt apparaten voor roodlichttherapie, gebaseerd op bewezen onderzoek naar fotobiomodulatie. Maar wat nog belangrijker is: we vertalen die wetenschap naar producten die mensen daadwerkelijk kunnen begrijpen en gebruiken, zonder twijfel of het werkt, angst voor veiligheid of onrealistische prijzen.</p>
          <p style={{ fontStyle: 'italic' }}>"Wij vinden dat iedereen toegang moet hebben tot de voordelen van lichttherapie. Dat is de basis voor alles wat we doen."</p>
        </div>
        <div className="nv-two-up-img" style={{ overflow: 'hidden' }}>
          <img src="img/topic-skin.jpg" alt="Rood licht op huid"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      </section>

      {/* What makes us different */}
      <section className="nv-two-up" style={{ paddingTop: 0 }}>
        <div className="nv-two-up-img" style={{ overflow: 'hidden' }}>
          <img src="img/topic-recovery.jpg" alt="Wetenschap achter rood licht"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div>
          <span className="mono" style={{ color: 'var(--ink-3)', display: 'block', marginBottom: 14 }}>Wat ons anders maakt</span>
          <h2>Het effect hangt af van de kwaliteit van lichtoutput.</h2>
          <p>Roodlichttherapie gebruikt specifieke golflengtes van licht om de natuurlijke cellulaire processen van het lichaam te ondersteunen. Wanneer dit licht met de juiste intensiteit wordt toegediend, kan het helpen bij het herstel, de gezondheid van de huid en de cellulaire energie.</p>
          <p>Daarom zijn golflengte, intensiteit en het behandelprotocol belangrijk. En daarom besteden we aan elk van deze factoren veel aandacht.</p>
        </div>
      </section>

      {/* Filosofie — For The Long Game */}
      <section className="nv-section" style={{ paddingTop: 0 }}>
        <div className="nv-section-head">
          <span className="mono">Onze filosofie</span>
          <h2>For The Long Game.</h2>
          <p>For the Long Game is een mentaliteit. Voor mensen die bouwen aan hun gezondheid zoals ze bouwen aan hun leven: met focus op de lange termijn. Vanuit diezelfde standaard bouwen wij Nuvibody.</p>
        </div>
        <div className="nv-grid-3">
          {[
          { title: 'Compounding Habits', body: 'We geloven niet in quick fixes of kunstmatige boosts. Duurzame resultaten ontstaan door herhaalbare gewoontes en systemen die zich in de tijd opstapelen.' },
          { title: 'Built To Last', body: 'Onze producten zijn ontworpen voor langdurig en intensief gebruik. Geen wegwerp of trendgedreven gadgets, maar betrouwbare apparatuur die jaar na jaar consistent presteert.' },
          { title: 'Lifestyle-Led, Science-Backed', body: 'Wat we maken is gebaseerd op wetenschap. Maar wetenschap alleen is niet genoeg. Het moet intuitief en eenvoudig zijn, zodat je het moeiteloos toepast in jouw dagelijks leven.' }].
          map((s, i) =>
          <div key={i} style={{ padding: '32px', background: '#f5f5f5', borderRadius: '14px' }}>
              <div className="mono" style={{ color: 'var(--accent)', marginBottom: 14 }}>0{i + 1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 10 }}>{s.title}</div>
              <div style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.55 }}>{s.body}</div>
            </div>
          )}
        </div>
      </section>

      {/* Founder full story */}
      <section className="nv-two-up">
        <div className="nv-two-up-img" style={{ overflow: 'hidden' }}>
          <img src="img/topic-sleep.jpg" alt="Oprichter Nuvibody"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <div>
          <span className="mono" style={{ color: 'var(--ink-3)', display: 'block', marginBottom: 14 }}>Verhaal van de oprichter</span>
          <h2>Een markt die ontoegankelijk was. En een manier om dat te veranderen.</h2>
          <p>Begin twintig werd ik geconfronteerd met ernstige psoriasis. De voorgeschreven behandeling? Zware steroide cremes. Maar opgevoed met een vertrouwen in natuurlijke gezondheid en het aanpakken van de oorzaak in plaats van de symptomen, besloot ik een andere weg te zoeken.</p>
          <p>Zo ontdekte ik roodlichttherapie: een niet-invasieve behandeling die het celherstel bevordert en huidgezondheid verbetert, zelfs bij psoriasis. Wat me opviel, was hoe ontoegankelijk deze markt was. Apparaten waren peperduur en betrouwbare informatie ontbrak.</p>
          <p>Als ondernemer zag ik niet alleen een kans, maar ook een manier om mensen te helpen. Zo is Nuvibody ontstaan, met een missie om roodlichttherapie toegankelijk en betaalbaar te maken.</p>
        </div>
      </section>

      {/* Promise — Een echt zorgeloze ervaring */}
      <section className="nv-section" style={{ paddingTop: 0 }}>
        <div className="nv-section-head">
          <span className="mono">Onze belofte</span>
          <h2>Een echt zorgeloze ervaring.</h2>
        </div>
        <div className="nv-grid-4">
          {[
          { title: 'Perfectie in elk aspect', body: 'Onze apparaten worden ontworpen volgens de hoogste standaarden. Ze zijn niet alleen zorgvuldig getest, maar ook gecertificeerd voor de beste prestaties en veiligheid.' },
          { title: '120 dagen uitproberen', body: 'Zo zeker zijn we van jouw resultaten. Maar als je toch niet enthousiast bent, stuur je het terug en krijg je je aankoopbedrag terug.' },
          { title: 'Tot 5 jaar garantie', body: 'We gebruiken alleen de beste materialen van de beste leveranciers. Deze materialen zijn zo goed dat we tot 5 jaar garantie geven.' },
          { title: 'Service na aankoop', body: 'Onze belofte stopt niet na de aankoop. Heb je vragen of ondersteuning nodig? Ons toegewijde team staat klaar om je snel en deskundig te helpen.' }].
          map((p, i) =>
          <div key={i} style={{ padding: '28px', border: '1px solid var(--line)', borderRadius: '14px' }}>
              <div className="mono" style={{ color: 'var(--ink-3)', marginBottom: 14 }}>0{i + 1}</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 10, letterSpacing: '-0.015em', lineHeight: 1.2 }}>{p.title}</div>
              <p style={{ fontSize: 13, color: 'var(--ink-2)', margin: 0, lineHeight: 1.55 }}>{p.body}</p>
            </div>
          )}
        </div>
      </section>

      {/* Certifications */}
      <section className="nv-section" style={{ paddingTop: 0 }}>
        <div className="nv-section-head">
          <span className="mono">Certificeringen</span>
          <h2>Gebouwd volgens medische standaarden.</h2>
        </div>
        <div className="nv-grid-4">
          {[
          { name: 'ISO 9001 & 13485', body: 'Zorgt ervoor dat onze productiefaciliteit voldoet aan de wereldwijde normen voor kwaliteit en medische apparatuur, voor veiligheid, betrouwbaarheid en consistente producten.' },
          { name: 'MDSAP', body: 'Onze productiefaciliteit is gecertificeerd volgens het Medical Device Single Audit Program, waardoor naleving van de medische regelgeving wordt gegarandeerd.' },
          { name: 'CE Certified', body: 'Onze apparaten voldoen aan de Europese normen voor veiligheid, gezondheid en milieubescherming.' },
          { name: 'RoHS Compliant', body: 'Zorgt ervoor dat onze producten geen gevaarlijke stoffen bevatten en voldoet aan de milieurichtlijnen van de EU.' }].
          map((c, i) =>
          <div key={i} style={{ padding: '32px 24px', border: '1px solid var(--line)', borderRadius: '14px', textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', marginBottom: 14, letterSpacing: '0.06em' }}>GECERTIFICEERD</div>
              <div style={{ fontSize: 22, fontWeight: 500, marginBottom: 10, letterSpacing: '-0.015em' }}>{c.name}</div>
              <p style={{ fontSize: 13, color: 'var(--ink-2)', margin: 0, lineHeight: 1.5 }}>{c.body}</p>
            </div>
          )}
        </div>
      </section>

      <PressStrip />

      {/* CTA card */}
      <section className="nv-section">
        <div className="nv-about-big" data-light="true" style={{ margin: 0, minHeight: '52vh', background: 'var(--bg-card)', color: 'var(--ink)' }}>
          <img src="img/lite1500-stand.jpg" alt="Nuvibody paneel"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.35 }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(244,237,224,.3), rgba(244,237,224,.7))', zIndex: 1 }} />
          <div className="nv-about-big-inner" style={{ color: 'var(--ink)' }}>
            <h2 style={{ color: 'var(--ink)' }}>Klaar voor jouw ritueel?</h2>
            <p style={{ color: 'var(--ink-2)' }}>Doe de Product Quiz en we adviseren de juiste setup voor jouw doelen, ruimte en routine.</p>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginTop: 24, flexWrap: 'wrap' }}>
              <button className="nv-pill is-filled" onClick={() => onNav('shop')}>Shop 40% SALE <Icon.ArrowR /></button>
              <button className="nv-pill">Product Quiz <span className="nv-dot" /></button>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

Object.assign(window, { HomePage, ShopPage, ProductPage, AboutPage, HeroA, HeroB, HeroC });