// ─── Global animation & utility styles (CSS moved to index.html <style>) ──────
const GlobalStyles = () => null;
/* CSS lives in index.html <style> — do not re-add here */
const _dead = `

        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes float-a {
          0%, 100% { transform: rotate(3deg) translateY(0px); }
          50%       { transform: rotate(3deg) translateY(-10px); }
        }
        @keyframes float-b {
          0%, 100% { transform: rotate(-5deg) translateY(0px); opacity: 0.55; }
          50%       { transform: rotate(-5deg) translateY(-7px); opacity: 0.55; }
        }
        .anim { animation: fadeUp 0.65s cubic-bezier(0.16,1,0.3,1) both; }
        .anim-d1 { animation-delay: 80ms; }
        .anim-d2 { animation-delay: 180ms; }
        .anim-d3 { animation-delay: 280ms; }
        .anim-d4 { animation-delay: 400ms; }
        .anim-d5 { animation-delay: 520ms; }
        .float-a { animation: float-a 6s ease-in-out infinite; }
        .float-b { animation: float-b 7.5s ease-in-out infinite; animation-delay: 1s; }

        .svc-row {
          display: grid;
          grid-template-columns: 52px 220px 1fr auto 28px;
          align-items: center;
          gap: 28px;
          padding: 26px 16px;
          border-bottom: 1px solid var(--border-1);
          cursor: pointer;
          transition: background 160ms, padding-left 220ms cubic-bezier(0.16,1,0.3,1);
          border-radius: 10px;
          margin: 0 -16px;
        }
        .svc-row:hover { background: var(--cream-100); padding-left: 28px; }
        .svc-arrow { transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
        .svc-row:hover .svc-arrow { transform: translate(4px,-4px); }

        .werk-card { transition: transform 260ms cubic-bezier(0.16,1,0.3,1), box-shadow 260ms; }
        .werk-card:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -20px rgba(11,20,16,0.28); }

        @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .marquee-outer { overflow: hidden; min-width: 0; }
        .marquee-track { display: flex; animation: marquee 28s linear infinite; width: max-content; }
        .marquee-track:hover { animation-play-state: paused; }

        .gs-hidden { opacity: 0; }
        .float-a, .float-b { will-change: transform; }

        @media (prefers-reduced-motion: reduce) {
          .float-a, .float-b, .anim { animation: none !important; opacity: 1 !important; }
        }

        /* ── Tablet ─────────────────────────────────────────────────── */
        @media (min-width: 768px) and (max-width: 1024px) {
          .nx-hero-h1  { font: 800 clamp(44px,5.5vw,68px)/1.02 'Schibsted Grotesk',system-ui,sans-serif !important; }
          .nx-h2-xl    { font: 800 clamp(36px,5vw,56px)/1.05 'Schibsted Grotesk',system-ui,sans-serif !important; }
          .nx-h2-lg    { font: 700 clamp(30px,4vw,48px)/1.05 'Schibsted Grotesk',system-ui,sans-serif !important; }
          .nx-process-header { grid-template-columns: 1fr !important; gap: 28px !important; }
          .gs-process  { grid-template-columns: repeat(2,1fr) !important; }
          .nx-footer-grid { grid-template-columns: 1fr 1fr !important; }
          section { padding-left: 32px !important; padding-right: 32px !important; }
        }

        /* ── Mobile ─────────────────────────────────────────────────── */
        @media (max-width: 767px) {
          /* Overflow prevention */
          html, body { overflow-x: hidden !important; }
          section { overflow-x: hidden !important; }

          /* Disable iOS fixed background bug */
          section { background-attachment: scroll !important; }

          /* Header */
          .nexion-nav, .nexion-nav-cta, .nexion-bar-extra { display: none !important; }
          .nexion-hamburger { display: flex !important; }

          /* Section padding */
          section { padding: 48px 20px !important; }

          /* ── Headings (override full font shorthand) ── */
          .nx-hero-h1 { font: 800 34px/1.05 'Schibsted Grotesk',system-ui,sans-serif !important; }
          .nx-h2-xl   { font: 800 26px/1.1 'Schibsted Grotesk',system-ui,sans-serif !important; }
          .nx-h2-lg   { font: 700 26px/1.1 'Schibsted Grotesk',system-ui,sans-serif !important; }
          .nx-score   { font: 800 48px/1 'Schibsted Grotesk',system-ui,sans-serif !important; }
          .nx-cta-h   { font: 800 30px/1.05 'Schibsted Grotesk',system-ui,sans-serif !important; }

          /* ── Grids → 1 kolom ── */
          .nx-hero-grid, .nx-werk-grid, .nx-faq-grid, .nx-overons-grid, .nx-cta-grid, .nx-svc-header, .nx-process-header, .nx-grid-2, .nx-grid-3 {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
          }
          .nx-hero-previews { display: none !important; }
          .nx-hero-stats { gap: 12px !important; flex-wrap: wrap !important; }

          /* ── Process ── */
          .gs-process       { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
          .nx-process-dark  { grid-template-columns: 1fr 1fr !important; gap: 16px !important; padding: 20px 20px !important; }

          /* ── Services rows ── */
          .svc-row {
            grid-template-columns: 40px 1fr !important;
            gap: 12px !important;
            padding: 16px 0 !important;
            margin: 0 !important;
          }
          .nx-svc-price  { display: none !important; }
          .nx-svc-tag    { display: none !important; }
          .nx-svc-arrow  { display: none !important; }
          .nx-svc-desc   { font-size: 13px !important; line-height: 1.5 !important; margin-top: 4px !important; }

          /* ── Werk carousel ── */
          .nx-werk-carousel { height: 300px !important; overflow: hidden !important; }
          .nx-fan-side { display: none !important; }

          /* ── OverOns ── */
          .nx-overons-facts { grid-template-columns: 1fr 1fr !important; }

          /* ── Footer ── */
          .nx-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

          /* ── FAQ ── */
          .nx-faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
`; /* end dead CSS string */


// ─── Browser chrome shared wrapper ────────────────────────────────────────────
const BrowserChrome = ({ url, children, shadow = 'strong' }) => (
  <div style={{
    background: '#fff', borderRadius: 14,
    boxShadow: shadow === 'strong'
      ? '0 28px 56px -16px rgba(11,20,16,0.5), 0 8px 20px -8px rgba(11,20,16,0.32)'
      : '0 16px 40px -12px rgba(11,20,16,0.32), 0 4px 12px -4px rgba(11,20,16,0.18)',
    overflow: 'hidden', width: '100%',
  }}>
    <div style={{ background: '#F0EDE6', padding: '9px 14px', display: 'flex', alignItems: 'center', gap: 6, borderBottom: '1px solid #E0DDD4' }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF5F57' }}/>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FEBC2E' }}/>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#28C840' }}/>
      <div style={{ marginLeft: 10, flex: 1, height: 16, background: '#fff', borderRadius: 5, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{ font: '400 8px -apple-system, sans-serif', color: '#999', letterSpacing: 0 }}>{url}</span>
      </div>
    </div>
    {children}
  </div>
);

// ─── Salon Preview A — Studio Elise (front card) ───────────────────────────
const SalonPreviewA = () => {
  const gold = 'var(--lime-400)';
  const dark = 'var(--forest-950)';
  const rose = 'var(--forest-500)';
  return (
    <BrowserChrome url="studio-elise.nl" shadow="strong">
      {/* Nav */}
      <div style={{ background: '#fff', borderBottom: '1px solid var(--border-1)', padding: '11px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ font: '800 13px Schibsted Grotesk, sans-serif', letterSpacing: '-0.03em', color: dark }}>
          Studio Elise<span style={{ color: rose, fontSize: 15 }}>.</span>
        </span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          {['Diensten', 'Over ons', 'Contact'].map(n => (
            <span key={n} style={{ font: '500 9px var(--font-body)', color: 'var(--ink-500)' }}>{n}</span>
          ))}
          <span style={{ background: dark, borderRadius: 999, padding: '5px 12px', font: '700 9px var(--font-body)', color: '#fff' }}>Boek nu</span>
        </div>
      </div>

      {/* Hero */}
      <div style={{ background: `linear-gradient(140deg, var(--forest-950) 0%, var(--forest-800) 60%, var(--forest-700) 100%)`, padding: '22px 20px 20px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: `linear-gradient(180deg, ${gold}, var(--lime-600))` }}/>
        <div style={{ position: 'absolute', right: -20, top: -20, width: 110, height: 110, borderRadius: '50%', background: 'rgba(191,157,74,0.08)' }}/>
        <div style={{ position: 'absolute', right: 10, top: 10, width: 60, height: 60, borderRadius: '50%', background: 'rgba(191,157,74,0.06)' }}/>
        <div style={{ font: '600 8px var(--font-body)', letterSpacing: '0.12em', textTransform: 'uppercase', color: gold, marginBottom: 9 }}>
          Schoonheidssalon · Amsterdam
        </div>
        <h2 style={{ font: '800 26px Schibsted Grotesk, sans-serif', letterSpacing: '-0.035em', lineHeight: 0.96, color: '#fff', margin: '0 0 10px' }}>
          Jouw huid.<br/><em style={{ fontWeight: 700, fontStyle: 'italic', color: 'var(--forest-200)' }}>Jouw uitstraling.</em>
        </h2>
        <p style={{ font: '400 9px var(--font-body)', color: 'rgba(255,255,255,0.6)', lineHeight: 1.55, marginBottom: 13, maxWidth: '68%' }}>
          Luxe gezichtsbehandelingen & massages in het hart van Amsterdam. Altijd op maat.
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 14 }}>
          <div style={{ display: 'flex', gap: 2 }}>
            {[...Array(5)].map((_, i) => <span key={i} style={{ color: gold, fontSize: 10, lineHeight: 1 }}>★</span>)}
          </div>
          <span style={{ font: '600 8px var(--font-body)', color: 'rgba(255,255,255,0.65)' }}>4,9 · 134 beoordelingen</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <span style={{ background: gold, borderRadius: 999, padding: '7px 14px', font: '700 9px var(--font-body)', color: dark }}>Boek een behandeling</span>
          <span style={{ border: '1px solid rgba(255,255,255,0.25)', borderRadius: 999, padding: '7px 12px', font: '600 9px var(--font-body)', color: '#fff' }}>Bekijk diensten</span>
        </div>
      </div>

      {/* Services */}
      <div style={{ padding: '16px 18px', background: '#fff' }}>
        <div style={{ font: '700 8px var(--font-body)', letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--ink-300)', marginBottom: 10 }}>Populaire behandelingen</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[
            { name: 'Gezichts\nbehandeling', price: 'v.a. €65' },
            { name: 'Hydratatie\nmassage', price: 'v.a. €55' },
            { name: 'Wenkbrauw\nstyling', price: 'v.a. €25' },
          ].map(s => (
            <div key={s.name} style={{ background: 'var(--forest-50)', border: '1px solid var(--forest-100)', borderRadius: 9, padding: '10px 9px' }}>
              <div style={{ font: '700 8.5px var(--font-body)', color: dark, lineHeight: 1.35, marginBottom: 4, whiteSpace: 'pre-line' }}>{s.name}</div>
              <div style={{ font: '700 8px var(--font-body)', color: rose }}>{s.price}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Testimonial strip */}
      <div style={{ background: 'var(--cream-100)', borderTop: '1px solid var(--border-1)', padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ display: 'flex' }}>
          {['#C76389','#8E2E52','#6F1F3C'].map((c,i) => (
            <div key={i} style={{ width: 20, height: 20, borderRadius: '50%', background: c, border: '2px solid #fff', marginLeft: i ? -6 : 0 }}/>
          ))}
        </div>
        <span style={{ font: '500 8.5px var(--font-body)', color: 'var(--ink-500)', flex: 1 }}>
          <strong style={{ color: dark }}>134 tevreden klanten</strong> gingen je voor
        </span>
        <span style={{ font: '600 8px var(--font-body)', color: rose }}>Lees reviews →</span>
      </div>
    </BrowserChrome>
  );
};

// ─── Salon Preview B — Marloes Beauty (back card) ──────────────────────────
const SalonPreviewB = () => {
  const gold = 'var(--lime-400)';
  const dark = 'var(--forest-950)';
  const rose = 'var(--forest-400)';
  return (
    <BrowserChrome url="marloes-beauty.nl" shadow="soft">
      {/* Dark nav */}
      <div style={{ background: dark, padding: '11px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ font: '800 13px Schibsted Grotesk, sans-serif', letterSpacing: '-0.03em', color: '#fff' }}>
          Marloes<span style={{ color: gold }}>Beauty</span>
        </span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          {['Diensten', 'Team', 'Contact'].map(n => (
            <span key={n} style={{ font: '500 9px var(--font-body)', color: 'rgba(255,255,255,0.5)' }}>{n}</span>
          ))}
          <span style={{ background: gold, borderRadius: 999, padding: '5px 12px', font: '700 9px var(--font-body)', color: dark }}>Reserveer</span>
        </div>
      </div>

      {/* Announcement */}
      <div style={{ background: 'var(--forest-100)', padding: '7px 18px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: rose, flexShrink: 0 }}/>
        <span style={{ font: '500 8.5px var(--font-body)', color: 'var(--forest-700)' }}>
          Nu beschikbaar voor nieuwe klanten — <strong>Plan deze week nog</strong>
        </span>
      </div>

      {/* Split hero */}
      <div style={{ background: 'var(--cream-50)', padding: '20px 18px', display: 'grid', gridTemplateColumns: '1fr 90px', gap: 14, alignItems: 'center' }}>
        <div>
          <div style={{ font: '600 8px var(--font-body)', letterSpacing: '0.1em', textTransform: 'uppercase', color: rose, marginBottom: 7 }}>
            Premium schoonheidssalon
          </div>
          <h2 style={{ font: '800 24px Schibsted Grotesk, sans-serif', letterSpacing: '-0.035em', lineHeight: 0.97, color: dark, margin: '0 0 10px' }}>
            Stralen<br/><em style={{ fontStyle: 'italic', fontWeight: 700, color: rose }}>begint hier.</em>
          </h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 13 }}>
            <div style={{ display: 'flex', gap: 2 }}>
              {[...Array(5)].map((_, i) => <span key={i} style={{ color: gold, fontSize: 9, lineHeight: 1 }}>★</span>)}
            </div>
            <span style={{ font: '600 8px var(--font-body)', color: 'var(--ink-500)' }}>4,8 · 89 reviews</span>
          </div>
          <span style={{ background: dark, borderRadius: 999, padding: '7px 14px', font: '700 9px var(--font-body)', color: '#fff' }}>Plan afspraak →</span>
        </div>
        {/* Decorative photo block */}
        <div style={{ height: 110, borderRadius: 12, background: `linear-gradient(160deg, var(--forest-100) 0%, var(--forest-200) 100%)`, overflow: 'hidden', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', flexShrink: 0 }}>
          <div style={{ width: 56, height: 90, background: `linear-gradient(180deg, var(--forest-300) 0%, var(--forest-500) 100%)`, borderRadius: '22px 22px 0 0' }}/>
        </div>
      </div>

      {/* Services dark strip */}
      <div style={{ background: dark, padding: '14px 18px' }}>
        <div style={{ font: '600 8px var(--font-body)', letterSpacing: '0.09em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 10 }}>Onze behandelingen</div>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { name: 'Lash lift', price: '€45' },
            { name: 'Brow design', price: '€40' },
            { name: 'Gezicht', price: '€70' },
          ].map(s => (
            <div key={s.name} style={{ flex: 1, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 8, padding: '10px 8px', textAlign: 'center' }}>
              <div style={{ font: '700 8px var(--font-body)', color: 'rgba(255,255,255,0.8)', marginBottom: 3 }}>{s.name}</div>
              <div style={{ font: '700 11px Schibsted Grotesk, sans-serif', color: gold, letterSpacing: '-0.01em' }}>{s.price}</div>
            </div>
          ))}
        </div>
      </div>
    </BrowserChrome>
  );
};

// ─── Hero ─────────────────────────────────────────────────────────────────────
const Hero = () => {
  const mob = useIsMobile();
  return (
    <Section style={{ paddingTop: 80, paddingBottom: 96 }}>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.15fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div className="anim">
            <Eyebrow>Voor schoonheidssalons &amp; beautybedrijven</Eyebrow>
          </div>
          <h1 className="anim anim-d1" style={{ font: `800 ${mob ? '36px' : '84px'}/1.02 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.04em', lineHeight: 0.96, margin: '20px 0 24px', textWrap: 'balance' }}>
            Jouw bedrijf online. In <span style={{ fontStyle: 'italic', fontWeight: 700, color: 'var(--forest-600)' }}>3&nbsp;weken</span> live.
          </h1>
          <p className="anim anim-d2" style={{ font: `400 ${mob ? '16px' : '20px'} var(--font-body)`, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 520, marginBottom: 36 }}>
            Een professionele website die klanten trekt. Vaste prijs. Vaste deadline. Geen gedoe.
          </p>
          <div className="anim anim-d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" iconRight="arrow-up-right" data-cal-link="bart-vermeulen-2wrsab/30min" data-cal-origin="https://app.cal.com">Plan een gesprek</Button>
            <Button variant="outline" size="lg" onClick={() => window.location.href='ui_kits/booking/'}>Bekijk pakketten</Button>
          </div>
          <div className="anim anim-d4" style={{ marginTop: 40, display: 'flex', gap: 32, color: 'var(--fg-3)', font: '500 14px var(--font-body)', flexWrap: 'wrap' }}>
            <span><strong id="stat-sites" style={{ color: 'var(--ink-900)', font: '700 22px Schibsted Grotesk, sans-serif' }}>87</strong>&nbsp; sites live</span>
            <span><strong id="stat-rating" style={{ color: 'var(--ink-900)', font: '700 22px Schibsted Grotesk, sans-serif' }}>4,9</strong>&nbsp;/5 klantbeoordeling</span>
            <span><strong style={{ color: 'var(--ink-900)', font: '700 22px Schibsted Grotesk, sans-serif' }}>3 wkn</strong>&nbsp; gemiddelde levering</span>
          </div>
        </div>

        {!mob && (
          <div className="anim anim-d5 hero-previews" style={{ position: 'relative', minHeight: 520 }}>
            <div className="float-b" style={{ position: 'absolute', top: 60, left: 0, width: '74%' }}>
              <SalonPreviewB/>
            </div>
            <div className="float-a" style={{ position: 'absolute', top: 0, right: 0, width: '78%', zIndex: 2 }}>
              <SalonPreviewA/>
            </div>
          </div>
        )}
      </div>
    </Section>
  );
};

// ─── Logo strip — marquee ─────────────────────────────────────────────────────
const Logos = () => {
  const names = [
    { t: 'Studio Marloes', s: { fontStyle: 'italic' } },
    { t: 'Studio Dani', s: {} },
    { t: 'Skin by Lena', s: { fontWeight: 500 } },
    { t: 'Beauté Collective', s: { fontStyle: 'italic' } },
    { t: 'GLŌW', s: { letterSpacing: '0.12em', fontWeight: 600 } },
    { t: 'Lash & Brow Co.', s: {} },
    { t: 'Nails by Roos', s: { fontStyle: 'italic' } },
    { t: 'Studio Anouk', s: {} },
    { t: 'La Belle', s: { letterSpacing: '0.06em' } },
  ];
  const dot = <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--forest-400)', opacity: 0.4, flexShrink: 0, margin: '0 28px', alignSelf: 'center' }}/>;
  const items = names.flatMap((n, i) => [
    <span key={`n${i}`} style={{ ...n.s, font: '600 15px Schibsted Grotesk, sans-serif', letterSpacing: '-0.01em', color: 'var(--ink-700)', opacity: 0.55, flexShrink: 0, whiteSpace: 'nowrap' }}>{n.t}</span>,
    <span key={`d${i}`} style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--forest-400)', opacity: 0.35, flexShrink: 0, margin: '0 28px', alignSelf: 'center' }}/>,
  ]);
  return (
    <section style={{ backgroundColor: 'var(--cream-100)', borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '15px 0' }}>
        <span style={{ font: '500 10px var(--font-body)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)', padding: '0 28px', flexShrink: 0, whiteSpace: 'nowrap' }}>Vertrouwd door</span>
        <div style={{ width: 1, height: 20, background: 'var(--border-1)', flexShrink: 0 }}/>
        <div className="marquee-outer" style={{ flex: 1 }}>
          <div className="marquee-track">
            {[...items, ...items]}
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── Services — list rows ────────────────────────────────────────────────────
const Services = () => {
  const mob = useIsMobile();
  const items = [
    { icon: 'layout-dashboard', t: 'Website ontwerp', d: 'Portfolio, diensten en contactpagina op één plek. 5 tot 8 pagina\'s, volledig op maat.', tag: 'Vanaf €748', tagAccent: false },
    { icon: 'shopping-bag',     t: 'Webshop',          d: 'Producten verkopen, betalingen verwerken, bestellingen bijhouden. Alles geregeld.',       tag: 'Vanaf €1.200', tagAccent: false },
    { icon: 'search',           t: 'Lokale SEO',       d: 'Gevonden worden door nieuwe klanten in jouw buurt, op Google Maps en in zoekresultaten.', tag: 'Maandelijks', tagAccent: false },
    { icon: 'settings',         t: 'Onderhoud',        d: 'Wij houden je site snel, veilig en up-to-date. Jij doet ondernemen.',                     tag: 'Doorlopend', tagAccent: false },
  ];
  return (
    <Section>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr auto', gap: 40, alignItems: 'end', marginBottom: 56 }}>
        <div>
          <Eyebrow>Wat we doen</Eyebrow>
          <h2 style={{ font: `800 ${mob ? '26px' : '72px'}/1.1 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.04em', lineHeight: 0.96, marginTop: 16, textWrap: 'balance', maxWidth: 680 }}>
            Alles wat jouw salon nodig heeft om online te groeien.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12, paddingBottom: 4 }}>
          <div style={{ display: mob ? 'none' : 'flex', flexDirection: 'column', background: 'var(--forest-950)', borderRadius: 16, padding: '20px 24px', textAlign: 'right' }}>
            <div style={{ font: '600 10px var(--font-body)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--lime-400)', marginBottom: 6 }}>Vaste prijs</div>
            <div style={{ font: '800 36px Schibsted Grotesk, sans-serif', letterSpacing: '-0.04em', color: 'var(--cream-50)', lineHeight: 1 }}>€748</div>
            <div style={{ font: '500 12px var(--font-body)', color: 'rgba(250,250,247,0.45)', marginTop: 4 }}>3 weken · live</div>
          </div>
          <Button variant="outline" iconRight="arrow-up-right">Bekijk pakketten</Button>
        </div>
      </div>

      <div style={{ borderTop: '1px solid var(--border-1)' }}>
        {items.map((item) => (
          <div key={item.t} className="svc-row gs-svc">
            <div style={{ width: mob ? 40 : 48, height: mob ? 40 : 48, borderRadius: 12, background: 'var(--forest-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest-600)', flexShrink: 0 }}>
              <Icon name={item.icon} size={22}/>
            </div>
            <h3 style={{ font: '700 21px Schibsted Grotesk, sans-serif', letterSpacing: '-0.02em', lineHeight: 1.1 }}>{item.t}</h3>
            <p style={{ font: '400 15px var(--font-body)', lineHeight: 1.6, color: 'var(--fg-2)' }}>{item.d}</p>
            <span style={{ font: '600 13px var(--font-body)', color: 'var(--ink-300)', whiteSpace: 'nowrap' }}>{item.tag}</span>
            <span className="svc-arrow" style={{ display: 'flex' }}>
              <Icon name="arrow-up-right" size={22} color="var(--forest-600)"/>
            </span>
          </div>
        ))}
      </div>
    </Section>
  );
};

// ─── Process + prijs ──────────────────────────────────────────────────────────
const Process = () => {
  const mob = useIsMobile();
  const steps = [
    { n: '01', t: 'Kennismakingsgesprek', d: '30 minuten. Wij luisteren, jij vertelt waar je naartoe wilt.' },
    { n: '02', t: 'Voorstel & vaste prijs', d: 'Binnen 3 dagen. Vaste prijs, geen verrassingen achteraf.' },
    { n: '03', t: 'Ontwerp & bouw', d: 'Twee feedbackrondes. Wij doen het werk, jij keurt goed.' },
    { n: '04', t: 'Live & ondersteuning', d: 'Wij zetten alles online en blijven beschikbaar.' },
  ];
  return (
    <Section id="aanpak" style={{ background: 'var(--cream-100)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: 56, alignItems: 'end', marginBottom: 56 }}>
        <div>
          <Eyebrow>Hoe het werkt</Eyebrow>
          <h2 style={{ font: `700 ${mob ? '26px' : '56px'}/1.1 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.035em', lineHeight: 1.02, marginTop: 16, textWrap: 'balance' }}>
            Vier stappen. Geen verrassingen.
          </h2>
        </div>
        <div style={{ background: 'var(--forest-950)', color: 'var(--cream-50)', borderRadius: 24, padding: '32px 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div>
            <div style={{ font: '600 11px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--lime-300)' }}>Eén prijs</div>
            <div style={{ font: '800 44px Schibsted Grotesk, sans-serif', letterSpacing: '-0.04em', lineHeight: 1, marginTop: 10 }}>
              <span style={{ fontSize: 26, fontWeight: 600, verticalAlign: 'top', marginRight: 4 }}>€</span>748
            </div>
            <div style={{ font: '500 13px var(--font-body)', color: 'var(--fg-on-dark-3)', marginTop: 6 }}>Vanaf, vast bedrag</div>
          </div>
          <div>
            <div style={{ font: '600 11px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--lime-300)' }}>Eén deadline</div>
            <div style={{ font: '800 44px Schibsted Grotesk, sans-serif', letterSpacing: '-0.04em', lineHeight: 1, marginTop: 10 }}>3 weken</div>
            <div style={{ font: '500 13px var(--font-body)', color: 'var(--fg-on-dark-3)', marginTop: 6 }}>Van kickoff tot live</div>
          </div>
        </div>
      </div>
      <div className="gs-process" style={{ display: 'grid', gridTemplateColumns: mob ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 24 }}>
        {steps.map((s) => (
          <div key={s.n} style={{ borderTop: '1.5px solid var(--forest-950)', paddingTop: 24 }}>
            <div className="gs-step-num" style={{ font: '700 14px var(--font-mono)', color: 'var(--forest-600)', marginBottom: 16 }}>{s.n}</div>
            <h3 style={{ font: '700 22px Schibsted Grotesk, sans-serif', letterSpacing: '-0.02em', marginBottom: 10 }}>{s.t}</h3>
            <p style={{ font: '400 15px var(--font-body)', lineHeight: 1.55, color: 'var(--fg-2)' }}>{s.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
};

// ─── Testimonial ─────────────────────────────────────────────────────────────
const Testimonial = () => {
  const mob = useIsMobile();
  return (
    <Section style={{ background: 'var(--cream-100)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 2fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow>Klantbeoordeling</Eyebrow>
          <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 12 }}>
            <span style={{ font: `800 ${mob ? '48px' : '80px'}/1 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.04em', color: 'var(--ink-900)' }}>4,9</span>
            <div>
              <div style={{ color: 'var(--lime-500)', fontSize: 20, letterSpacing: 2 }}>★★★★★</div>
              <div style={{ font: '500 13px var(--font-body)', color: 'var(--fg-3)', marginTop: 4 }}>op Google</div>
            </div>
          </div>
          <p style={{ font: '400 15px var(--font-body)', color: 'var(--fg-2)', lineHeight: 1.6, marginTop: 24 }}>
            Gebaseerd op ervaringen van onze klanten. Jouw succes is ons resultaat.
          </p>
        </div>
        <div className="gs-fade" style={{ background: '#fff', borderRadius: 20, padding: '36px 40px', border: '1px solid var(--border-1)' }}>
          <div style={{ color: 'var(--lime-500)', fontSize: 20, letterSpacing: 2, marginBottom: 20 }}>★★★★★</div>
          <blockquote style={{ font: '500 22px var(--font-body)', lineHeight: 1.65, color: 'var(--ink-700)', marginBottom: 24 }}>
            "Klanten boekten via Instagram DM en ik verloor steeds afspraken. Nu vullen ze gewoon mijn agenda via de website."
          </blockquote>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: 'linear-gradient(135deg, var(--forest-600) 0%, var(--forest-950) 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 15px Schibsted Grotesk, sans-serif', color: 'var(--lime-300)', letterSpacing: '-0.02em', flexShrink: 0 }}>SR</div>
            <div>
              <div style={{ font: '700 15px var(--font-body)', color: 'var(--ink-900)' }}>Sofia Reinders</div>
              <div style={{ font: '500 13px var(--font-body)', color: 'var(--fg-3)' }}>Eigenaar, schoonheidspraktijk</div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

// ─── Werk carousel (doorwaaier) ───────────────────────────────────────────────
const Werk = () => {
  const mob = useIsMobile();
  const [current, setCurrent] = React.useState(0);

  const projects = [
    {
      name: 'Zenhart',
      sub: 'Holistische behandelingen · Breda',
      label: 'Welzijn & Schoonheid',
      url: 'https://zenhart.nl',
      live: true,
      preview: (
        <>
          <div style={{ padding: '9px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#FAF6F0', borderBottom: '1px solid #E8D8C4' }}>
            <span style={{ font: '600 10px Georgia, serif', color: '#6B4A28', letterSpacing: '0.06em', fontStyle: 'italic' }}>Zenhart</span>
            <div style={{ display: 'flex', gap: 8 }}>
              {['Behandelingen', 'Over', 'Contact'].map(t => <span key={t} style={{ font: '500 7px var(--font-body)', color: '#9B7B5A' }}>{t}</span>)}
            </div>
            <div style={{ padding: '3px 9px', borderRadius: 999, background: '#4A2E18', font: '600 7px var(--font-body)', color: '#F5E6D3' }}>Boek nu</div>
          </div>
          <div style={{ padding: '18px 14px 14px', background: 'linear-gradient(160deg, #D4B896 0%, #F0DFC8 60%, #FAF0E4 100%)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -20, top: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(200,168,130,0.3)' }}/>
            <div style={{ font: '400 7px var(--font-body)', color: '#9B7B5A', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 7 }}>Holistische praktijk · Breda</div>
            <div style={{ font: '700 17px Georgia, serif', color: '#3A2010', lineHeight: 1.15, marginBottom: 7, fontStyle: 'italic' }}>Rust.<br/>Aandacht.<br/>Herstel.</div>
            <div style={{ font: '400 8px var(--font-body)', color: '#6B4A28', lineHeight: 1.55, marginBottom: 12 }}>Holistische behandelingen<br/>op maat in Breda.</div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 13px', borderRadius: 999, background: '#3A2010', color: '#F5E6D3', font: '600 8px var(--font-body)' }}>Maak een afspraak</div>
          </div>
          <div style={{ padding: '10px 14px', background: '#FAF6F0' }}>
            <div style={{ font: '600 7px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#C8A882', marginBottom: 7 }}>Onze behandelingen</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 5 }}>
              {['Massage', 'Energiewerk', 'Coaching'].map(s => (
                <div key={s} style={{ background: '#fff', borderRadius: 6, padding: '8px 5px', textAlign: 'center', border: '1px solid #EDE0D0' }}>
                  <div style={{ width: 16, height: 16, borderRadius: '50%', background: 'linear-gradient(135deg, #C8A882, #9B7B5A)', margin: '0 auto 4px' }}/>
                  <div style={{ font: '600 7px var(--font-body)', color: '#6B4A28' }}>{s}</div>
                </div>
              ))}
            </div>
          </div>
        </>
      ),
    },
    {
      name: 'La Zoe Beauty',
      sub: 'Beautysalon · persoonlijk',
      label: 'Schoonheidsspecialist',
      url: null,
      live: false,
      preview: (
        <>
          <div style={{ padding: '9px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#fff', borderBottom: '1px solid #F0DDE6' }}>
            <span style={{ font: '600 10px Georgia, serif', color: '#6B1E3D', fontStyle: 'italic', letterSpacing: '0.03em' }}>La Zoé</span>
            <div style={{ display: 'flex', gap: 8 }}>
              {['Behandelingen', 'Prijzen', 'Contact'].map(t => <span key={t} style={{ font: '500 7px var(--font-body)', color: '#B070A0' }}>{t}</span>)}
            </div>
            <div style={{ padding: '3px 9px', borderRadius: 999, background: '#4A1E30', font: '600 7px var(--font-body)', color: '#FBF0F5' }}>Boek nu</div>
          </div>
          <div style={{ padding: '18px 14px 14px', background: 'linear-gradient(160deg, #ECC8D8 0%, #F5E0EC 50%, #FBF0F5 100%)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -15, bottom: -15, width: 80, height: 80, borderRadius: '50%', background: 'rgba(212,160,184,0.4)' }}/>
            <div style={{ font: '400 7px var(--font-body)', color: '#B07090', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 7 }}>Beauty & Wellness</div>
            <div style={{ font: '700 17px Georgia, serif', color: '#3A0E22', lineHeight: 1.15, marginBottom: 7, fontStyle: 'italic' }}>Verwennerij<br/>voor lichaam<br/>en geest.</div>
            <div style={{ font: '400 8px var(--font-body)', color: '#8A4060', lineHeight: 1.55, marginBottom: 12 }}>Huidverzorging &<br/>ontspannende behandelingen.</div>
            <div style={{ display: 'inline-block', padding: '6px 14px', borderRadius: 999, background: '#4A1E30', color: '#FBF0F5', font: '600 8px var(--font-body)' }}>Plan een behandeling</div>
          </div>
          <div style={{ padding: '10px 14px', background: '#FBF0F5' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 5 }}>
              {['Gezicht', 'Massage', 'Manicure'].map(s => (
                <div key={s} style={{ background: '#fff', borderRadius: 6, padding: '8px 5px', textAlign: 'center', border: '1px solid #EDD0DA' }}>
                  <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'linear-gradient(135deg, #E8A0B8, #C07090)', margin: '0 auto 4px' }}/>
                  <div style={{ font: '600 7px var(--font-body)', color: '#4A1E30' }}>{s}</div>
                </div>
              ))}
            </div>
          </div>
        </>
      ),
    },
    {
      name: 'Concept T',
      sub: 'Gezonde schooldag · Nederland',
      label: 'Gezondheid & Educatie',
      url: 'https://concept-t-preview.surge.sh',
      live: true,
      preview: (
        <>
          <div style={{ padding: '9px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#F6FBF2', borderBottom: '1px solid #CCE5B8' }}>
            <span style={{ font: '700 9px var(--font-body)', color: '#2A5C14', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Concept T</span>
            <div style={{ display: 'flex', gap: 8 }}>
              {['School', 'Aanpak', 'Contact'].map(t => <span key={t} style={{ font: '500 7px var(--font-body)', color: '#5A9040' }}>{t}</span>)}
            </div>
            <div style={{ padding: '3px 9px', borderRadius: 999, background: '#3A7A20', font: '600 7px var(--font-body)', color: '#fff' }}>Meer info</div>
          </div>
          <div style={{ padding: '18px 14px 14px', background: 'linear-gradient(160deg, #D8EEC8 0%, #EAF5DC 50%, #F6FBF2 100%)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -10, top: -10, width: 70, height: 70, borderRadius: '50%', background: 'rgba(90,160,55,0.18)' }}/>
            <div style={{ font: '400 7px var(--font-body)', color: '#5A9040', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 7 }}>Gezondheid &amp; Educatie</div>
            <div style={{ font: '800 17px Schibsted Grotesk, sans-serif', color: '#1A3B0E', lineHeight: 1.12, marginBottom: 7 }}>Samen een<br/>gezonde schooldag.</div>
            <div style={{ font: '400 8px var(--font-body)', color: '#4A7030', lineHeight: 1.55, marginBottom: 12 }}>Gezond eten en bewegen<br/>als basis voor leren.</div>
            <div style={{ display: 'inline-block', padding: '6px 13px', borderRadius: 999, background: '#3A7A20', color: '#fff', font: '600 8px var(--font-body)' }}>Meer informatie</div>
          </div>
          <div style={{ padding: '10px 14px', background: '#F0F9EA', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 5 }}>
            {[['Lunch', '#5A9040'], ['Beweging', '#3A7A20'], ['Aandacht', '#7AB850']].map(([s, c]) => (
              <div key={s} style={{ background: '#fff', borderRadius: 6, padding: '8px 5px', textAlign: 'center', border: '1px solid #CCE5B8' }}>
                <div style={{ width: 18, height: 18, borderRadius: '50%', background: `linear-gradient(135deg, ${c}, #2A5C14)`, margin: '0 auto 4px' }}/>
                <div style={{ font: '600 7px var(--font-body)', color: '#2A5C14' }}>{s}</div>
              </div>
            ))}
          </div>
        </>
      ),
    },
  ];

  const total = projects.length;
  const prev = () => setCurrent(c => (c - 1 + total) % total);
  const next = () => setCurrent(c => (c + 1) % total);

  const getOffset = (i) => {
    let o = i - current;
    if (o > total / 2) o -= total;
    if (o < -total / 2) o += total;
    return o;
  };

  const cardCfg = {
    '-1': { tx: -210, scale: 0.82, rotate: -10, opacity: 0.68, z: 3 },
     '0': { tx:    0, scale: 1.00, rotate:   0, opacity: 1.00, z: 5 },
     '1': { tx:  210, scale: 0.82, rotate:  10, opacity: 0.68, z: 3 },
  };

  const p = projects[current];

  return (
    <Section id="werk" style={{ background: 'var(--cream-100)', padding: '96px 24px', overflow: 'hidden' }}>
      <div className="nx-werk-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'center' }}>

        {/* Links: tekst + navigatie */}
        <div>
          <Eyebrow>Werk</Eyebrow>
          <h2 className="nx-h2-lg" style={{ font: '800 64px Schibsted Grotesk, sans-serif', letterSpacing: '-0.04em', lineHeight: 0.97, marginTop: 16, textWrap: 'balance' }}>
            Dit kan jouw website worden.
          </h2>
          <div style={{ marginTop: 28, minHeight: 80 }}>
            <div style={{ font: '600 11px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--forest-600)', marginBottom: 6 }}>{p.label}</div>
            <div style={{ font: '700 22px Schibsted Grotesk, sans-serif', letterSpacing: '-0.02em', marginBottom: 8 }}>{p.name}</div>
            <div style={{ font: '400 15px var(--font-body)', color: 'var(--fg-2)', lineHeight: 1.55 }}>{p.sub}</div>
          </div>
          <div style={{ marginTop: 28, display: 'flex', gap: 12, alignItems: 'center' }}>
            <button onClick={prev} aria-label="Vorige"
              style={{ width: 48, height: 48, borderRadius: '50%', border: '1.5px solid var(--border-1)', background: 'transparent', color: 'var(--forest-950)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="arrow-left" size={20}/>
            </button>
            <button onClick={next} aria-label="Volgende"
              style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--forest-950)', color: 'var(--cream-50)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="arrow-right" size={20}/>
            </button>
            {p.url && (
              <a href={p.url} target="_blank" rel="noopener"
                style={{ marginLeft: 8, display: 'flex', alignItems: 'center', gap: 6, font: '600 14px var(--font-body)', color: 'var(--forest-700)', textDecoration: 'none' }}>
                Bekijk live <Icon name="arrow-up-right" size={16} color="var(--forest-700)"/>
              </a>
            )}
          </div>
          <div style={{ marginTop: 24, display: 'flex', gap: 6 }}>
            {projects.map((_, i) => (
              <button key={i} onClick={() => setCurrent(i)}
                style={{ width: i === current ? 24 : 8, height: 8, borderRadius: 999, background: i === current ? 'var(--forest-600)' : 'var(--cream-300)', border: 'none', cursor: 'pointer', padding: 0, transition: 'width 280ms var(--ease-out), background 280ms' }}/>
            ))}
          </div>
        </div>

        {/* Rechts: carousel */}
        <div className="nx-werk-carousel" style={{ position: mob ? 'static' : 'relative', height: mob ? 'auto' : 440, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
          {projects.map((proj, i) => {
            const offset = getOffset(i);
            const abs = Math.abs(offset);
            if (abs > 1) return null;
            const cfg = cardCfg[String(offset)];
            return (
              <div key={proj.name}
                className={abs > 0 ? 'nx-fan-side' : ''}
                onClick={() => abs > 0 && setCurrent(i)}
                style={{
                  position: mob ? 'static' : 'absolute',
                  width: mob ? '100%' : 240,
                  transformOrigin: 'bottom center',
                  transform: mob ? 'none' : `translateX(${cfg.tx}px) scale(${cfg.scale}) rotate(${cfg.rotate}deg)`,
                  opacity: mob ? 1 : cfg.opacity,
                  zIndex: cfg.z,
                  transition: 'transform 400ms var(--ease-out), opacity 400ms',
                  cursor: abs > 0 ? 'pointer' : 'default',
                }}
              >
                <div style={{ background: '#fff', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 56px -16px rgba(11,20,16,0.22), 0 6px 16px -6px rgba(11,20,16,0.1)' }}>
                  <div style={{ background: '#F4F2EC', padding: '9px 12px', display: 'flex', alignItems: 'center', gap: 5, borderBottom: '1px solid #E6E2D8' }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#FFBD44' }}/>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#FF605C' }}/>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#00CA4E' }}/>
                    <span style={{ marginLeft: 6, height: 13, flex: 1, background: '#fff', borderRadius: 4, font: '400 9px var(--font-body)', display: 'flex', alignItems: 'center', paddingLeft: 7, color: '#8B948E', letterSpacing: '0.01em' }}>
                      {proj.url ? proj.url.replace('https://', '') : proj.name.toLowerCase().replace(/[\s&]/g, '') + '.nl'}
                    </span>
                  </div>
                  {proj.url ? (
                    <div style={{ height: mob ? 180 : 224, overflow: 'hidden', position: 'relative' }}>
                      <iframe
                        src={proj.url}
                        scrolling="no"
                        title={proj.name}
                        style={{
                          width: 1280,
                          height: mob ? 960 : 1195,
                          transform: mob ? 'scale(0.234)' : 'scale(0.1875)',
                          transformOrigin: 'top left',
                          border: 'none',
                          pointerEvents: 'none',
                          display: 'block',
                        }}
                      />
                    </div>
                  ) : (
                    <div style={{ minHeight: 160 }}>{proj.preview}</div>
                  )}
                  <div style={{ padding: '10px 14px', background: '#fff', borderTop: '1px solid #F0EDE8' }}>
                    <div style={{ font: '600 9px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: '#8B948E' }}>{proj.label}</div>
                    <div style={{ font: '700 13px Schibsted Grotesk, sans-serif', color: '#1C060E', letterSpacing: '-0.01em', marginTop: 2 }}>{proj.name}</div>
                  </div>
                </div>
                {proj.live && abs === 0 && (
                  <div style={{ position: 'absolute', top: -12, right: 12, background: 'var(--forest-950)', backdropFilter: 'blur(8px)', borderRadius: 999, padding: '5px 11px', display: 'flex', alignItems: 'center', gap: 5, font: '600 11px var(--font-body)', color: 'var(--lime-300)' }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--lime-400)' }}/>Live
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
};

// ─── Over ons ─────────────────────────────────────────────────────────────────
const OverOns = () => {
  const mob = useIsMobile();
  return (
    <Section id="over-ons">
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1fr', gap: mob ? 32 : 80, alignItems: 'start' }}>
        <div>
          <Eyebrow>Over ons</Eyebrow>
          <h2 style={{ font: `800 ${mob ? '26px' : '64px'}/1.05 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.04em', lineHeight: 0.97, margin: '16px 0 32px', textWrap: 'balance' }}>
            Wij geloven dat elk bedrijf een website verdient die klanten trekt.
          </h2>
          <p style={{ font: '400 18px var(--font-body)', lineHeight: 1.65, color: 'var(--fg-2)', marginBottom: 20 }}>
            Nexion is een gedreven team van webdesigners en developers. We richten ons op zelfstandigen en mkb-ondernemers die een professionele online aanwezigheid willen, zonder de complexiteit en hoge kosten van een groot bureau.
          </p>
          <p style={{ font: '400 18px var(--font-body)', lineHeight: 1.65, color: 'var(--fg-2)', marginBottom: 20 }}>
            We zien dagelijks hoe getalenteerde ondernemers klanten mislopen omdat hun website verouderd is, niet gevonden wordt, of simpelweg ontbreekt. Een Instagram-pagina is geen vervanging voor een echte website.
          </p>
          <p style={{ font: '400 18px var(--font-body)', lineHeight: 1.65, color: 'var(--fg-2)' }}>
            Onze aanpak is direct: één vaste prijs, één duidelijke deadline. Geen verrassingen, geen open eindjes.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, paddingTop: 8 }}>
          <div style={{ background: 'var(--forest-950)', color: 'var(--cream-50)', borderRadius: 20, padding: '32px 36px' }}>
            <div style={{ font: '600 12px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--lime-300)', marginBottom: 20 }}>Kernwaarden</div>
            {[
              { icon: 'shield-check',    t: 'Transparantie', d: 'Vaste prijs, vaste deadline. Wat we beloven, doen we.' },
              { icon: 'zap',             t: 'Snelheid',       d: 'Van briefing tot live in drie weken. Geen eindeloze trajecten.' },
              { icon: 'heart-handshake', t: 'Betrokkenheid',  d: 'Jouw succes is ons succes. We denken mee, ook na oplevering.' },
            ].map(v => (
              <div key={v.t} style={{ display: 'flex', gap: 16, marginBottom: 20 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--forest-800)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: 'var(--lime-300)' }}>
                  <Icon name={v.icon} size={18}/>
                </div>
                <div>
                  <div style={{ font: '700 15px var(--font-body)', marginBottom: 3 }}>{v.t}</div>
                  <div style={{ font: '400 14px var(--font-body)', color: 'var(--fg-on-dark-3)', lineHeight: 1.5 }}>{v.d}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              { label: 'KvK',        value: '42056311' },
              { label: 'Vestiging',  value: 'Nederland' },
              { label: 'Opgericht',  value: '2026' },
              { label: 'Specialisme', value: 'Zelfstandigen & MKB' },
            ].map(f => (
              <div key={f.label} style={{ background: 'var(--cream-100)', borderRadius: 14, padding: '16px 20px' }}>
                <div style={{ font: '600 11px var(--font-body)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 4 }}>{f.label}</div>
                <div style={{ font: '700 16px var(--font-body)', color: 'var(--ink-900)' }}>{f.value}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
};

// ─── CTA ──────────────────────────────────────────────────────────────────────
const CTA = () => {
  const mob = useIsMobile();
  return (
    <Section id="contact" dark style={{ position: 'relative', overflow: 'hidden', padding: mob ? '60px 20px' : '120px 24px' }}>
      <div style={{ position: 'absolute', inset: '-20% -10% auto auto', width: 700, height: 700, borderRadius: '50%', background: 'radial-gradient(circle, rgba(191,157,74,0.18), transparent 65%)' }}/>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")`, opacity: 0.035, pointerEvents: 'none', mixBlendMode: 'overlay' }}/>
      <div style={{ position: 'relative', maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: mob ? '1fr' : '1.2fr 1fr', gap: mob ? 32 : 80, alignItems: 'center' }}>
        <div>
          <Eyebrow color="var(--lime-300)">Plan je kennismaking</Eyebrow>
          <h2 className="gs-cta-headline" style={{ font: `800 ${mob ? '30px' : '80px'}/1.05 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.04em', lineHeight: 0.95, margin: '20px 0 24px', textWrap: 'balance' }}>
            Klaar om te <span style={{ fontStyle: 'italic' }}>beginnen?</span>
          </h2>
          <p style={{ font: '400 20px var(--font-body)', lineHeight: 1.5, color: 'var(--fg-on-dark-2)', maxWidth: 480 }}>
            30 minuten, vrijblijvend, via video. We kijken wat je nodig hebt en sturen binnen drie dagen een vaste prijs.
          </p>
        </div>
        <div style={{ background: 'var(--forest-900)', border: '1px solid var(--forest-700)', borderRadius: 24, padding: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--cream-50)' }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--forest-800)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--lime-300)' }}>
              <Icon name="calendar" size={20}/>
            </div>
            <div>
              <div style={{ font: '700 16px var(--font-body)' }}>Kennismakingsgesprek</div>
              <div style={{ font: '500 13px var(--font-body)', color: 'var(--fg-on-dark-3)' }}>30 min · gratis · via video</div>
            </div>
          </div>
          <Button variant="onDark" size="lg" iconRight="arrow-right" data-cal-link="bart-vermeulen-2wrsab/30min" data-cal-origin="https://app.cal.com" style={{ width: '100%', justifyContent: 'center' }}>Plan een gesprek</Button>
          <div style={{ font: '500 13px var(--font-body)', color: 'var(--fg-on-dark-3)', textAlign: 'center' }}>
            Geen verkooppraat. Beloofd.
          </div>
        </div>
      </div>
    </Section>
  );
};

// ─── Probleem ─────────────────────────────────────────────────────────────────
const Probleem = () => {
  const mob = useIsMobile();
  const items = [
    { icon: 'message-circle-x', t: 'Boekingen via WhatsApp',    d: 'Afspraken gaan verloren tussen berichten en DMs. Je klant verwacht meer.' },
    { icon: 'search-x',         t: 'Niet gevonden op Google',    d: 'Je concurrent staat bovenaan. Nieuwe klanten in jouw buurt boeken bij hen.' },
    { icon: 'monitor-off',      t: 'Geen professionele indruk',  d: 'Een ontbrekende of verouderde website kost je vertrouwen, al voor de eerste afspraak.' },
  ];
  return (
    <Section>
      <div style={{ textAlign: 'center', marginBottom: mob ? 32 : 56 }}>
        <Eyebrow>Herken je dit?</Eyebrow>
        <h2 style={{ font: `${mob ? 700 : 800} ${mob ? '26px' : '56px'}/1.1 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.03em', marginTop: 16, textWrap: 'balance' }}>
          Een goede salon verdient een goede website.
        </h2>
      </div>
      <div className="gs-stagger" style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : 'repeat(3, 1fr)', gap: mob ? 12 : 24, position: 'relative' }}>
        {items.map((item) => (
          <div key={item.t} className="gs-3d" style={{ background: 'var(--cream-100)', borderRadius: 20, padding: mob ? '24px 20px' : '32px 28px', border: '1px solid var(--border-1)' }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--forest-600)', marginBottom: 16 }}>
              <Icon name={item.icon} size={20}/>
            </div>
            <h3 style={{ font: '700 18px Schibsted Grotesk, sans-serif', letterSpacing: '-0.02em', marginBottom: 8 }}>{item.t}</h3>
            <p style={{ font: '400 14px var(--font-body)', lineHeight: 1.6, color: 'var(--fg-2)' }}>{item.d}</p>
          </div>
        ))}
      </div>
    </Section>
  );
};

// ─── FAQ ──────────────────────────────────────────────────────────────────────
const FAQ = () => {
  const mob = useIsMobile();
  const [open, setOpen] = React.useState(null);
  const items = [
    { q: 'Wat kost een website?',                  a: 'Onze websites starten vanaf €748. Vaste prijs, geen verrassingen achteraf.' },
    { q: 'Hoe lang duurt het bouwen?',             a: 'Van briefing tot live in drie weken. Wij houden ons aan die deadline.' },
    { q: 'Kan ik daarna zelf aanpassingen doen?',  a: 'Ja. Wij leveren een website die je kunt bijhouden. Voor grotere wijzigingen staan we altijd klaar.' },
    { q: 'Wat als ik al een website heb?',         a: 'Dan nemen we bruikbare content over en bouwen we iets wat echt werkt. Eerst een helder voorstel, dan pas aan de slag.' },
    { q: 'Werkt de website op mobiel?',            a: 'Altijd. We bouwen mobile-first. Jouw klanten boeken via hun telefoon, dat moet foutloos werken.' },
  ];
  return (
    <Section style={{ background: 'var(--cream-100)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: mob ? '1fr' : '1fr 1.5fr', gap: mob ? 32 : 80, alignItems: 'start' }}>
        <div>
          <Eyebrow>Vragen</Eyebrow>
          <h2 style={{ font: `800 ${mob ? '26px' : '56px'}/1.1 Schibsted Grotesk, sans-serif`, letterSpacing: '-0.04em', lineHeight: 1.0, marginTop: 16, textWrap: 'balance' }}>
            Veelgestelde vragen.
          </h2>
          <p style={{ font: '400 18px var(--font-body)', lineHeight: 1.6, color: 'var(--fg-2)', marginTop: 20 }}>
            Staat jouw vraag er niet bij? Plan een gratis gesprek.
          </p>
          <div style={{ marginTop: 28 }}>
            <Button variant="outline" iconRight="arrow-up-right" data-cal-link="bart-vermeulen-2wrsab/30min" data-cal-origin="https://app.cal.com">Plan een gesprek</Button>
          </div>
        </div>
        <div>
          {items.map((item, i) => (
            <div key={i} className="gs-faq" style={{ borderBottom: '1px solid var(--border-1)' }}>
              <button
                onClick={() => setOpen(open === i ? null : i)}
                style={{ width: '100%', textAlign: 'left', padding: '24px 0', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}
              >
                <span style={{ font: '700 18px Schibsted Grotesk, sans-serif', letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>{item.q}</span>
                <span style={{ flexShrink: 0, color: 'var(--forest-600)', transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 220ms var(--ease-out)', display: 'inline-flex' }}>
                  <Icon name="plus" size={20}/>
                </span>
              </button>
              {open === i && (
                <div style={{ font: '400 16px var(--font-body)', lineHeight: 1.65, color: 'var(--fg-2)', paddingBottom: 24 }}>
                  {item.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
};

Object.assign(window, { GlobalStyles, BrowserChrome, SalonPreviewA, SalonPreviewB, Hero, Logos, Services, Process, Testimonial, CTA, Werk, OverOns, Probleem, FAQ });