/* ============================================================
   V3 — Crafted motion (Apple/Awwwards/Liquid Death vibe)
   Gradient text · animated X-diagonal · magnetic hover
   Gradient breathing backgrounds · thin scroll progress bar
   Dramatic padding · 0-2px radius
   NO icons — typography + photos + X-diagonal only
   Hero: asymmetric editorial, groot statement + subtle motion
============================================================ */

/* Magnetic-hover wrapper: subtle translate toward cursor */
function V3Magnetic({ children, strength = 12, style = {}, className = '' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / r.width;
      const dy = (e.clientY - cy) / r.height;
      el.style.transform = `translate(${dx * strength}px, ${dy * strength}px)`;
    };
    const onLeave = () => { el.style.transform = 'translate(0, 0)'; };
    const parent = el.parentElement;
    parent.addEventListener('mousemove', onMove);
    parent.addEventListener('mouseleave', onLeave);
    return () => { parent.removeEventListener('mousemove', onMove); parent.removeEventListener('mouseleave', onLeave); };
  }, [strength]);
  return (
    <div ref={ref} style={{ transition: 'transform .35s cubic-bezier(.2,.7,.2,1)', ...style }} className={className}>
      {children}
    </div>
  );
}

/* Animated X-diagonal — parallax scale on scroll within artboard */
function V3XDiagAnimated({ color = '#FF6900', width = '100%', height = 200, opacity = 1, style = {}, delay = 0 }) {
  return (
    <svg viewBox="0 0 100 60" preserveAspectRatio="none" style={{
      display: 'block', width, height, opacity,
      animation: `v3-xdiag-pulse 9s ease-in-out infinite`, animationDelay: `${delay}s`,
      ...style,
    }}>
      <polygon points="0,0 70,0 100,30 70,60 0,60" fill={color} />
    </svg>
  );
}

/* Decorative big quote-mark */
function V3QuoteMark({ size = 200, color = 'rgba(255,105,0,0.10)' }) {
  return (
    <span style={{
      fontFamily: "'Inter', serif", fontWeight: 900, fontSize: size,
      color, lineHeight: 0.7, letterSpacing: '-0.04em',
      display: 'inline-block',
      fontFeatureSettings: '"ss01"',
    }}>"</span>
  );
}

/* ──────────────────────────────────────────────────────────────
   V3 HOMEPAGE
────────────────────────────────────────────────────────────── */
function V3Home() {
  return (
    <div className="variant v3" data-variant="3" data-page="home" data-screen-label="V3 · Homepage">

      {/* Scroll progress bar (decorative, static here) */}
      <div className="v3-scroll-progress" />

      {/* Breathing backgrounds */}
      <div className="v3-breath" style={{ top: -200, right: -200 }} />
      <div className="v3-breath v3-breath--2" style={{ top: 1400, left: -300 }} />
      <div className="v3-breath" style={{ top: 3200, right: -400 }} />

      {/* NAV */}
      <nav className="v3-nav">
        <XinnoLogo size={28} />
        <div className="v3-nav__links">
          <a>Werkplek</a><a>Aanvullingen</a><a>Over ons</a><a>Nieuws</a><a>Contact</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: '#394A58' }}>020 242 0800</span>
          <a style={{ fontSize: 14, color: '#394A58', fontWeight: 500 }}>inloggen</a>
          <button className="v3-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO — text left, video right (editorial split) */}
      <section style={{ position: 'relative', padding: '80px 56px 100px', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.5fr 0.5fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="v3-eyebrow" style={{ marginBottom: 24 }}>XINNO · SINDS 2009</div>
              <h1 style={{ fontSize: 96, lineHeight: 0.95, letterSpacing: '-0.05em', marginBottom: 32, fontWeight: 800 }}>
                <span style={{ display: 'block' }}>IT</span>
                <span style={{ display: 'block', fontWeight: 800, color: '#394A58', letterSpacing: '-0.05em' }}>zonder</span>
                <span className="v3-gradient" style={{ display: 'block' }}>omkijken.</span>
              </h1>
              <p style={{ fontSize: 20, lineHeight: 1.5, color: '#15202a', fontWeight: 400, letterSpacing: '-0.01em', marginBottom: 36, maxWidth: 480 }}>
                Dat is werken met de <span style={{ fontWeight: 600, color: '#FF6900' }}>365 Modern Workplace</span> voor de advocatuur en het notariaat van XINNO.
              </p>
              <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
                <V3Magnetic strength={8}><button className="v3-cta v3-cta--orange">Ontdek de werkplek →</button></V3Magnetic>
                <a style={{ fontSize: 14.5, color: '#394A58', fontWeight: 500, borderBottom: '1px solid #394A58', paddingBottom: 2 }}>17 jaar gespecialiseerd</a>
              </div>
            </div>
            {/* Hero video — Wistia thumb */}
            <div style={{ position: 'relative' }}>
              <V3Magnetic strength={6}>
                <WistiaThumb id="bi37avkzj5" duration="2 MIN" title="IT zonder omkijken — bekijk de video" height={520} style={{ borderRadius: 4 }} />
              </V3Magnetic>
              {/* Subtle X-diagonal accent corner */}
              <div style={{ position: 'absolute', top: -8, left: -8, width: 48, height: 8, background: '#FF6900', clipPath: 'polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%)' }} />
            </div>
          </div>
        </div>
      </section>

      {/* STATS strip */}
      <section style={{ padding: '60px 56px 100px', position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', borderTop: '1px solid rgba(57,74,88,0.15)', borderBottom: '1px solid rgba(57,74,88,0.15)', padding: '40px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 60 }}>
          {[
            ['15', 'jaar ervaring in de advocatuur', 'JAREN'],
            ['+110', 'aangesloten kantoren', 'KANTOREN'],
            ['+2600', 'gebruikers met digitale vrijheid', 'GEBRUIKERS'],
          ].map(([n, l, lbl], i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 28 }}>
              <div style={{ fontSize: 64, fontWeight: 800, lineHeight: 0.95, letterSpacing: '-0.035em' }} className="v3-gradient">{n}</div>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.22em', marginBottom: 8 }}>{lbl}</div>
                <div style={{ fontSize: 14, color: '#3a4754', maxWidth: 180, lineHeight: 1.5 }}>{l}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* LEDE — editorial asymmetric */}
      <section className="v3-section" style={{ paddingTop: 60, paddingBottom: 120, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.4fr 0.6fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="v3-eyebrow">HOOFDSTUK 02</div>
            <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 1, letterSpacing: '-0.04em', fontWeight: 800 }}>
              Waar ambitie<br /><span style={{ color: '#FF6900', fontWeight: 800 }}>groeit,</span><br />groeit XINNO mee.
            </h2>
          </div>
          <div style={{ paddingTop: 24 }}>
            <p style={{ fontSize: 22, lineHeight: 1.45, color: '#15202a', marginBottom: 32, fontWeight: 400 }}>
              In 2009 zijn wij begonnen met het leveren van online werkplekken waarin kleine advocatenkantoren grootse ambities konden realiseren. Inmiddels ondersteunen wij advocaten- en notariskantoren van elke omvang — ook kantoren met meer dan 100 medewerkers.
            </p>
            <p style={{ fontSize: 17, marginBottom: 22 }}>
              Als ervaren experts in dé online werkplek voor de advocatuur en het notariaat bieden wij een oplossing die voldoet aan de hoge eisen van juridische professionals.
            </p>
            <p style={{ fontSize: 17, marginBottom: 32 }}>
              Wij kennen uw processen, spreken uw taal en begrijpen uw afhankelijkheid van IT als geen ander. Dat is onze basis voor uw partner voor zorgeloze IT.
            </p>
            <a className="v3-cta" style={{ background: 'transparent', color: '#15202a', border: '1.5px solid #15202a', padding: '16px 24px' }}>Neem contact met ons op →</a>
          </div>
        </div>
      </section>

      {/* SERVICES — kinetic typography numbered */}
      <section style={{ background: '#0a141c', color: '#fff', padding: '140px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div className="v3-breath" style={{ top: -200, left: -200, background: 'radial-gradient(circle, rgba(255,105,0,0.18) 0%, transparent 60%)' }} />
        <div className="v3-breath v3-breath--2" style={{ bottom: -200, right: -200 }} />
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="v3-eyebrow" style={{ color: '#FFA100' }}>HOOFDSTUK 03 · DRIE MODERN WORKPLACES</div>
          <h2 style={{ color: '#fff', marginTop: 24, fontSize: 72, lineHeight: 1, letterSpacing: '-0.045em', marginBottom: 64, fontWeight: 800 }}>
            Voor iedere situatie<br /><span className="v3-gradient">een oplossing.</span>
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              { n: 'XINNO Private Desktop', b: 'Overal kunnen werken vanaf één centraal online bureaublad dat u overal kunt oproepen. Beveiligd en beheerd door XINNO in een Amsterdams datacenter, waarbij uw gegevens alléén op deze plek worden opgeslagen.', tags: ['Amsterdams datacenter', 'Vast bedrag per maand', '24×7 bewaakt'] },
              { n: 'XINNO 365 Hybrid Desktop', b: 'De unieke werkplek voor de advocatuur, waarbij u gebruik maakt van Microsoft 365 diensten, met de zekerheid dat al uw gegevens veilig in het Amsterdams datacenter van XINNO worden opgeslagen.', tags: ['Microsoft 365', 'Device of choice', 'Data in Amsterdam'] },
              { n: 'XINNO 365 Managed Desktop', b: 'De 365 werkplek, waarbij u volledig gebruik maakt van Microsoft 365 diensten en door u zelf gekozen online software. Uw gegevens zijn opgeslagen bij Microsoft in Nederland en de online software leveranciers.', tags: ['Microsoft 365', 'Microsoft NL', 'Eigen software'] },
            ].map((s, i) => (
              <a key={i} style={{
                display: 'grid', gridTemplateColumns: '80px 0.45fr 0.55fr 1fr 60px',
                gap: 32, padding: '40px 0',
                borderTop: '1px solid rgba(255,255,255,0.12)',
                borderBottom: i === 2 ? '1px solid rgba(255,255,255,0.12)' : 0,
                alignItems: 'center',
                transition: 'background .4s', cursor: 'pointer',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,105,0,0.06)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
              >
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.04em' }}>0{i+1}</div>
                <h3 style={{ color: '#fff', fontSize: 36, letterSpacing: '-0.03em', lineHeight: 1.05, fontWeight: 800 }}>{s.n}</h3>
                <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.72)', lineHeight: 1.6 }}>{s.b}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {s.tags.map((t, k) => (
                    <span key={k} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FFA100', padding: '6px 10px', border: '1px solid rgba(255,161,0,0.4)', borderRadius: 2, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t}</span>
                  ))}
                </div>
                <div style={{ fontSize: 28, color: '#FF6900', textAlign: 'right', fontWeight: 300 }}>→</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* PHOTO + EDITORIAL split */}
      <section className="v3-section" style={{ position: 'relative', zIndex: 1, paddingTop: 140, paddingBottom: 100 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.55fr 0.45fr', gap: 80, alignItems: 'center' }}>
          <PhotoSlot height={620} label="EDITORIAL · Juriste aan het werk op laptop, lichte ruimte, natuurlijk licht, fly-on-the-wall, vergrijsde frisse tonen, diverse setting" corner="EDITORIAL · 01" style={{ borderRadius: 2 }} />
          <div>
            <div className="v3-eyebrow">HOOFDSTUK 04 · IN BEELD</div>
            <h2 style={{ marginTop: 24, fontSize: 56, lineHeight: 0.96, letterSpacing: '-0.05em', marginBottom: 32 }}>
              Iedereen,<br /><span className="v3-italic" style={{ color: '#FF6900' }}>overal,</span><br />zorgeloos.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.55, marginBottom: 32, maxWidth: 460 }}>
              Iedereen in uw organisatie kan dankzij XINNO onder alle omstandigheden, overal veilig en zorgeloos aan de slag met strikt vertrouwelijke informatie en elke applicatie.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {['Op kantoor', 'Vanaf huis', 'Bij de cliënt', 'In de rechtbank'].map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 18, padding: '14px 0', borderBottom: '1px solid rgba(57,74,88,0.15)' }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', letterSpacing: '0.16em' }}>0{i+1}</span>
                  <span style={{ fontSize: 22, color: '#15202a', fontWeight: 500, letterSpacing: '-0.015em' }}>{s}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* NIEUWS — editorial mag layout */}
      <section className="v3-section" style={{ paddingTop: 100, paddingBottom: 140, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 60 }}>
            <div>
              <div className="v3-eyebrow">HOOFDSTUK 05 · NIEUWS</div>
              <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.05em' }}>Nieuws &<br /><span className="v3-gradient">actueel.</span></h2>
            </div>
            <a style={{ fontSize: 14, color: '#15202a', fontWeight: 600, borderBottom: '1.5px solid #15202a', paddingBottom: 2 }}>Naar nieuwsarchief →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 32 }}>
            <V3Magnetic strength={6}>
              <article style={{ position: 'relative' }}>
                <PhotoSlot height={420} src="images/news-fd-special.jpg" alt="FD-special interview" corner="FD-SPECIAL" style={{ borderRadius: 2 }} />
                <div style={{ marginTop: 28 }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 16 }}>FD-SPECIAL · 03 / 2026 · 5 MIN READ</div>
                  <h3 style={{ fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.03em', marginBottom: 16 }}>De brug slaan tussen IT en advocatuur</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.6 }}>
                    In de FD special "Legal Succes & Compliance" sprak XINNO Managing Director Ramon van den Heuvel over het slaan van de brug tussen [...]
                  </p>
                </div>
              </article>
            </V3Magnetic>
            <V3Magnetic strength={6}>
              <article>
                <PhotoSlot height={240} src="images/news-brande-verheij.jpg" alt="Brande & Verheij LLP" corner="CASE" style={{ borderRadius: 2 }} />
                <div style={{ marginTop: 24 }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 12 }}>CASE · 02 / 2026 · 3 MIN READ</div>
                  <h4 style={{ fontSize: 26, lineHeight: 1.15, letterSpacing: '-0.02em', marginBottom: 14 }}>Brande & Verheij LLP werkt sneller en veiliger</h4>
                  <p style={{ fontSize: 15, lineHeight: 1.6, marginBottom: 28 }}>
                    Sinds de oprichting in mei 2019 vertrouwt Brande & Verheij LLP, een Rotterdams advocatenkantoor gespecialiseerd in burgerlijk recht en procesrecht, op XINNO [...]
                  </p>
                </div>

                {/* Mini video card — Wistia thumb */}
                <a href="https://fast.wistia.net/embed/medias/bi37avkzj5" target="_blank" rel="noopener" style={{ display: 'block', position: 'relative', height: 200, borderRadius: 2, overflow: 'hidden', cursor: 'pointer' }}>
                  <img src="https://fast.wistia.net/embed/medias/bi37avkzj5/swatch" alt="Wat zijn de trends" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%)' }} />
                  <div style={{ position: 'absolute', top: 12, left: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.16em', textTransform: 'uppercase' }}>2 MIN · WAT ZIJN DE TRENDS?</div>
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ width: 64, height: 64, borderRadius: '50%', background: '#FF6900', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 22 }}>▶</div>
                  </div>
                </a>
              </article>
            </V3Magnetic>
          </div>
        </div>
      </section>

      {/* TESTIMONIAL — single big editorial quote */}
      <section style={{ background: 'linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '180px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div className="v3-breath" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 1000, height: 1000, background: 'radial-gradient(circle, rgba(255,105,0,0.15) 0%, transparent 50%)' }} />
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', textAlign: 'left' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.22em', marginBottom: 32 }}>
            HOOFDSTUK 06 · WAT JURISTEN VINDEN
          </div>
          <div style={{ marginBottom: -40 }}><V3QuoteMark size={260} color="rgba(255,105,0,0.18)" /></div>
          <p style={{ fontSize: 64, lineHeight: 1.2, color: '#fff', fontWeight: 500, letterSpacing: '-0.035em', marginBottom: 64 }}>
            <span style={{ opacity: 0.55 }}>SOLV vindt</span> "…ze gaan mee in de ontwikkelingen en lopen daarin voorop. Dat is denk ik de <span className="v3-gradient">kracht van Xinno.</span>"
          </p>
          {/* secondary quotes inline */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 60, paddingTop: 60, borderTop: '1px solid rgba(255,255,255,0.14)' }}>
            {[
              { k: 'SIX Advocaten', q: 'Ze snappen echt wat het vak inhoudt en wat je nodig hebt als advocaat. XINNO regelt het.' },
              { k: 'Parker Advocaten', q: 'XINNO is kundig, klantgericht, en doet graag moeite. Ze werken overzichtelijk en de service is erg goed.' },
            ].map((t, i) => (
              <div key={i}>
                <p style={{ fontSize: 20, lineHeight: 1.45, color: 'rgba(255,255,255,0.88)', marginBottom: 18, fontStyle: 'italic', fontWeight: 400 }}>"{t.q}"</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 28, height: 1.5, background: '#FF6900' }} />
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.16em', fontWeight: 600 }}>{t.k}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section style={{ padding: '180px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div className="v3-breath" style={{ top: -200, right: -200 }} />
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="v3-eyebrow">HOOFDSTUK 07 · CONTACT</div>
          <h2 style={{ marginTop: 32, fontSize: 156, lineHeight: 0.9, letterSpacing: '-0.065em', marginBottom: 56 }}>
            Klaar voor uw<br /><span className="v3-gradient">digitale toekomst?</span>
          </h2>
          <p style={{ fontSize: 22, lineHeight: 1.45, color: '#15202a', marginBottom: 48, maxWidth: 700, fontWeight: 400 }}>
            We komen graag langs om vrijblijvend kennis te maken en uw wensen door te nemen. Voor elk advocatenkantoor hebben wij een passende digitale werkplek.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
            <V3Magnetic strength={10}>
              <button className="v3-cta v3-cta--orange" style={{ fontSize: 16, padding: '22px 32px' }}>Neem contact op →</button>
            </V3Magnetic>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: '#394A58', letterSpacing: '0.1em' }}>
              <span style={{ color: '#FF6900' }}>020 242 0800</span> · sales@xinno.nl
            </div>
          </div>
        </div>
      </section>

      <V3Footer />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   V3 — OVER ONS
────────────────────────────────────────────────────────────── */
function V3About() {
  return (
    <div className="variant v3" data-variant="3" data-page="about" data-screen-label="V3 · Over ons">
      <div className="v3-scroll-progress" />
      <div className="v3-breath" style={{ top: -200, right: -200 }} />
      <div className="v3-breath v3-breath--2" style={{ top: 1600, left: -300 }} />

      <nav className="v3-nav">
        <XinnoLogo size={28} />
        <div className="v3-nav__links">
          <a>Werkplek</a><a>Aanvullingen</a><a style={{ color: '#15202a' }}>Over ons</a><a>Nieuws</a><a>Contact</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: '#394A58' }}>020 242 0800</span>
          <a style={{ fontSize: 14, color: '#394A58', fontWeight: 500 }}>inloggen</a>
          <button className="v3-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO */}
      <section style={{ position: 'relative', padding: '120px 56px 100px', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="v3-eyebrow">XINNO · OVER ONS</div>
          <h1 style={{ marginTop: 32, fontSize: 88, lineHeight: 0.96, letterSpacing: '-0.05em', marginBottom: 40, fontWeight: 800 }}>
            Een visie <span className="v3-gradient">apart.</span>
          </h1>
          <div style={{ display: 'grid', gridTemplateColumns: '0.5fr 0.5fr', gap: 80, alignItems: 'end' }}>
            <p style={{ fontSize: 28, lineHeight: 1.3, color: '#15202a', fontWeight: 500, letterSpacing: '-0.02em' }}>
              Wie zijn we, en waar gaan we naar toe?
              <br /><span style={{ color: '#FF6900', fontStyle: 'italic' }}>Dit is de visie onze op ICT voor de advocatuur.</span>
            </p>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#394A58', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.8, textAlign: 'right' }}>
              <div style={{ color: '#9CA7B5', marginBottom: 6 }}>EST.</div>
              <div>23 maart 2009</div>
              <div>Amsterdam, NL</div>
              <div>17 jaar geleden</div>
            </div>
          </div>
        </div>
      </section>

      {/* INTRO */}
      <section className="v3-section" style={{ paddingTop: 80, paddingBottom: 140, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.35fr 0.65fr', gap: 80, alignItems: 'start' }}>
          <div style={{ paddingTop: 24 }}>
            <div className="v3-eyebrow">HOOFDSTUK 01 · DE BASIS</div>
            <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 0.98, letterSpacing: '-0.045em' }}>
              IT die past bij het <span className="v3-italic" style={{ color: '#FF6900' }}>juridisch werkproces.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 22, lineHeight: 1.45, color: '#15202a', marginBottom: 28, fontWeight: 400 }}>
              In de advocatuur is IT ondersteunend en complex, maar onmisbaar. Een groeiend aantal systemen en databronnen helpen de advocaat bij het tot een goed einde brengen van een zaak en bij het organiseren van het kantoor.
            </p>
            <p style={{ fontSize: 17, marginBottom: 22 }}>
              Maar als advocaat wilt u zich richten op de cliënt en geen omkijken hebben naar hoe IT werkt: u wilt dat het werkt.
            </p>
            <p style={{ fontSize: 17 }}>
              XINNO laat advocaten zorgeloos werken met IT zonder omkijken. Op zo'n manier dat de IT past bij het juridisch werkproces, en wordt onderhouden door een partner die de juridische sector kent als zijn broekzak. Iedereen in uw organisatie kan dankzij XINNO onder alle omstandigheden, overal veilig en zorgeloos aan de slag met strikt vertrouwelijke informatie en elke applicatie.
            </p>
          </div>
        </div>
      </section>

      {/* TIMELINE — diagonal layout, dramatic */}
      <section style={{ background: '#0a141c', color: '#fff', padding: '180px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div className="v3-breath" style={{ top: -200, left: -200 }} />
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="v3-eyebrow" style={{ color: '#FFA100' }}>HOOFDSTUK 02 · TIJDLIJN</div>
          <h2 style={{ color: '#fff', marginTop: 24, fontSize: 96, lineHeight: 0.95, letterSpacing: '-0.055em', marginBottom: 100 }}>
            Van bierviltje tot<br /><span className="v3-gradient">2600 gebruikers.</span>
          </h2>

          <div style={{ position: 'relative' }}>
            {/* connecting line */}
            <div style={{ position: 'absolute', left: 0, right: 0, top: 60, height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,105,0,0.4), rgba(209,65,36,0.4), transparent)' }} />

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 60, position: 'relative' }}>
              {[
                { y: '2006', t: 'Bierviltje', b: 'Het idee voor de eerste online werkplek voor juridische professionals ontstaat, heel cliché, in de sportschool aan de bar en wordt conceptueel op een bierviltje opgeschreven.' },
                { y: '2009', t: 'XINNO opgericht', b: 'Op 23 maart 2009 wordt XINNO opgericht. In dat jaar worden de eerste online werkplekken opgeleverd aan niche-kantoren die klein begonnen – en snel groeiden. De oplossing bleek uiterst schaalbaar.' },
                { y: '2021', t: 'TSH', b: 'XINNO sluit zich aan bij TSH. Daarmee openden deuren voor het versneld doorvoeren van ontwikkelingen op technisch gebied, het implementeren van nieuwe innovaties en het verder professionaliseren van de diensten.' },
              ].map((e, i) => (
                <V3Magnetic key={i} strength={6}>
                  <div style={{ paddingTop: i * 30 }}>
                    <div style={{ width: 18, height: 18, borderRadius: '50%', background: '#FF6900', marginBottom: 32, boxShadow: '0 0 0 6px rgba(255,105,0,0.18)' }} />
                    <div style={{ fontSize: 56, fontWeight: 900, lineHeight: 0.88, letterSpacing: '-0.06em', marginBottom: 24 }} className="v3-gradient">{e.y}</div>
                    <h4 style={{ color: '#fff', fontSize: 28, marginBottom: 16, letterSpacing: '-0.025em', fontWeight: 700 }}>{e.t}</h4>
                    <p style={{ color: 'rgba(255,255,255,0.72)', fontSize: 15, lineHeight: 1.65 }}>{e.b}</p>
                  </div>
                </V3Magnetic>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* START + TOEKOMST */}
      <section className="v3-section" style={{ paddingTop: 140, paddingBottom: 100, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          {[
            { eb: 'HOOFDSTUK 03 · DE START', h: 'De start van XINNO', body: [
              'XINNO is opgericht in 2009. Sindsdien adviseert en levert Xinno IT oplossingen voor de advocatuur. Niet geheel zonder reden \u2018de advocatuur\u2019, want de oprichters van XINNO zijn zelf afkomstig van een middelgroot Top 30 advocatenkantoor in Amsterdam. Daar hebben zij van 2000 – 2008 ervaren hoe het is om juridische professionals zo effectief en efficiënt mogelijk te ondersteunen.',
              'Met de combinatie van de kennis van de mensen, de branche specifieke bedrijfsprocessen en het inzicht in innovatieve IT oplossingen voor de advocatuur hebben zij geleerd om communicatief een brug te slaan tussen de IT-er en de advocaat. Dit bleek een absolute meerwaarde te zijn.'
            ]},
            { eb: 'HOOFDSTUK 04 · DE TOEKOMST', h: 'De toekomst van XINNO', body: [
              'XINNO werkt elke dag aan het ontwikkelen van de beste werkplek voor de advocatuur. Dat betekent dat wij non stop investeren in nieuwe technologie, waarbij we de nadruk leggen op IT security oplossingen, om onze klanten elke dag het beste te kunnen bieden. Niet alleen qua technologie, maar ook qua support en ondersteunende dienstverlening door onze collega\u2019s.',
              'In 2021 heeft TSH (onderdeel van Strikwerda Investments) een belang verworven in XINNO. Als onderdeel van TSH is de continuïteit van onze onderneming geborgd, en door de lange termijn investeringsfilosofie van TSH kunnen wij onze klanten en medewerkers de zekerheid bieden dat hun IT-partner de tand des tijds zal kunnen doorstaan.'
            ]},
          ].map((s, i) => (
            <div key={i}>
              <div className="v3-eyebrow">{s.eb}</div>
              <h3 style={{ marginTop: 20, fontSize: 48, marginBottom: 28, letterSpacing: '-0.035em', lineHeight: 1.05 }}>{s.h}</h3>
              {s.body.map((p, k) => (
                <p key={k} style={{ fontSize: 16, marginBottom: 18, lineHeight: 1.6 }}>{p}</p>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* RAMON QUOTE — full bleed editorial */}
      <section style={{ background: '#FF6900', color: '#fff', padding: '180px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div style={{ position: 'absolute', top: -100, right: -200, opacity: 0.18 }}>
          <V3QuoteMark size={600} color="rgba(255,255,255,0.4)" />
        </div>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', display: 'grid', gridTemplateColumns: '0.45fr 0.55fr', gap: 80, alignItems: 'center' }}>
          <PhotoSlot height={620} label="PORTRAIT · Ramon van den Heuvel, Managing Director, Amsterdam, natuurlijk licht, niet geposeerd" corner="FOUNDER · 01" style={{ borderRadius: 2 }} />
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 28, opacity: 0.85 }}>HOOFDSTUK 05 · FOUNDER</div>
            <p style={{ fontSize: 44, fontWeight: 500, lineHeight: 1.2, color: '#fff', letterSpacing: '-0.025em', marginBottom: 48 }}>
              "Wat XINNO anders maakt dan de doorsnee IT-partner is dat wij <span style={{ fontStyle: 'italic' }}>exact weten hoe de processen in de juridische praktijk lopen</span>, en wat belangrijk is voor een advocaat en zijn of haar team. Daar voldoet gewone IT niet, dan wil je IT zonder omkijken."
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <div style={{ width: 56, height: 2, background: '#fff' }} />
              <div>
                <div style={{ fontSize: 20, color: '#fff', fontWeight: 800, letterSpacing: '-0.015em' }}>Ramon van den Heuvel</div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase', letterSpacing: '0.16em', marginTop: 4 }}>Oprichter & Managing Director</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PARTNERS — subtle */}
      <section className="v3-section" style={{ paddingTop: 140, paddingBottom: 140, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="v3-eyebrow">HOOFDSTUK 06 · PARTNERS</div>
          <h2 style={{ marginTop: 24, fontSize: 72, lineHeight: 0.98, letterSpacing: '-0.05em', marginBottom: 60 }}>
            Partners van <span className="v3-gradient">XINNO.</span>
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '1px solid rgba(57,74,88,0.2)', borderBottom: '1px solid rgba(57,74,88,0.2)' }}>
            {PARTNER_LOGOS.map((p, i) => (
              <div key={i} style={{ padding: '64px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: i < 4 ? '1px solid rgba(57,74,88,0.2)' : 0 }}>
                <CustomerLogo {...p} opacity={0.65} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '180px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div className="v3-breath" style={{ top: 100, left: -200 }} />
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="v3-eyebrow">HOOFDSTUK 07 · CONTACT</div>
          <h2 style={{ marginTop: 24, fontSize: 124, lineHeight: 0.92, letterSpacing: '-0.06em', marginBottom: 40, maxWidth: 1100 }}>
            Is uw kantoor ook toe aan<br /><span className="v3-gradient">IT zonder omkijken?</span>
          </h2>
          <p style={{ fontSize: 22, lineHeight: 1.45, color: '#15202a', marginBottom: 48, maxWidth: 720, fontWeight: 400 }}>
            Dan is het tijd om met de specialisten van XINNO te praten. Wij adviseren u welke manier van werken past bij uw kantoor en hoe u klaar bent voor uw digitale toekomst.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
            <V3Magnetic strength={10}>
              <button className="v3-cta v3-cta--orange" style={{ fontSize: 16, padding: '22px 32px' }}>Neem contact op →</button>
            </V3Magnetic>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: '#394A58', letterSpacing: '0.1em' }}>020 242 0800</div>
          </div>
        </div>
      </section>

      <V3Footer />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   V3 — XINNO PRIVATE DESKTOP
────────────────────────────────────────────────────────────── */
function V3PrivateDesktop() {
  return (
    <div className="variant v3" data-variant="3" data-page="private-desktop" data-screen-label="V3 · Private Desktop">
      <div className="v3-scroll-progress" />
      <div className="v3-breath" style={{ top: -200, right: -200 }} />
      <div className="v3-breath v3-breath--2" style={{ top: 1400, left: -300 }} />
      <div className="v3-breath" style={{ top: 3000, right: -400 }} />

      <nav className="v3-nav">
        <XinnoLogo size={28} />
        <div className="v3-nav__links">
          <a style={{ color: '#15202a' }}>Werkplek</a><a>Aanvullingen</a><a>Over ons</a><a>Nieuws</a><a>Contact</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: '#394A58' }}>020 242 0800</span>
          <a style={{ fontSize: 14, color: '#394A58', fontWeight: 500 }}>inloggen</a>
          <button className="v3-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO */}
      <section style={{ position: 'relative', padding: '80px 56px 80px', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 40 }}>
            De online werkplek · Xinno Private Desktop
          </div>

          <div className="v3-eyebrow">XINNO · VLAGGENSCHIP</div>
          <h1 style={{ marginTop: 32, fontSize: 96, lineHeight: 0.96, letterSpacing: '-0.05em', fontWeight: 800, marginBottom: 60 }}>
            Private <span className="v3-gradient">Desktop.</span>
          </h1>

          <div style={{ display: 'grid', gridTemplateColumns: '0.55fr 0.45fr', gap: 80, alignItems: 'start' }}>
            <div>
              <p style={{ fontSize: 24, lineHeight: 1.4, color: '#15202a', marginBottom: 28, fontWeight: 500, letterSpacing: '-0.015em' }}>
                Als advocaat wilt u altijd en overal veilig bij uw dossiers kunnen om uw cliënt bij te staan. Op kantoor, thuis, bij uw cliënt of in de rechtbank; snelle toegang tot uw systemen is de sleutel tot uw succes.
              </p>
              <p style={{ fontSize: 17, marginBottom: 36, maxWidth: 600, lineHeight: 1.6 }}>
                Daarom kiest u voor de <span style={{ color: '#FF6900', fontWeight: 600 }}>XINNO Private Desktop</span>: een veilige online werkplek voor een vast bedrag per maand. Wij zorgen voor de techniek, zodat u zich kunt richten op wat er echt toe doet; recht halen voor uw cliënt.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <V3Magnetic strength={8}><button className="v3-cta v3-cta--orange">Plan kennismaking →</button></V3Magnetic>
                <a style={{ fontSize: 14.5, color: '#15202a', fontWeight: 500, borderBottom: '1px solid #15202a', paddingBottom: 2 }}>Bekijk video</a>
              </div>
            </div>
            <V3Magnetic strength={6}>
              <PhotoSlot height={460} label="PRODUCT VISUAL · XINNO Private Desktop — interface, Nederlands datacenter, abstract gestileerd" corner="PD · 01" style={{ borderRadius: 2 }} />
            </V3Magnetic>
          </div>
        </div>
      </section>

      {/* FEATURES — kinetic typography rows */}
      <section style={{ background: '#0a141c', color: '#fff', padding: '160px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div className="v3-breath" style={{ top: -200, right: -200, background: 'radial-gradient(circle, rgba(255,105,0,0.16) 0%, transparent 60%)' }} />
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="v3-eyebrow" style={{ color: '#FFA100' }}>HOOFDSTUK 02 · WAT KRIJGT U</div>
          <h2 style={{ color: '#fff', marginTop: 24, fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.05em', marginBottom: 64 }}>
            Vier dingen,<br /><span className="v3-gradient">geen omkijken.</span>
          </h2>

          {[
            { n: 'Security is onze #1 prioriteit', b: 'Uw werkplek wordt gehost in een Nederlands datacenter en wordt 24×7 bewaakt door gespecialiseerde security-analysten en technologie.' },
            { n: 'Geen omkijken naar beheer', b: 'XINNO verzorgt het technisch en functioneel beheer van uw IT-omgeving. Geen omkijken meer naar updates en gebruikersondersteuning.' },
            { n: 'Eenvoudig en toegankelijk', b: 'Waar u ook bent, u heeft overal eenvoudig toegang tot uw dossiers, e-mail en applicaties. Nieuwe medewerkers zijn in een handomdraai online.' },
            { n: 'Het plaatje compleet', b: 'De XINNO Private Desktop kan compleet worden gemaakt met alle digitale gemakken die het leven van een advocaat eenvoudiger maken.' },
          ].map((f, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '90px 1fr 1fr 80px',
              gap: 40, padding: '48px 0',
              borderTop: '1px solid rgba(255,255,255,0.12)',
              borderBottom: i === 3 ? '1px solid rgba(255,255,255,0.12)' : 0,
              alignItems: 'center', transition: 'background .4s, padding .4s',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,105,0,0.06)'; e.currentTarget.style.paddingLeft = '24px'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; }}
            >
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 15, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.04em' }}>0{i+1}/04</div>
              <h3 style={{ color: '#fff', fontSize: 44, letterSpacing: '-0.035em', lineHeight: 1.05, fontWeight: 800 }}>{f.n}</h3>
              <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.72)', lineHeight: 1.65, maxWidth: 440 }}>{f.b}</p>
              <div style={{ fontSize: 32, color: '#FF6900', textAlign: 'right', fontWeight: 300 }}>→</div>
            </div>
          ))}
        </div>
      </section>

      {/* SIMPEL MET XINNO — big editorial */}
      <section className="v3-section" style={{ paddingTop: 180, paddingBottom: 100, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="v3-eyebrow">HOOFDSTUK 03 · ONZE BELOFTE</div>
          <h2 style={{ marginTop: 24, fontSize: 140, lineHeight: 0.92, letterSpacing: '-0.065em', marginBottom: 64 }}>
            Maak het<br /><span className="v3-gradient">simpel</span> met XINNO.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: '0.55fr 0.45fr', gap: 80, alignItems: 'start' }}>
            <p style={{ fontSize: 20, lineHeight: 1.55, color: '#15202a', fontWeight: 400 }}>
              IT voor de advocatuur hoeft niet moeilijk te zijn, als u het overlaat aan een specialist. Bij XINNO zit de advocatuur in ons DNA. Al vanaf de oprichting bieden wij de beste online werkplek voor Nederlandse advocaten en hun ondersteuners. Daarom vertrouwen al meer dan 100 advocatenkantoren hun IT aan ons toe.
            </p>
            <div>
              <p style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.15, color: '#15202a', letterSpacing: '-0.025em' }}>
                Geen omkijken meer naar IT,<br /><span className="v3-gradient">dat is onze belofte.</span>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST KLANT-LOGOS — editorial scroll */}
      <section className="v3-section" style={{ paddingTop: 60, paddingBottom: 140, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="v3-eyebrow">HOOFDSTUK 04 · IN GOED GEZELSCHAP</div>
          <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.05em', marginBottom: 24 }}>
            U bent in <span className="v3-italic" style={{ color: '#FF6900' }}>goed gezelschap.</span>
          </h2>
          <p style={{ fontSize: 18, marginBottom: 64, maxWidth: 640 }}>
            XINNO geniet het vertrouwen van vele advocatenkantoren. Zij gingen u voor in de keuze voor IT zonder omkijken.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, borderTop: '1px solid rgba(57,74,88,0.2)', borderBottom: '1px solid rgba(57,74,88,0.2)' }}>
            {KLANT_LOGOS.map((p, i) => (
              <div key={i} style={{ padding: '52px 12px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: i < 6 ? '1px solid rgba(57,74,88,0.2)' : 0, minHeight: 130 }}>
                <CustomerLogo {...p} opacity={0.72} fontSize={Math.min(p.fontSize, 16)} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* EXTRA VEILIG — full bleed dramatic */}
      <section style={{ background: '#FF6900', color: '#fff', padding: '180px 56px', position: 'relative', overflow: 'hidden', zIndex: 1 }}>
        <div style={{ position: 'absolute', top: -100, right: -200, width: 800, height: 400, opacity: 0.2 }}>
          <V3XDiagAnimated color="#fff" height={400} delay={2} />
        </div>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.22em', marginBottom: 28, opacity: 0.85 }}>HOOFDSTUK 05 · MAAK COMPLEET</div>
          <h2 style={{ color: '#fff', fontSize: 156, lineHeight: 0.9, letterSpacing: '-0.07em', marginBottom: 80 }}>
            Extra<br /><span style={{ fontStyle: 'normal', fontWeight: 800 }}>veilig</span> werken.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'start' }}>
            <div>
              <p style={{ color: '#fff', fontSize: 20, lineHeight: 1.55, marginBottom: 24, opacity: 0.94, maxWidth: 580 }}>
                De online werkplekken van XINNO zijn in de basis al bijzonder veilig. De advocatuur stelt hoge eisen aan veiligheid, daarom dat wij standaard de lat al hoger leggen dan de meeste andere MSP's. Maar voor wie veilig nog niet veilig genoeg is, kan er altijd nog een schepje bovenop.
              </p>
              <p style={{ color: '#fff', fontSize: 17, marginBottom: 36, opacity: 0.88, maxWidth: 580, lineHeight: 1.6 }}>
                Zo kunt u ervoor kiezen om uw IT-omgeving 24×7 proactief te laten bewaken door ons SOC-SIEM – vergelijkbaar met uw creditcard maatschappij die verdacht gedrag detecteert en stopt voor het te laat is.
              </p>
              <V3Magnetic strength={8}>
                <button className="v3-cta" style={{ background: '#fff', color: '#FF6900', fontSize: 16, padding: '20px 28px' }}>Bekijk alle security opties →</button>
              </V3Magnetic>
            </div>
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.22em', marginBottom: 24, opacity: 0.85 }}>EXTRA VEILIG MET</div>
              {['Secure MFA', 'Immutable back-up', '24 × 7 SOC-SIEM', 'Aangetekend Mailen'].map((s, i) => (
                <div key={i} style={{ padding: '22px 0', borderBottom: '1px solid rgba(255,255,255,0.25)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 26, color: '#fff', fontWeight: 700, letterSpacing: '-0.02em' }}>{s}</span>
                  <span style={{ fontSize: 22, color: '#fff', opacity: 0.7 }}>→</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ANDERE OPLOSSINGEN */}
      <section className="v3-section" style={{ paddingTop: 160, paddingBottom: 140, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="v3-eyebrow">HOOFDSTUK 06 · ANDERE OPLOSSINGEN</div>
          <h2 style={{ marginTop: 24, fontSize: 56, lineHeight: 0.98, letterSpacing: '-0.05em', marginBottom: 60 }}>
            Niet de juiste pasvorm?
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {[
              { n: 'XINNO 365 Hybrid Desktop', b: 'De unieke werkplek voor de advocatuur waarbij u geniet van digitale vrijheid dankzij het gebruik van een device van uw keuze, met de zekerheid dat al uw data veilig in het Amsterdams datacenter van XINNO blijven staan.' },
              { n: 'XINNO 365 Managed Desktop', b: 'Altijd veilig toegang tot dossiers, applicaties en data met gebruik van de bewezen technologie van Microsoft 365, Microsoft Azure en samenwerkingstools zoals Microsoft Teams in combinatie met de door u gekozen online software.' },
            ].map((p, i) => (
              <V3Magnetic key={i} strength={5}>
                <div className="v3-card" style={{ padding: '44px 40px', minHeight: 320 }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 20 }}>0{i+2} / DESKTOP</div>
                  <h3 style={{ fontSize: 36, marginBottom: 18, letterSpacing: '-0.03em', lineHeight: 1.1 }}>{p.n}</h3>
                  <p style={{ fontSize: 15.5, lineHeight: 1.65, marginBottom: 28 }}>{p.b}</p>
                  <a style={{ fontSize: 15, color: '#FF6900', fontWeight: 600, borderBottom: '1px solid #FF6900', paddingBottom: 2 }}>Meer over {p.n.split(' ').slice(-2).join(' ')} →</a>
                </div>
              </V3Magnetic>
            ))}
          </div>
        </div>
      </section>

      <V3Footer />
    </div>
  );
}

/* V3 FOOTER */
function V3Footer() {
  return (
    <footer className="v3-footer">
      <div className="v3-breath" style={{ top: -100, right: -200, opacity: 0.5 }} />
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr', gap: 56, marginBottom: 72 }}>
          <div>
            <XinnoLogo size={40} variant="white" />
            <p style={{ marginTop: 32, fontSize: 15, color: 'rgba(255,255,255,0.7)', maxWidth: 320, lineHeight: 1.7 }}>
              Buitenveldertselaan 106<br />1081 AB Amsterdam<br /><br />
              <span style={{ color: '#FF6900', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.06em' }}>020 242 0800</span><br />
              sales@xinno.nl<br />servicedesk@xinno.nl
            </p>
          </div>
          <div>
            <h5>Navigatie</h5>
            <ul>
              {['De online werkplek', 'Onmisbare aanvullingen', 'Contact', 'Nieuws', 'Over ons', 'Wat juristen van ons vinden', 'Werken bij XINNO'].map((l, i) => (
                <li key={i} style={{ marginBottom: 8 }}><a>{l}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h5>Overig</h5>
            <ul>
              {['Algemene voorwaarden', 'Privacy statement', 'Klachtenafhandeling'].map((l, i) => (
                <li key={i} style={{ marginBottom: 8 }}><a>{l}</a></li>
              ))}
            </ul>
            <div style={{ marginTop: 32, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              KvK 34332222
            </div>
          </div>
          <div>
            <h5>Nieuwsbrief</h5>
            <p style={{ marginBottom: 20, fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>Inspiratie van XINNO, direct in uw mailbox. Schrijf u nu in voor nieuwsbrief en ontdek alles over ICT zonder omkijken.</p>
            <div style={{ display: 'flex', gap: 0, background: 'rgba(255,255,255,0.06)', borderRadius: 2, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.16)' }}>
              <input placeholder="uw@kantoor.nl" style={{ background: 'transparent', border: 0, padding: '14px 16px', color: '#fff', fontSize: 13.5, flex: 1, outline: 'none', fontFamily: 'inherit' }} />
              <button style={{ background: '#FF6900', border: 0, color: '#fff', padding: '14px 22px', fontWeight: 700, fontSize: 13, letterSpacing: '0.04em' }}>Inschrijven</button>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)', paddingTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.12em', textTransform: 'uppercase' }}>© 2026 XINNO — Onderdeel van TSH</span>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.12em', textTransform: 'uppercase', color: '#FF6900' }}>IT zonder omkijken.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { V3Home, V3About, V3PrivateDesktop });