/* Sections — all read from c = window.CONTENT[lang] */

const LogoDark = ({ height = 40 }) =>
<img src="assets/logo-dark.jpg" alt="Bearly-IT" style={{ height, width: 'auto', mixBlendMode: 'multiply', display: 'block' }} />;

const LogoWhite = ({ height = 40 }) =>
<img src="assets/logo-white.png" alt="Bearly-IT" style={{ height, width: 'auto', display: 'block' }} />;

const Arrow = ({ size = 16 }) =>
<svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


/* ─────────── LANGUAGE SWITCHER ─────────── */
function LangSwitch({ lang, setLang }) {
  const [open, setOpen] = React.useState(false);
  const langs = [
  { code: 'nl', label: 'Nederlands', flag: '🇳🇱', short: 'NL' },
  { code: 'en', label: 'English', flag: '🇬🇧', short: 'EN' },
  { code: 'es', label: 'Español', flag: '🇪🇸', short: 'ES' },
  { code: 'it', label: 'Italiano', flag: '🇮🇹', short: 'IT' }];

  const cur = langs.find((l) => l.code === lang) || langs[0];
  React.useEffect(() => {
    const close = () => setOpen(false);
    if (open) {document.addEventListener('click', close);return () => document.removeEventListener('click', close);}
  }, [open]);
  return (
    <div style={{ position: 'relative' }} onClick={(e) => e.stopPropagation()}>
      <button
        onClick={() => setOpen((o) => !o)}
        style={{
          display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999,
          border: '1px solid var(--line-strong)', background: 'rgba(255,255,255,0.5)', cursor: 'pointer',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink)'
        }}>
        <span style={{ fontSize: 14 }}>{cur.flag}</span> {cur.short}
        <span style={{ opacity: 0.5, marginLeft: 2 }}>▾</span>
      </button>
      {open &&
      <div style={{
        position: 'absolute', top: 'calc(100% + 6px)', right: 0,
        background: 'var(--cream)', border: '1px solid var(--line-strong)', borderRadius: 6,
        minWidth: 180, boxShadow: '0 12px 32px rgba(20,23,15,0.12)', overflow: 'hidden', zIndex: 60
      }}>
          {langs.map((l) =>
        <button key={l.code}
        onClick={() => {setLang(l.code);setOpen(false);}}
        style={{
          display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '10px 14px',
          background: l.code === lang ? 'var(--paper)' : 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: 'Geist, sans-serif', fontSize: 13, color: 'var(--ink)', textAlign: 'left'
        }}>
              <span style={{ fontSize: 16 }}>{l.flag}</span>
              <span style={{ flex: 1 }}>{l.label}</span>
              {l.code === lang && <span style={{ color: 'var(--moss)' }}>✓</span>}
            </button>
        )}
        </div>
      }
    </div>);

}

/* ─────────── NAV ─────────── */
function Nav({ audience, setAudience, lang, setLang, c }) {
  return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(240,234,217,0.9)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 24, padding: '12px 32px' }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <LogoDark height={52} />
        </a>

        <div style={{ display: 'flex', gap: 4, padding: 4, borderRadius: 999, border: '1px solid var(--line-strong)', background: 'rgba(255,255,255,0.5)' }}>
          {[['particulier', c.nav.particulier], ['zakelijk', c.nav.zakelijk]].map(([a, l]) =>
          <button key={a}
          onClick={() => setAudience(a)}
          style={{
            padding: '6px 14px', borderRadius: 999, border: 'none', cursor: 'pointer',
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
            background: audience === a ? 'var(--ink)' : 'transparent',
            color: audience === a ? 'var(--cream)' : 'var(--ink)', transition: 'all .2s ease'
          }}>
              {l}
            </button>
          )}
        </div>

        <div style={{ display: 'flex', gap: 24, marginLeft: 'auto', fontSize: 14, alignItems: 'center' }}>
          <ServicesDropdown lang={lang} label={c.nav.services} />
          <a href="#werkwijze" style={{ color: 'var(--ink)', textDecoration: 'none' }}>{c.nav.process}</a>
          <a href="#tarieven" style={{ color: 'var(--ink)', textDecoration: 'none' }}>{c.nav.pricing}</a>
          <a href="steden.html" style={{ color: 'var(--ink)', textDecoration: 'none' }}>{lang === 'nl' ? 'Steden' : lang === 'en' ? 'Cities' : lang === 'es' ? 'Ciudades' : 'Città'}</a>
          <a href="#faq" style={{ color: 'var(--ink)', textDecoration: 'none' }}>{c.nav.faq}</a>
        </div>

        <LangSwitch lang={lang} setLang={setLang} />

        <a href="#contact" className="btn" style={{ padding: '10px 18px', fontSize: 13 }}>
          {c.nav.cta} <Arrow />
        </a>
      </div>
    </nav>);

}

/* ─────────── SERVICES DROPDOWN ─────────── */
const SERVICE_SLUGS = ['cloudservices', 'serverbeheer', 'werkplekbeheer', 'netwerkbeheer', 'websiteontwikkeling', 'backup', 'pc-reparatie', 'custom-made'];
const SERVICE_LIST = {
  nl: [
    ['Cloudservices',       'Microsoft 365, Google Workspace, migraties'],
    ['Serverbeheer',        'On-prem, hybride en virtuele servers'],
    ['Werkplekbeheer',      'Laptops, MDM, Intune & JAMF'],
    ['Netwerkbeheer',       'Wifi, VLAN, firewalls, glasvezel'],
    ['Websiteontwikkeling', 'Webapps, koppelingen op maat'],
    ['Backup',              'Offsite back-ups met 1u RTO'],
    ['PC-reparatie',        'Mac & Windows herstel aan huis'],
    ['Custom made',         'Software & integraties op maat'],
  ],
  en: [
    ['Cloud services',      'Microsoft 365, Google Workspace, migrations'],
    ['Server management',   'On-prem, hybrid and virtual servers'],
    ['Workplace management','Laptops, MDM, Intune & JAMF'],
    ['Network management',  'Wi-Fi, VLAN, firewalls, fibre'],
    ['Web development',     'Web apps, custom integrations'],
    ['Backup',              'Offsite backups with 1h RTO'],
    ['PC repair',           'Mac & Windows on-site repair'],
    ['Custom made',         'Bespoke software & integrations'],
  ],
  es: [
    ['Servicios cloud',       'Microsoft 365, Google Workspace, migraciones'],
    ['Gestión de servidores', 'Servidores on-prem, híbridos y virtuales'],
    ['Gestión de equipos',    'Portátiles, MDM, Intune y JAMF'],
    ['Gestión de red',        'Wi-Fi, VLAN, firewalls, fibra'],
    ['Desarrollo web',        'Webapps, integraciones a medida'],
    ['Copias de seguridad',   'Backups externos con RTO de 1h'],
    ['Reparación de PC',      'Mac y Windows a domicilio'],
    ['A medida',              'Software e integraciones personalizadas'],
  ],
  it: [
    ['Servizi cloud',       'Microsoft 365, Google Workspace, migrazioni'],
    ['Gestione server',     'Server on-prem, ibridi e virtuali'],
    ['Gestione postazioni', 'Laptop, MDM, Intune e JAMF'],
    ['Gestione rete',       'Wi-Fi, VLAN, firewall, fibra'],
    ['Sviluppo web',        'Webapp, integrazioni su misura'],
    ['Backup',              'Backup offsite con RTO di 1h'],
    ['Riparazione PC',      'Mac e Windows a domicilio'],
    ['Su misura',           'Software e integrazioni dedicate'],
  ],
};

function ServicesDropdown({ lang, label }) {
  const [open, setOpen] = React.useState(false);
  const wrapRef = React.useRef(null);
  const closeTimer = React.useRef(null);
  const items = SERVICE_LIST[lang] || SERVICE_LIST.nl;

  React.useEffect(() => {
    const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', onDoc);
    return () => document.removeEventListener('click', onDoc);
  }, []);

  const openMenu = () => { clearTimeout(closeTimer.current); setOpen(true); };
  const scheduleClose = () => { closeTimer.current = setTimeout(() => setOpen(false), 160); };

  return (
    <div ref={wrapRef} onMouseEnter={openMenu} onMouseLeave={scheduleClose}
         style={{ position: 'relative' }}>
      <a href="#diensten"
         onClick={(e) => { e.preventDefault(); setOpen(o => !o); }}
         style={{ color: 'var(--ink)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}>
        {label}
        <span style={{ display: 'inline-block', transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform .2s ease', fontSize: 10, opacity: 0.6, marginTop: 2 }}>▾</span>
      </a>
      <div onMouseEnter={openMenu} onMouseLeave={scheduleClose}
           style={{
             position: 'absolute', top: 'calc(100% + 14px)', left: '50%', transform: 'translateX(-50%)',
             minWidth: 480,
             background: 'var(--cream)', border: '1px solid var(--line-strong)', borderRadius: 6,
             boxShadow: '0 24px 48px -16px rgba(20,23,15,0.25), 0 4px 12px rgba(20,23,15,0.08)',
             padding: 12, zIndex: 60,
             opacity: open ? 1 : 0,
             pointerEvents: open ? 'auto' : 'none',
             transform: `translateX(-50%) translateY(${open ? 0 : -6}px)`,
             transition: 'opacity .2s ease, transform .2s ease',
           }}>
        {/* Little caret */}
        <div style={{
          position: 'absolute', top: -7, left: '50%', transform: 'translateX(-50%) rotate(45deg)',
          width: 12, height: 12, background: 'var(--cream)',
          borderTop: '1px solid var(--line-strong)', borderLeft: '1px solid var(--line-strong)',
        }}></div>

        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', padding: '6px 12px 10px', textTransform: 'uppercase' }}>
          ✦ Wat wij doen
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
          {items.map(([name, desc], i) => (
            <a key={i} href={`diensten/${SERVICE_SLUGS[i]}.html`}
               onClick={() => setOpen(false)}
               style={{
                 display: 'flex', flexDirection: 'column', gap: 2,
                 padding: '10px 12px', borderRadius: 4, textDecoration: 'none',
                 color: 'var(--ink)', transition: 'background .15s ease',
               }}
               onMouseEnter={(e) => e.currentTarget.style.background = 'var(--paper)'}
               onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span className="mono" style={{ fontSize: 9, color: 'var(--honey)' }}>{String(i+1).padStart(2,'0')}</span>
                <span className="serif" style={{ fontSize: 18, letterSpacing: '-0.01em' }}>{name}</span>
              </span>
              <span style={{ fontSize: 12, color: 'var(--muted)', paddingLeft: 24 }}>{desc}</span>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 8, padding: '12px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>// Vast tarief vooraf · NL-breed</span>
          <a href="diensten/index.html" onClick={() => setOpen(false)} style={{ fontSize: 12, color: 'var(--ink)', textDecoration: 'none' }}>
            Alle diensten →
          </a>
        </div>
      </div>
    </div>
  );
}

/* ─────────── HERO ─────────── */
function Hero({ audience, c }) {
  const h = audience === 'zakelijk' ? c.hero_b2b : c.hero_b2c;
  const emColor = audience === 'zakelijk' ? 'var(--moss)' : 'var(--honey)';
  return (
    <section data-screen-label="Hero" style={{ padding: '72px 0 56px', position: 'relative', overflow: 'hidden' }}>
      <img src="assets/logo-dark.jpg" alt="" aria-hidden="true" style={{
        position: 'absolute', right: '-8%', top: '-15%', width: '55%', maxWidth: 880,
        mixBlendMode: 'multiply', opacity: 0.07, pointerEvents: 'none', zIndex: 0
      }} />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 32, flexWrap: 'wrap' }}>
              <span className="pill"><span className="dot pulse"></span>{c.pill_avail}</span>
              <span className="pill mono">{c.pill_coverage}</span>
            </div>

            <h1 className="serif" style={{ fontSize: 'clamp(56px, 8vw, 112px)', lineHeight: 0.95, margin: 0, letterSpacing: '-0.02em' }}>
              {h.h1[0]}<br />{h.h1[1]} <em style={{ color: emColor }}>{h.h1[2]}</em><br />{h.h1[3]}
            </h1>

            <p style={{ fontSize: 19, lineHeight: 1.5, maxWidth: 540, marginTop: 32, color: 'var(--ink-soft)' }}>{h.sub}</p>

            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <a href="#contact" className="btn">{h.cta1} <Arrow /></a>
              <a href="#tarieven" className="btn btn-ghost">{h.cta2}</a>
            </div>
          </div>

          <div style={{ alignSelf: 'stretch', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
            <LogoCard c={c} />
          </div>
        </div>
      </div>
    </section>);

}

function LogoCard({ c }) {
  return (
    <div style={{
      position: 'relative', minHeight: 360, display: 'flex',
      alignItems: 'center', justifyContent: 'center', padding: 16
    }}>
      <div style={{ position: 'relative', width: '100%', maxWidth: 420, aspectRatio: '1/1' }}>
        {/* Outer hairline ring */}
        <div style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          border: '1px solid var(--line-strong)',
        }}></div>

        {/* Inner moss disc */}
        <div style={{
          position: 'absolute', inset: '12%', borderRadius: '50%',
          background: 'radial-gradient(circle at 30% 25%, #3D5C42 0%, var(--moss) 55%, #243A28 100%)',
          boxShadow: 'inset 0 0 60px rgba(0,0,0,0.25), 0 20px 50px -20px rgba(20,23,15,0.4)',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: '6%', borderRadius: '50%',
            border: '1px dashed rgba(240,234,217,0.18)',
          }}></div>
        </div>

        {/* Logo, tinted cream */}
        <img src="assets/logo-white.png" alt="Bearly-IT" style={{
          position: 'absolute', top: '50%', left: '50%',
          width: '50%', height: 'auto',
          transform: 'translate(-50%, -50%)',
          filter: 'brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(420%) hue-rotate(8deg) brightness(98%)',
          zIndex: 2,
        }} />

        {/* Rotating editorial text on outer ring */}
        <svg viewBox="0 0 200 200" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          animation: 'logoSpin 40s linear infinite', zIndex: 3,
        }} aria-hidden="true">
          <defs>
            <path id="logoTextPath" d="M 100,100 m -94,0 a 94,94 0 1,1 188,0 a 94,94 0 1,1 -188,0" />
          </defs>
          <text fill="var(--ink)" fontFamily="JetBrains Mono, monospace" fontSize="6.5" letterSpacing="3">
            <textPath href="#logoTextPath" startOffset="0">
              ✦ ATELIER BEARLY-IT ✦ TECHNOLOGY, WITH PATIENCE ✦ ANNO MMXVIII ✦ NL ✦
            </textPath>
          </text>
        </svg>

        {/* Counter-rotating honey accent dot at 12 o'clock */}
        <svg viewBox="0 0 200 200" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          animation: 'logoSpinReverse 18s linear infinite', zIndex: 3, pointerEvents: 'none',
        }} aria-hidden="true">
          <circle cx="100" cy="6" r="2" fill="var(--honey)" />
        </svg>
      </div>

      <style>{`
        @keyframes logoSpin { to { transform: rotate(360deg); } }
        @keyframes logoSpinReverse { to { transform: rotate(-360deg); } }
      `}</style>
    </div>);
}

function StatusCard({ audience, c }) {
  const [time, setTime] = React.useState(new Date());
  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const hh = String(time.getHours()).padStart(2, '0');
  const mm = String(time.getMinutes()).padStart(2, '0');
  const ss = String(time.getSeconds()).padStart(2, '0');
  return (
    <div style={{ background: 'var(--ink)', color: 'var(--cream)', borderRadius: 4, padding: 28, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, lineHeight: 1.6 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
        <span style={{ color: 'var(--honey-2)', letterSpacing: '0.12em' }}>{c.status.live}</span>
        <span style={{ opacity: 0.6 }}>{c.status.loc} · {hh}:{mm}:{ss}</span>
      </div>
      <div style={{ borderTop: '1px dashed rgba(240,234,217,0.2)' }}></div>
      {c.status.rows.map((r, i) =>
      <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: i < c.status.rows.length - 1 ? '1px dashed rgba(240,234,217,0.12)' : 'none' }}>
          <span style={{ opacity: 0.65 }}>{r.k}</span>
          <span>{audience === 'zakelijk' ? r.v_b2b : r.v_b2c}</span>
        </div>
      )}
      <div style={{ marginTop: 18, padding: 14, background: 'rgba(240,234,217,0.06)', borderRadius: 2 }}>
        <div style={{ color: 'var(--honey-2)', marginBottom: 6 }}>{c.status.today}</div>
        <div style={{ opacity: 0.85, whiteSpace: 'pre-line' }}>{c.status.log.join('\n')}</div>
      </div>
    </div>);

}

/* ─────────── TRUST BAR ─────────── */
function TrustBar({ c }) {
  const doubled = [...c.trust, ...c.trust];
  return (
    <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '20px 0', overflow: 'hidden', background: 'var(--paper)' }}>
      <div style={{ display: 'flex', gap: 56, animation: 'scroll 36s linear infinite', whiteSpace: 'nowrap', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, letterSpacing: '0.08em', color: 'var(--ink-soft)' }}>
        {doubled.map((it, i) => <span key={i}>{it}</span>)}
      </div>
      <style>{`@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </div>);

}

/* ─────────── SERVICES ─────────── */
function Services({ audience, c }) {
  const items = audience === 'zakelijk' ? c.services.b2b : c.services.b2c;
  return (
    <section id="diensten" data-screen-label="Services" style={{ padding: '96px 0 32px' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48, gap: 32 }}>
          <div>
            <div className="eyebrow">{c.services.eyebrow}</div>
            <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '12px 0 0', lineHeight: 1, letterSpacing: '-0.02em' }}>
              {c.services.h2_a}<em>{c.services.h2_em}</em>{c.services.h2_b}
            </h2>
          </div>
          <a href="#contact" style={{ color: 'var(--ink)', fontSize: 14, whiteSpace: 'nowrap' }}>{c.services.footer}</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--line-strong)' }}>
          {items.map((it, i) => <ServiceCard key={i} {...it} idx={i} />)}
        </div>
      </div>
    </section>);

}

function ServiceCard({ num, t, d, tags, idx }) {
  const [hover, setHover] = React.useState(false);
  const isRight = idx % 3 === 2;
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      padding: '32px 28px 28px', borderRight: isRight ? 'none' : '1px solid var(--line-strong)',
      borderBottom: '1px solid var(--line-strong)', background: hover ? 'var(--paper)' : 'transparent',
      transition: 'background .25s ease', cursor: 'pointer', position: 'relative', minHeight: 300,
      display: 'flex', flexDirection: 'column'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{num}</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28,
          borderRadius: '50%', border: '1px solid var(--ink)',
          transform: hover ? 'rotate(-45deg)' : 'rotate(0deg)', transition: 'transform .25s ease'
        }}>
          <Arrow size={12} />
        </span>
      </div>
      <h3 className="serif" style={{ fontSize: 28, margin: '0 0 12px', lineHeight: 1.1, letterSpacing: '-0.01em' }}>{t}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: '0 0 20px' }}>{d}</p>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 'auto' }}>
        {tags.map((tag, i) =>
        <span key={i} className="mono" style={{
          fontSize: 10, padding: '4px 8px', borderRadius: 2,
          background: i === 0 ? 'var(--ink)' : 'transparent',
          color: i === 0 ? 'var(--cream)' : 'var(--ink-soft)',
          border: i === 0 ? 'none' : '1px solid var(--line-strong)'
        }}>{tag}</span>
        )}
      </div>
    </div>);

}

/* ─────────── PROCESS ─────────── */
function Process({ audience, c }) {
  const steps = audience === 'zakelijk' ? c.process.b2b : c.process.b2c;
  const sub = audience === 'zakelijk' ? c.process.sub_b2b : c.process.sub_b2c;
  return (
    <section id="werkwijze" data-screen-label="Process" style={{ padding: '96px 0', background: 'var(--ink)', color: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(240,234,217,0.5)' }}>{c.process.eyebrow}</div>
            <h2 className="serif" style={{ fontSize: 56, margin: '12px 0 0', lineHeight: 1, letterSpacing: '-0.02em' }}>
              {c.process.h2[0]}<br />{c.process.h2[1]}<br /><em style={{ color: 'var(--honey-2)' }}>{c.process.h2[2]}</em>
            </h2>
          </div>
          <p style={{ fontSize: 18, color: 'rgba(240,234,217,0.7)', maxWidth: 540, alignSelf: 'end', margin: 0 }}>{sub}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid rgba(240,234,217,0.18)' }}>
          {steps.map((s, i) =>
          <div key={i} style={{ padding: '32px 24px 28px', borderRight: i < 3 ? '1px solid rgba(240,234,217,0.18)' : 'none' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--honey-2)', marginBottom: 28, letterSpacing: '0.08em' }}>
                {c.process.step} 0{i + 1} · {s.k.toUpperCase()}
              </div>
              <h3 className="serif" style={{ fontSize: 32, margin: '0 0 12px', lineHeight: 1, letterSpacing: '-0.01em' }}>{s.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'rgba(240,234,217,0.7)', margin: 0 }}>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────── PRICING ─────────── */
function Pricing({ audience, c }) {
  const tiers = audience === 'zakelijk' ? c.pricing.b2b : c.pricing.b2c;
  return (
    <section id="tarieven" data-screen-label="Pricing" style={{ padding: '96px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, gap: 32 }}>
          <div>
            <div className="eyebrow">{c.pricing.eyebrow}</div>
            <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '12px 0 0', lineHeight: 1, letterSpacing: '-0.02em' }}>
              {c.pricing.h2[0]}<br />{c.pricing.h2[1]}
            </h2>
          </div>
          <p className="mono" style={{ fontSize: 12, color: 'var(--muted)', maxWidth: 320, margin: 0, lineHeight: 1.6 }}>
            {c.pricing.note.map((n, i) => <span key={i}>{n}<br /></span>)}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {tiers.map((t, i) =>
          <div key={i} style={{
            padding: 32, borderRadius: 4,
            background: t.highlight ? 'var(--moss)' : 'var(--paper)',
            color: t.highlight ? 'var(--cream)' : 'var(--ink)',
            border: t.highlight ? 'none' : '1px solid var(--line-strong)',
            position: 'relative', display: 'flex', flexDirection: 'column'
          }}>
              {t.highlight &&
            <span className="mono" style={{
              position: 'absolute', top: 16, right: 16, fontSize: 10,
              background: 'var(--honey)', color: 'var(--ink)', padding: '4px 8px', borderRadius: 2, letterSpacing: '0.06em'
            }}>{c.pricing.popular}</span>
            }
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', opacity: 0.7, marginBottom: 14 }}>{t.name.toUpperCase()}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                <span className="serif" style={{ fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em' }}>{t.price}</span>
                <span style={{ fontSize: 14, opacity: 0.7 }}>{t.unit}</span>
              </div>
              <div style={{ fontSize: 13, opacity: 0.7, marginBottom: 24 }}>{t.sub}</div>
              <div style={{ height: 1, background: t.highlight ? 'rgba(240,234,217,0.18)' : 'var(--line)', margin: '4px 0 20px' }}></div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {t.features.map((f, j) =>
              <li key={j} style={{ fontSize: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <span style={{ color: t.highlight ? 'var(--honey-2)' : 'var(--moss)', flexShrink: 0 }}>→</span>{f}
                  </li>
              )}
              </ul>
              <a href="#contact" className="btn" style={{
              marginTop: 'auto', justifyContent: 'center',
              background: t.highlight ? 'var(--cream)' : 'var(--ink)',
              color: t.highlight ? 'var(--ink)' : 'var(--cream)',
              borderColor: t.highlight ? 'var(--cream)' : 'var(--ink)'
            }}>
                {t.cta} <Arrow />
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─────────── TESTIMONIALS ─────────── */
function Testimonials({ audience, c }) {
  const items = audience === 'zakelijk' ? c.testimonials.b2b : c.testimonials.b2c;
  const em = audience === 'zakelijk' ? c.testimonials.h2_em_b2b : c.testimonials.h2_em_b2c;
  return (
    <section data-screen-label="Testimonials" style={{ padding: '96px 0', background: 'var(--paper)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48 }}>
          <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 56px)', margin: 0, lineHeight: 1, letterSpacing: '-0.02em' }}>
            {c.testimonials.h2_a}<em>{em}</em>{c.testimonials.h2_b}
          </h2>
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{c.testimonials.meta}</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((t, i) =>
          <div key={i} style={{ padding: 28, background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 4 }}>
              <div style={{ color: 'var(--honey)', fontSize: 22, marginBottom: 16, letterSpacing: '-0.05em' }}>★★★★★</div>
              <p className="serif" style={{ fontSize: 22, lineHeight: 1.35, margin: '0 0 24px', letterSpacing: '-0.01em' }}>"{t.q}"</p>
              <div className="rule" style={{ marginBottom: 16 }}></div>
              <div style={{ fontSize: 13 }}>
                <div style={{ fontWeight: 500 }}>{t.a}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>{t.m}</div>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 32, padding: 20, background: 'var(--cream)', border: '1px dashed var(--line-strong)', borderRadius: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>// LIVE GOOGLE REVIEWS · embed widget gaat hier</span>
          <a href="https://www.google.com/search?q=bearly-it+amsterdam+reviews" target="_blank" rel="noopener" style={{ fontSize: 13, color: 'var(--ink)', textDecoration: 'underline' }}>Bekijk alle reviews op Google →</a>
        </div>
      </div>
    </section>);

}

/* ─────────── COVERAGE ─────────── */
function Coverage({ c, lang }) {
  return (
    <section id="dekking" data-screen-label="Coverage" style={{ padding: '96px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="eyebrow">{c.coverage.eyebrow}</div>
            <h2 className="serif" style={{ fontSize: 56, margin: '12px 0 24px', lineHeight: 1, letterSpacing: '-0.02em' }}>
              {c.coverage.h2[0]}<br />{c.coverage.h2[1]} <em style={{ color: 'var(--moss)' }}>{c.coverage.h2[2]}</em>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 480, margin: '0 0 24px' }}>{c.coverage.sub}</p>
            <a href="steden.html" className="btn btn-ghost" style={{ fontSize: 13 }}>{c.coverage.cta}</a>
          </div>
          <NLMap c={c} />
        </div>

        <div style={{ marginTop: 56, borderTop: '1px solid var(--line-strong)', paddingTop: 32, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {c.coverage.regions.map((r, i) =>
          <div key={i}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--honey)', marginBottom: 10 }}>{r.p.toUpperCase()}</div>
              <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--ink-soft)' }}>
                {r.c.map((city, j) => <div key={j}>{city}</div>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function NLMap({ c }) {
  // Stylized NL map with 4 hub markers
  const hubs = [
  { name: 'Amsterdam', x: 200, y: 175 },
  { name: 'Rotterdam', x: 180, y: 235 },
  { name: 'Eindhoven', x: 230, y: 295 },
  { name: 'Groningen', x: 285, y: 95 }];

  return (
    <div style={{ aspectRatio: '1/1', background: 'var(--paper)', border: '1px solid var(--line-strong)', borderRadius: 4, padding: 24, position: 'relative', overflow: 'hidden' }}>
      <svg viewBox="0 0 400 400" style={{ width: '100%', height: '100%' }}>
        <defs>
          <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.7" fill="rgba(20,23,15,0.18)" />
          </pattern>
        </defs>
        <rect width="400" height="400" fill="url(#dots)" />
        {/* Stylised NL outline */}
        <path d="M 240 60 L 290 70 L 310 110 L 305 145 L 320 175 L 330 215 L 310 255 L 280 290 L 250 320 L 220 340 L 195 335 L 180 305 L 165 280 L 145 255 L 130 225 L 120 195 L 130 165 L 145 145 L 160 125 L 175 105 L 195 85 L 215 70 Z"
        fill="var(--cream)" stroke="var(--moss)" strokeWidth="1.5" opacity="0.9" />
        {/* Coverage glow */}
        <path d="M 240 60 L 290 70 L 310 110 L 305 145 L 320 175 L 330 215 L 310 255 L 280 290 L 250 320 L 220 340 L 195 335 L 180 305 L 165 280 L 145 255 L 130 225 L 120 195 L 130 165 L 145 145 L 160 125 L 175 105 L 195 85 L 215 70 Z"
        fill="var(--honey)" opacity="0.14" />
        {/* Hubs */}
        {hubs.map((h, i) =>
        <g key={i} transform={`translate(${h.x}, ${h.y})`}>
            <circle r="14" fill="none" stroke="var(--honey)" strokeWidth="1.2" opacity="0.6">
              <animate attributeName="r" values="10;20;10" dur="3s" begin={`${i * 0.5}s`} repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.8;0;0.8" dur="3s" begin={`${i * 0.5}s`} repeatCount="indefinite" />
            </circle>
            <circle r="5" fill="var(--honey)" />
            <text x="10" y="4" fontFamily="JetBrains Mono" fontSize="10" fill="var(--ink)">{h.name}</text>
          </g>
        )}
        <text x="20" y="380" fontFamily="JetBrains Mono" fontSize="9" fill="var(--ink)" opacity="0.5">{c.coverage.hubs.toUpperCase()} · NL · 52°N · 5°E</text>
      </svg>
    </div>);

}

/* ─────────── FAQ ─────────── */
function FAQ({ audience, c }) {
  const items = audience === 'zakelijk' ? c.faq.b2b : c.faq.b2c;
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" data-screen-label="FAQ" style={{ padding: '96px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="eyebrow">{c.faq.eyebrow}</div>
            <h2 className="serif" style={{ fontSize: 48, margin: '12px 0 0', lineHeight: 1, letterSpacing: '-0.02em' }}>
              {c.faq.h2.map((line, i) => <span key={i}>{line}<br /></span>)}
            </h2>
          </div>
          <div style={{ borderTop: '1px solid var(--line-strong)' }}>
            {items.map((item, i) =>
            <div key={i} style={{ borderBottom: '1px solid var(--line-strong)' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left', padding: '24px 0', background: 'transparent', border: 'none', cursor: 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, fontFamily: 'inherit', color: 'var(--ink)'
              }}>
                  <span className="serif" style={{ fontSize: 24, letterSpacing: '-0.01em' }}>{item.q}</span>
                  <span style={{ fontSize: 24, fontFamily: 'Geist, sans-serif', fontWeight: 300, transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .25s ease' }}>+</span>
                </button>
                <div style={{ maxHeight: open === i ? 240 : 0, overflow: 'hidden', transition: 'max-height .35s ease' }}>
                  <p style={{ margin: '0 0 24px', fontSize: 16, color: 'var(--ink-soft)', maxWidth: 600, lineHeight: 1.55 }}>{item.a}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ─────────── CONTACT ─────────── */
function Contact({ audience, c }) {
  const h = audience === 'zakelijk' ? c.contact.h2_b2b : c.contact.h2_b2c;
  const sub = audience === 'zakelijk' ? c.contact.sub_b2b : c.contact.sub_b2c;
  const cta1 = audience === 'zakelijk' ? c.contact.cta1_b2b : c.contact.cta1_b2c;
  return (
    <section id="contact" data-screen-label="Contact" style={{ padding: '96px 0', background: 'var(--moss)', color: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(240,234,217,0.6)' }}>{c.contact.eyebrow}</div>
            <h2 className="serif" style={{ fontSize: 'clamp(48px, 7vw, 96px)', margin: '12px 0 24px', lineHeight: 0.95, letterSpacing: '-0.02em' }}>
              {h[0]}<br />{h[1]} <em style={{ color: 'var(--honey-2)' }}>{h[2]}</em>
            </h2>
            <p style={{ fontSize: 18, maxWidth: 540, color: 'rgba(240,234,217,0.75)', margin: '0 0 36px' }}>{sub}</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="https://wa.me/31618894570" target="_blank" rel="noopener" className="btn" style={{ background: 'var(--honey)', color: 'var(--ink)', borderColor: 'var(--honey)' }}>{cta1} <Arrow /></a>
              <a href="mailto:info@bearly-it.com" className="btn btn-ghost" style={{ color: 'var(--cream)', borderColor: 'rgba(240,234,217,0.3)' }}>info@bearly-it.com</a>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'rgba(240,234,217,0.75)', lineHeight: 1.8 }}>
            <div>
              <div style={{ color: 'var(--honey-2)', marginBottom: 4 }}>{c.contact.hours_t}</div>
              <span style={{ whiteSpace: 'pre-line' }}>{c.contact.hours}</span>
            </div>
            <div>
              <div style={{ color: 'var(--honey-2)', marginBottom: 4 }}>{c.contact.spoed_t}</div>
              {c.contact.spoed}
            </div>
            <div>
              <div style={{ color: 'var(--honey-2)', marginBottom: 4 }}>{c.contact.loc_t}</div>
              <span style={{ whiteSpace: 'pre-line' }}>{c.contact.loc}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ─────────── FOOTER ─────────── */
function Footer({ c }) {
  const cols = [c.footer.col1, c.footer.col2, c.footer.col3];
  return (
    <footer style={{ padding: '64px 0 32px', background: 'var(--ink)', color: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 56 }}>
          <div>
            <div style={{ marginBottom: 20 }}><LogoWhite height={64} /></div>
            <p style={{ fontSize: 14, color: 'rgba(240,234,217,0.6)', maxWidth: 360, lineHeight: 1.55, margin: 0 }}>{c.footer.tagline}</p>
          </div>
          {cols.map((col, i) =>
          <div key={i}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--honey-2)', marginBottom: 16 }}>{col.h.toUpperCase()}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.l.map((item) =>
              <li key={item}><a href={i === 2 && item.includes('A–Z') ? 'steden.html' : '#'} style={{ color: 'var(--cream)', textDecoration: 'none', fontSize: 14, opacity: 0.8 }}>{item}</a></li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div style={{ borderTop: '1px solid rgba(240,234,217,0.18)', paddingTop: 20, display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'rgba(240,234,217,0.5)', flexWrap: 'wrap', gap: 12 }}>
          <span>{c.footer.legal}</span>
          <span>{c.footer.made} · 52°N · 5°E</span>
        </div>
      </div>
    </footer>);

}

function ConsultationForm({ audience, c }) {
  const isB2B = audience === 'zakelijk';

  /* Inline translations for the form */
  const lang = (c && c.code) || (window.Bearly && window.Bearly.getLang && window.Bearly.getLang()) || 'nl';
  const T = {
    nl: { eyebrow:'§ 07 — Inschrijven', h1a:'Plan een ', h1em:'gratis', h1b:' kennismakingsgesprek.',
          sub_b2c:'Vul uw gegevens in en wij nemen binnen 1 werkdag contact op voor een vrijblijvend gesprek. Geen verkooppraat — we kijken samen wat u nodig heeft.',
          sub_b2b:'Vul uw bedrijfsgegevens in en wij plannen een gratis IT-audit van 2 uur in. Geen verkooppraat — wel een eerlijke nulmeting met rapport.',
          fn:'Voornaam', ln:'Achternaam', em:'E-mail', tel:'Telefoonnummer', addr:'Adres (straat + woonplaats)', co:'Bedrijfsnaam', msg:'Toelichting (optioneel)',
          submit:'Verstuur aanvraag', sending:'Versturen…',
          ok_h:'Bedankt! Aanvraag ontvangen.', ok_p:'We hebben uw gegevens binnen. We nemen binnen 1 werkdag contact op. Bij spoed: WhatsApp ons gerust direct.',
          err:'Er ging iets mis. Probeer opnieuw of mail ons direct op info@bearly-it.com.',
          privacy:'Uw gegevens worden alleen gebruikt om contact op te nemen. We versturen geen nieuwsbrieven.' },
    en: { eyebrow:'§ 07 — Sign up', h1a:'Schedule a ', h1em:'free', h1b:' intro call.',
          sub_b2c:'Fill in your details and we’ll get back to you within 1 working day for a no-strings call. No sales pitch — just a look at what you need.',
          sub_b2b:'Fill in your company details and we’ll book a free 2-hour IT audit. No sales pitch — just an honest baseline with a report.',
          fn:'First name', ln:'Last name', em:'Email', tel:'Phone', addr:'Address (street + city)', co:'Company name', msg:'Notes (optional)',
          submit:'Send request', sending:'Sending…',
          ok_h:'Thanks! Request received.', ok_p:'We’ve got your details. You’ll hear from us within 1 working day. Emergency? WhatsApp us directly.',
          err:'Something went wrong. Please try again or email us at info@bearly-it.com.',
          privacy:'Your details are only used to contact you. We don’t send newsletters.' },
    es: { eyebrow:'§ 07 — Reservar', h1a:'Reserve una ', h1em:'llamada', h1b:' gratuita.',
          sub_b2c:'Rellene sus datos y nos pondremos en contacto en 1 día laborable. Sin venta forzada — solo escuchamos qué necesita.',
          sub_b2b:'Rellene los datos de su empresa y programaremos una auditoría IT gratuita de 2 horas. Sin venta forzada — solo un diagnóstico honesto.',
          fn:'Nombre', ln:'Apellido', em:'Correo', tel:'Teléfono', addr:'Dirección (calle + ciudad)', co:'Empresa', msg:'Notas (opcional)',
          submit:'Enviar solicitud', sending:'Enviando…',
          ok_h:'¡Gracias! Solicitud recibida.', ok_p:'Tenemos sus datos. Le contactaremos en 1 día laborable. ¿Urgencia? Escríbanos por WhatsApp.',
          err:'Algo salió mal. Inténtelo de nuevo o envíe un email a info@bearly-it.com.',
          privacy:'Sus datos se usan solo para contactarle. No enviamos boletines.' },
    it: { eyebrow:'§ 07 — Iscriviti', h1a:'Prenota una ', h1em:'chiamata', h1b:' gratuita.',
          sub_b2c:'Inserisci i tuoi dati e ti contatteremo entro 1 giorno lavorativo. Niente pressioni di vendita — solo ascolto.',
          sub_b2b:'Inserisci i dati aziendali e prenoteremo un audit IT gratuito di 2 ore. Niente pressioni di vendita — solo un’analisi onesta.',
          fn:'Nome', ln:'Cognome', em:'Email', tel:'Telefono', addr:'Indirizzo (via + città)', co:'Azienda', msg:'Note (opzionale)',
          submit:'Invia richiesta', sending:'Invio…',
          ok_h:'Grazie! Richiesta ricevuta.', ok_p:'Abbiamo i tuoi dati. Ti contatteremo entro 1 giorno lavorativo. Urgenza? Scrivici su WhatsApp.',
          err:'Qualcosa è andato storto. Riprova o scrivici a info@bearly-it.com.',
          privacy:'I tuoi dati vengono usati solo per contattarti. Non inviamo newsletter.' },
  };
  const t = T[lang] || T.nl;

  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | err

  const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mkopkjal';

  async function onSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    const form = e.target;
    const formData = new FormData(form);
    // Honey-pot anti-spam
    if (formData.get('_honey')) { setStatus('err'); return; }
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { 'Accept': 'application/json' },
        body: formData,
      });
      if (res.ok) {
        setStatus('ok');
        form.reset();
      } else {
        setStatus('err');
      }
    } catch (err) {
      setStatus('err');
    }
  }

  const labelStyle = { display: 'block', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 6 };
  const inputStyle = {
    width: '100%', padding: '12px 14px', borderRadius: 4,
    border: '1px solid var(--line-strong)', background: 'var(--paper)', color: 'var(--ink)',
    fontFamily: 'inherit', fontSize: 15, outline: 'none', transition: 'border-color .2s',
  };

  return (
    <section id="inschrijven" data-screen-label="Form" style={{ padding: '96px 0', borderTop: '1px solid var(--line)', background: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="eyebrow">{t.eyebrow}</div>
            <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 56px)', margin: '12px 0 24px', lineHeight: 1, letterSpacing: '-0.02em' }}>
              {t.h1a}<em style={{ color: 'var(--honey)' }}>{t.h1em}</em>{t.h1b}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 460, margin: '0 0 28px' }}>
              {isB2B ? t.sub_b2b : t.sub_b2c}
            </p>
            <p className="mono" style={{ fontSize: 11, color: 'var(--muted)', lineHeight: 1.6, maxWidth: 380 }}>
              {t.privacy}
            </p>
          </div>

          {status === 'ok' ? (
            <div style={{
              padding: 36, background: 'var(--moss)', color: 'var(--cream)', borderRadius: 6,
              display: 'flex', flexDirection: 'column', gap: 14, minHeight: 280, justifyContent: 'center',
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', opacity: 0.7, color: 'var(--honey-2)' }}>✓ OK</div>
              <h3 className="serif" style={{ fontSize: 36, margin: 0, lineHeight: 1.05, letterSpacing: '-0.01em' }}>{t.ok_h}</h3>
              <p style={{ fontSize: 16, color: 'rgba(240,234,217,0.85)', margin: 0, maxWidth: 460, lineHeight: 1.55 }}>{t.ok_p}</p>
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{
              padding: 32, background: 'var(--paper)', border: '1px solid var(--line-strong)', borderRadius: 6,
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              {/* Formspree config: alleen _subject werkt als hidden field, andere zijn handig als context */}
              <input type="hidden" name="_subject" value={isB2B ? 'Nieuwe zakelijke aanvraag — Bearly-IT' : 'Nieuwe particulier-aanvraag — Bearly-IT'} />
              <input type="hidden" name="Type" value={isB2B ? 'Zakelijk' : 'Particulier'} />
              <input type="text" name="_honey" tabIndex="-1" autoComplete="off" style={{ position: 'absolute', left: '-9999px' }} />

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <div>
                  <label style={labelStyle}>{t.fn} *</label>
                  <input required name="Voornaam" type="text" style={inputStyle} />
                </div>
                <div>
                  <label style={labelStyle}>{t.ln} *</label>
                  <input required name="Achternaam" type="text" style={inputStyle} />
                </div>
              </div>

              <div>
                <label style={labelStyle}>{t.em} *</label>
                <input required name="Email" type="email" style={inputStyle} />
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <div>
                  <label style={labelStyle}>{t.tel} *</label>
                  <input required name="Telefoon" type="tel" style={inputStyle} />
                </div>
                <div>
                  <label style={labelStyle}>{t.addr}</label>
                  <input name="Adres" type="text" style={inputStyle} />
                </div>
              </div>

              {isB2B && (
                <div>
                  <label style={labelStyle}>{t.co} *</label>
                  <input required name="Bedrijfsnaam" type="text" style={inputStyle} />
                </div>
              )}

              <div>
                <label style={labelStyle}>{t.msg}</label>
                <textarea name="Toelichting" rows={3} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'inherit' }} />
              </div>

              {status === 'err' && (
                <div style={{ padding: 12, background: 'rgba(194,131,56,0.12)', border: '1px solid var(--honey)', borderRadius: 4, fontSize: 13, color: 'var(--ink)' }}>
                  {t.err}
                </div>
              )}

              <button type="submit" disabled={status === 'sending'} className="btn" style={{
                marginTop: 6, justifyContent: 'center', padding: '14px 22px',
                opacity: status === 'sending' ? 0.6 : 1, cursor: status === 'sending' ? 'wait' : 'pointer',
              }}>
                {status === 'sending' ? t.sending : t.submit} {status !== 'sending' && <Arrow />}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Nav, Hero, TrustBar, Services, Process, Pricing, Testimonials, Coverage, FAQ, Contact, Footer,
  LogoDark, LogoWhite, LangSwitch, ConsultationForm
});