/* ============================================================
   V3 — Crafted motion (FROM DESIGN CANVAS HANDOFF)
   ONE voice per heading · max 96-104px hero · gradient sparingly
   24-28px radius cards · pill CTAs · Awwwards-level motion
   NO chapter numbers at top · real images where available
============================================================ */

/* Magnetic hover wrapper — element drifts toward cursor */
function V3Magnetic({ children, strength = 10, style = {}, className = '' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const parent = el.parentElement;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / r.width, dy = (e.clientY - cy) / r.height;
      el.style.transform = `translate(${dx * strength}px, ${dy * strength}px)`;
    };
    const onLeave = () => { el.style.transform = 'translate(0, 0)'; };
    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 .4s cubic-bezier(.2,.7,.2,1)', ...style }} className={className}>{children}</div>;
}

/* Tilt parallax — 3D perspective on hover */
function V3Tilt({ children, max = 6, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      el.style.transform = `perspective(1200px) rotateX(${-y * max}deg) rotateY(${x * max}deg)`;
    };
    const onLeave = () => { el.style.transform = 'perspective(1200px) rotateX(0) rotateY(0)'; };
    el.addEventListener('mousemove', onMove); el.addEventListener('mouseleave', onLeave);
    return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); };
  }, [max]);
  return <div ref={ref} style={{ transition: 'transform .55s cubic-bezier(.2,.7,.2,1)', transformStyle: 'preserve-3d', ...style }}>{children}</div>;
}

/* Word-by-word mask reveal — hero headlines */
function V3HeroHeadline({ words, accent, accentIndex, style = {}, size = 96 }) {
  return (
    <h1 style={{ fontSize: size, fontWeight: 900, letterSpacing: '-0.05em', lineHeight: 0.96, color: '#0a141c', margin: 0, ...style }}>
      {words.map((w, i) => (
        <span key={i} className="v3-word-mask" style={{ marginRight: '0.16em' }}>
          <span className="v3-word" style={{ animationDelay: `${0.15 + i * 0.1}s`, color: accent && i === accentIndex ? accent : undefined }}>
            {w}
          </span>
        </span>
      ))}
    </h1>
  );
}

/* Vertical video poster + horizontal lightbox player (Wistia) */
function V3VideoCard({ id, height = 600, label = 'XINNO video', style = {} }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prevOverflow; };
  }, [open]);
  return (
    <>
      <div
        onClick={() => setOpen(true)}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(true); } }}
        style={{ position: 'relative', width: '100%', height, overflow: 'hidden', cursor: 'pointer', borderRadius: 20, background: '#0a141c', display: 'block', ...style }}
        aria-label={`Speel video: ${label}`}
      >
        <img
          src={`https://fast.wistia.com/embed/medias/${id}/swatch`}
          alt={label}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.82)' }}
          loading="lazy"
        />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.28) 100%)' }} />
        <div className="v3-drift" style={{ position: 'absolute', top: 24, right: 24, background: 'rgba(10,20,28,0.94)', backdropFilter: 'blur(10px)', borderRadius: 999, padding: '10px 18px', display: 'flex', alignItems: 'center', gap: 10, color: '#fff' }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF6900' }} />
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 600 }}>Live · 24/7</span>
        </div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 76, height: 76, borderRadius: '50%', background: '#FF6900', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 26, paddingLeft: 5, boxShadow: '0 10px 28px rgba(255,105,0,0.5)' }}>▶</div>
        </div>
      </div>
      {open && (
        <div
          onClick={() => setOpen(false)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(8,12,18,0.92)', backdropFilter: 'blur(10px)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, cursor: 'zoom-out' }}
        >
          <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 1180, aspectRatio: '16 / 9', position: 'relative', borderRadius: 16, overflow: 'hidden', boxShadow: '0 30px 80px rgba(0,0,0,0.6)', cursor: 'default' }}>
            <iframe
              src={`https://fast.wistia.net/embed/iframe/${id}?autoPlay=true`}
              title={label}
              allow="autoplay; fullscreen"
              allowFullScreen
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
            />
          </div>
          <button
            onClick={() => setOpen(false)}
            aria-label="Sluit video"
            style={{ position: 'fixed', top: 24, right: 24, width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.25)', color: '#fff', fontSize: 22, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
          >×</button>
        </div>
      )}
    </>
  );
}

/* Fade-up wrapper with stagger */
function V3FadeUp({ children, delay = 0, style = {}, className = '' }) {
  return <div className={`v3-fade-up ${className}`} style={{ animationDelay: `${delay}s`, ...style }}>{children}</div>;
}

/* Infinite marquee */
function V3Marquee({ items, render }) {
  return (
    <div className="v3-marquee">
      <div className="v3-marquee-track">
        {[...items, ...items].map((it, i) => (
          <div key={i} style={{ flexShrink: 0 }}>{render(it, i)}</div>
        ))}
      </div>
    </div>
  );
}

/* Spotlight that follows cursor inside a section */
function V3Spotlight({ children, style = {}, color = 'rgba(255,105,0,0.16)' }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--sx', `${e.clientX - r.left}px`);
      el.style.setProperty('--sy', `${e.clientY - r.top}px`);
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <div ref={ref} style={{ position: 'relative', '--sx': '50%', '--sy': '50%', ...style }}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(600px circle at var(--sx) var(--sy), ${color}, transparent 50%)`, pointerEvents: 'none', zIndex: 0 }} />
      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
    </div>
  );
}

/* V3 NAV — shared across the three pages */
function V3Nav({ active }) {
  return (
    <nav className="v3-nav">
      <XinnoLogo size={38} />
      <div className="v3-nav__links">
        {MENU_ITEMS.map(m => (
          <a key={m.label} href={m.href} style={active === m.label ? { color: '#15202a' } : undefined}>{m.label}</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>
  );
}

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

      {/* Breathing bg layers */}
      <div className="v3-breath" style={{ top: -300, right: -200 }} />
      <div className="v3-breath v3-breath--2" style={{ top: 1700, left: -300 }} />
      <div className="v3-breath v3-breath--3" style={{ top: 3700, right: -400 }} />

      <V3Nav />

      {/* HERO — clean, ONE style, mask-reveal + soft warm gradient */}
      <section style={{ position: 'relative', padding: '120px 56px 100px', zIndex: 1, background: 'radial-gradient(ellipse 1000px 620px at 86% 22%, rgba(255,160,100,0.28) 0%, rgba(255,210,180,0.14) 36%, transparent 72%), linear-gradient(180deg, #FFF8F0 0%, #FFFDFA 65%, transparent 100%)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center' }}>
          <div>
            <V3FadeUp delay={0.05}>
              <div className="v3-eyebrow" style={{ color: '#9CA7B5' }}>Voor advocaten en notarissen</div>
            </V3FadeUp>
            <div style={{ marginTop: 28, marginBottom: 32 }}>
              <V3HeroHeadline words={['IT', 'zonder', 'omkijken']} size={104} />
            </div>
            <V3FadeUp delay={0.65}>
              <p style={{ fontSize: 20, lineHeight: 1.5, color: '#15202a', marginBottom: 40, fontWeight: 400, maxWidth: 480 }}>
                Dat is werken met de 365 Modern Workplace voor de advocatuur en het notariaat van XINNO.
              </p>
            </V3FadeUp>
            <V3FadeUp delay={0.75} style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <V3Magnetic strength={8}>
                <button className="v3-cta v3-cta--orange">Ontdek de werkplek →</button>
              </V3Magnetic>
              <button className="v3-cta v3-cta--ghost">Plan kennismaking</button>
            </V3FadeUp>
            <V3FadeUp delay={0.85}>
              <div style={{ marginTop: 64, paddingTop: 28, borderTop: '1px solid rgba(57,74,88,0.12)', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
                {[
                  ['17', 'jaar gespecialiseerd'],
                  ['+110', 'aangesloten kantoren'],
                  ['+2600', 'gebruikers'],
                ].map(([n, l], i) => (
                  <div key={i}>
                    <div className="v3-stat-num" style={{ fontSize: 32, fontWeight: 700, color: '#15202a', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 6 }}>{n}</div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#7B8896', textTransform: 'uppercase', letterSpacing: '0.2em' }}>{l}</div>
                  </div>
                ))}
              </div>
            </V3FadeUp>
          </div>
          <V3FadeUp delay={0.45}>
            <V3Tilt max={5}>
              <V3VideoCard id={XINNO_HERO_VIDEO_ID} height={680} label="Maak kennis met XINNO" />
            </V3Tilt>
          </V3FadeUp>
        </div>
      </section>

      {/* KLANT MARQUEE */}
      <section style={{ padding: '40px 0 80px', position: 'relative', zIndex: 1 }}>
        <V3FadeUp delay={0.1} style={{ maxWidth: 1280, margin: '0 auto 32px', padding: '0 56px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.18em' }}>
            <span style={{ flex: 1, height: 1, background: 'rgba(57,74,88,0.2)' }} />
            <span>Vertrouwd door +110 advocatenkantoren</span>
            <span style={{ flex: 1, height: 1, background: 'rgba(57,74,88,0.2)' }} />
          </div>
        </V3FadeUp>
        <V3Marquee
          items={KLANT_LOGOS}
          render={(p, i) => (
            <div style={{ padding: '0 28px', minWidth: 160, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <CustomerLogo {...p} opacity={0.55} fontSize={Math.min(p.fontSize || 18, 18)} maxHeight={32} />
            </div>
          )}
        />
      </section>

      {/* LEDE — editorial asymmetric */}
      <section className="v3-section" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 100, alignItems: 'start' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow">Sinds 2009</div>
            <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 0.98 }}>
              Waar ambitie groeit, groeit XINNO mee.
            </h2>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <div style={{ paddingTop: 24 }}>
              <p style={{ fontSize: 20, lineHeight: 1.5, color: '#15202a', marginBottom: 28 }}>
                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 v3-cta--ghost">Neem contact met ons op →</a>
            </div>
          </V3FadeUp>
        </div>
      </section>

      {/* SERVICES — dark gradient + spotlight + table-row hover */}
      <V3Spotlight style={{ background: 'linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '160px 56px', overflow: 'hidden' }} color="rgba(255,105,0,0.18)">
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow" style={{ color: '#FF6900' }}>Drie modern workplaces</div>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <h2 style={{ color: '#fff', marginTop: 24, fontSize: 84, lineHeight: 0.96, marginBottom: 20 }}>
              Voor iedere situatie<br />een oplossing.
            </h2>
          </V3FadeUp>
          <V3FadeUp delay={0.25}>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.7)', maxWidth: 520, marginBottom: 80 }}>
              De 365 Modern Workplaces van XINNO. Drie werkplekken, één belofte: u zit veilig, overal, zonder omkijken.
            </p>
          </V3FadeUp>

          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {[
              { 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 DC', 'Vast bedrag/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) => (
              <V3FadeUp key={i} delay={0.35 + i * 0.12}>
                <a style={{
                  display: 'grid', gridTemplateColumns: '90px 0.55fr 0.45fr 1fr 60px',
                  gap: 32, padding: '44px 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 .5s cubic-bezier(.2,.7,.2,1), padding-left .5s', cursor: 'pointer', borderRadius: 24,
                }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,105,0,0.05)'; e.currentTarget.style.paddingLeft = '20px'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; }}
                >
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.04em' }}>0{i + 1} / 03</div>
                  <h3 style={{ color: '#fff', fontSize: 30, letterSpacing: '-0.025em', lineHeight: 1.1, fontWeight: 700 }}>{s.n}</h3>
                  <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', 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: '#FF6900', padding: '6px 12px', border: '1px solid rgba(255,105,0,0.35)', borderRadius: 999, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t}</span>
                    ))}
                  </div>
                  <div style={{ fontSize: 26, color: '#FF6900', textAlign: 'right', fontWeight: 300 }}>→</div>
                </a>
              </V3FadeUp>
            ))}
          </div>
        </div>
      </V3Spotlight>

      {/* EDITORIAL PHOTO SPLIT + numbered places */}
      <section className="v3-section" style={{ position: 'relative', zIndex: 1, paddingTop: 160, paddingBottom: 120 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.55fr 0.45fr', gap: 80, alignItems: 'center' }}>
          <V3FadeUp delay={0.05}>
            <V3Tilt max={4}>
              <div style={{ borderRadius: 20, overflow: "hidden", position: "relative" }}>
                <img src="images/feature-2.jpg" alt="Juriste werkt op laptop" style={{ width: '100%', height: 620, objectFit: 'cover', display: 'block' }} />
                <div style={{ position: 'absolute', top: 18, left: 18, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.18em', textTransform: 'uppercase', background: 'rgba(10,20,28,0.7)', padding: '6px 10px', borderRadius: 4 }}>
                  Editorial
                </div>
              </div>
            </V3Tilt>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <div>
              <div className="v3-eyebrow">In beeld</div>
              <h2 style={{ marginTop: 24, fontSize: 72, lineHeight: 0.96, marginBottom: 36 }}>
                Iedereen, overal, zorgeloos.
              </h2>
              <p style={{ fontSize: 18, lineHeight: 1.55, marginBottom: 36, maxWidth: 480 }}>
                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: 0 }}>
                {['Op kantoor', 'Vanaf huis', 'Bij de cliënt', 'In de rechtbank'].map((s, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 20, padding: '16px 0', borderBottom: '1px solid rgba(57,74,88,0.12)', cursor: 'pointer', transition: 'padding-left .35s cubic-bezier(.2,.7,.2,1)' }}
                    onMouseEnter={e => { e.currentTarget.style.paddingLeft = '14px'; }}
                    onMouseLeave={e => { e.currentTarget.style.paddingLeft = '0'; }}
                  >
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', letterSpacing: '0.18em' }}>0{i + 1}</span>
                    <span style={{ fontSize: 22, color: '#15202a', fontWeight: 500, letterSpacing: '-0.015em' }}>{s}</span>
                  </div>
                ))}
              </div>
            </div>
          </V3FadeUp>
        </div>
      </section>

      {/* NIEUWS */}
      <section className="v3-section" style={{ paddingTop: 100, paddingBottom: 140, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V3FadeUp delay={0.05}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 56 }}>
              <div>
                <div className="v3-eyebrow">Nieuws & actueel</div>
                <h2 style={{ marginTop: 20, fontSize: 72, lineHeight: 1.0 }}>Nieuws & actueel.</h2>
              </div>
              <a className="v3-cta v3-cta--ghost">Naar nieuwsarchief →</a>
            </div>
          </V3FadeUp>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28 }}>
            <V3FadeUp delay={0.15}>
              <V3Tilt max={3}>
                <article style={{ background: '#fff', border: '1px solid rgba(57,74,88,0.06)', borderRadius: 28, overflow: 'hidden', cursor: 'pointer', transition: 'border-color .4s' }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,105,0,0.4)'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(57,74,88,0.06)'; }}
                >
                  <div style={{ position: 'relative' }}>
                    <img src="images/news-fd-special.jpg" alt="FD-special interview" style={{ width: '100%', height: 360, objectFit: 'cover', display: 'block' }} />
                    <div style={{ position: 'absolute', top: 18, left: 18, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.18em', textTransform: 'uppercase', background: 'rgba(10,20,28,0.7)', padding: '6px 10px', borderRadius: 4 }}>
                      FD · 03/2026
                    </div>
                  </div>
                  <div style={{ padding: '32px 36px 36px' }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 16 }}>FD-special · 5 min read</div>
                    <h3 style={{ fontSize: 32, marginBottom: 16, lineHeight: 1.12 }}>De brug slaan tussen IT en advocatuur</h3>
                    <p style={{ fontSize: 16, marginBottom: 24, 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>
                    <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Lees verder →</a>
                  </div>
                </article>
              </V3Tilt>
            </V3FadeUp>
            <V3FadeUp delay={0.25}>
              <article style={{ background: '#fff', border: '1px solid rgba(57,74,88,0.06)', borderRadius: 28, overflow: 'hidden', cursor: 'pointer', display: 'flex', flexDirection: 'column', height: '100%', transition: 'border-color .4s, transform .5s cubic-bezier(.2,.7,.2,1)' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,105,0,0.4)'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(57,74,88,0.06)'; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                <div style={{ position: 'relative' }}>
                  <img src="images/news-brande-verheij.jpg" alt="Brande & Verheij" style={{ width: '100%', height: 220, objectFit: 'cover', display: 'block' }} />
                  <div style={{ position: 'absolute', top: 16, left: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.18em', textTransform: 'uppercase', background: 'rgba(10,20,28,0.7)', padding: '5px 9px', borderRadius: 4 }}>
                    Case
                  </div>
                </div>
                <div style={{ padding: '28px 32px 32px', flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 14 }}>Case · 3 min read</div>
                  <h4 style={{ fontSize: 24, lineHeight: 1.18, marginBottom: 14 }}>Brande & Verheij LLP werkt sneller en veiliger</h4>
                  <p style={{ fontSize: 14.5, lineHeight: 1.6, marginBottom: 24, flexGrow: 1 }}>
                    Sinds de oprichting in mei 2019 vertrouwt Brande & Verheij LLP, een Rotterdams advocatenkantoor gespecialiseerd in burgerlijk recht en procesrecht, op XINNO [...]
                  </p>
                  <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Lees verder →</a>
                </div>
              </article>
            </V3FadeUp>
          </div>
        </div>
      </section>

      {/* TESTIMONIAL — DARK with spotlight */}
      <V3Spotlight style={{ background: 'linear-gradient(180deg, #0a141c 0%, #15202a 50%, #0a141c 100%)', color: '#fff', padding: '200px 56px', overflow: 'hidden' }} color="rgba(255,105,0,0.20)">
        <div className="v3-breath" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 1100, height: 1100, background: 'radial-gradient(circle, rgba(255,105,0,0.18) 0%, transparent 50%)' }} />
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow" style={{ color: '#FF6900' }}>Wat juristen van ons vinden</div>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <p style={{ fontSize: 52, lineHeight: 1.2, color: '#fff', fontWeight: 500, letterSpacing: '-0.03em', marginTop: 32, marginBottom: 64 }}>
              "…ze gaan mee in de ontwikkelingen en lopen daarin voorop. Dat is denk ik <span className="v3-gradient">de kracht van Xinno.</span>"
            </p>
          </V3FadeUp>
          <V3FadeUp delay={0.3}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 80 }}>
              <div style={{ width: 40, height: 2, background: '#FF6900' }} />
              <img src="images/SOLV-LOGO-KLEUR-MEDIUM.png" alt="SOLV Advocaten" style={{ height: 28, filter: 'brightness(0) invert(1)', opacity: 0.92 }} />
            </div>
          </V3FadeUp>
          {/* secondary quotes */}
          <V3FadeUp delay={0.4}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, paddingTop: 56, borderTop: '1px solid rgba(255,255,255,0.14)' }}>
              {[
                { logo: 'images/logo_six.png', name: 'SIX Advocaten', q: 'Ze snappen echt wat het vak inhoudt en wat je nodig hebt als advocaat. XINNO regelt het.' },
                { logo: 'images/Parker-10-jaar-jubileum-logo-1000px.webp', name: '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.5, color: 'rgba(255,255,255,0.88)', marginBottom: 20, fontWeight: 400 }}>"{t.q}"</p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ width: 24, height: 1.5, background: '#FF6900' }} />
                    <img src={t.logo} alt={t.name} style={{ height: 24, filter: 'brightness(0) invert(1)', opacity: 0.85 }} />
                  </div>
                </div>
              ))}
            </div>
          </V3FadeUp>
        </div>
      </V3Spotlight>

      {/* 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' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow">Contact</div>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <h2 style={{ marginTop: 28, fontSize: 100, lineHeight: 0.95, marginBottom: 40 }}>
              Klaar voor uw <span className="v3-gradient">digitale toekomst?</span>
            </h2>
          </V3FadeUp>
          <V3FadeUp delay={0.25}>
            <p style={{ fontSize: 20, lineHeight: 1.5, color: '#15202a', marginBottom: 48, maxWidth: 660, 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>
          </V3FadeUp>
          <V3FadeUp delay={0.35} style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
            <V3Magnetic strength={10}>
              <button className="v3-cta v3-cta--orange" style={{ fontSize: 16, padding: '20px 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>
          </V3FadeUp>
        </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: -300, right: -200 }} />
      <div className="v3-breath v3-breath--2" style={{ top: 1800, left: -300 }} />

      <V3Nav active="Over ons" />

      {/* HERO — soft warm gradient backdrop */}
      <section style={{ position: 'relative', padding: '120px 56px 100px', zIndex: 1, background: 'radial-gradient(ellipse 1000px 620px at 86% 22%, rgba(255,160,100,0.28) 0%, rgba(255,210,180,0.14) 36%, transparent 72%), linear-gradient(180deg, #FFF8F0 0%, #FFFDFA 65%, transparent 100%)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 80, alignItems: 'center' }}>
          <div>
            <V3FadeUp delay={0.05}><div className="v3-eyebrow" style={{ color: '#9CA7B5' }}>Over XINNO</div></V3FadeUp>
            <div style={{ marginTop: 28, marginBottom: 36 }}>
              <V3HeroHeadline words={['Een', 'visie', 'apart.']} size={104} />
            </div>
            <V3FadeUp delay={0.6}>
              <p style={{ fontSize: 22, lineHeight: 1.4, color: '#15202a', marginBottom: 36, fontWeight: 400, maxWidth: 480 }}>
                Wie zijn we, en waar gaan we naar toe? Dit is de visie onze op ICT voor de advocatuur.
              </p>
            </V3FadeUp>
            <V3FadeUp delay={0.7}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#394A58', letterSpacing: '0.14em', textTransform: 'uppercase', lineHeight: 1.7 }}>
                <div style={{ color: '#9CA7B5', marginBottom: 6 }}>Est.</div>
                <div>23 maart 2009 · Amsterdam, NL</div>
                <div>17 jaar geleden</div>
              </div>
            </V3FadeUp>
          </div>
          <V3FadeUp delay={0.4}>
            <V3Tilt max={5}>
              <div style={{ borderRadius: 20, overflow: "hidden", position: "relative" }}>
                <img src="images/about-hero-office.jpg" alt="XINNO kantoor Amsterdam" style={{ width: '100%', height: 620, objectFit: 'cover', display: 'block' }} />
                <div className="v3-drift" style={{ position: 'absolute', top: 24, right: 24, background: 'rgba(10,20,28,0.94)', backdropFilter: 'blur(10px)', borderRadius: 999, padding: '10px 18px', display: 'flex', alignItems: 'center', gap: 10, color: '#fff' }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF6900' }} />
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 600 }}>HQ · Amsterdam</span>
                </div>
              </div>
            </V3Tilt>
          </V3FadeUp>
        </div>
      </section>

      {/* INTRO */}
      <section className="v3-section" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 100, alignItems: 'start' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow">De basis</div>
            <h2 style={{ marginTop: 24, fontSize: 56, lineHeight: 1.04 }}>
              IT die past bij het juridisch werkproces.
            </h2>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <div>
              <p style={{ fontSize: 20, lineHeight: 1.5, color: '#15202a', marginBottom: 28 }}>
                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>
          </V3FadeUp>
        </div>
      </section>

      {/* TIMELINE — dark with spotlight */}
      <V3Spotlight style={{ background: 'linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '160px 56px', overflow: 'hidden' }} color="rgba(255,105,0,0.18)">
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow" style={{ color: '#FF6900' }}>Van bierviltje tot 2600 gebruikers</div>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <h2 style={{ color: '#fff', marginTop: 24, fontSize: 72, lineHeight: 0.98, marginBottom: 80 }}>
              Drie momenten, één verhaal.
            </h2>
          </V3FadeUp>

          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', left: '5%', right: '5%', top: 9, height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,105,0,0.5), rgba(255,105,0,0.5), transparent)', zIndex: 0 }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
              {[
                { y: '2006', t: 'Idee op een 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: 'XINNO sluit zich aan bij TSH', b: '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) => (
                <V3FadeUp key={i} delay={0.25 + i * 0.12}>
                  <V3Magnetic strength={6}>
                    <div style={{ position: 'relative' }}>
                      <div style={{ width: 18, height: 18, borderRadius: '50%', background: '#FF6900', marginBottom: 40, boxShadow: '0 0 0 6px rgba(255,105,0,0.18)' }} />
                      <div style={{ fontSize: 88, fontWeight: 700, color: '#FF6900', lineHeight: 0.92, letterSpacing: '-0.05em', marginBottom: 24 }}>{e.y}</div>
                      <h4 style={{ color: '#fff', fontSize: 24, marginBottom: 16, fontWeight: 700, letterSpacing: '-0.025em' }}>{e.t}</h4>
                      <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14.5, lineHeight: 1.65 }}>{e.b}</p>
                    </div>
                  </V3Magnetic>
                </V3FadeUp>
              ))}
            </div>
          </div>
        </div>
      </V3Spotlight>

      {/* START + TOEKOMST */}
      <section className="v3-section" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          {[
            { eb: '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 ‘de advocatuur’, 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: '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’s.',
              '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) => (
            <V3FadeUp key={i} delay={0.05 + i * 0.1}>
              <div className="v3-eyebrow">{s.eb}</div>
              <h3 style={{ marginTop: 20, fontSize: 40, marginBottom: 24, letterSpacing: '-0.03em', lineHeight: 1.08, fontWeight: 700 }}>{s.h}</h3>
              {s.body.map((p, k) => (
                <p key={k} style={{ fontSize: 16, marginBottom: 18, lineHeight: 1.6 }}>{p}</p>
              ))}
            </V3FadeUp>
          ))}
        </div>
      </section>

      {/* RAMON QUOTE — full-bleed dark with gradient */}
      <V3Spotlight style={{ background: 'linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '180px 56px', overflow: 'hidden' }} color="rgba(255,105,0,0.2)">
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.45fr 0.55fr', gap: 80, alignItems: 'center' }}>
          <V3FadeUp delay={0.05}>
            <V3Tilt max={4}>
              <div style={{ borderRadius: 20, overflow: "hidden", position: "relative" }}>
                <img src="images/ramon-vandenheuvel.jpg" alt="Ramon van den Heuvel" style={{ width: '100%', height: 620, objectFit: 'cover', display: 'block' }} />
                <div style={{ position: 'absolute', bottom: 18, left: 18, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.18em', textTransform: 'uppercase', background: 'rgba(10,20,28,0.7)', padding: '6px 10px', borderRadius: 4 }}>
                  Founder
                </div>
              </div>
            </V3Tilt>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <div>
              <div className="v3-eyebrow" style={{ color: '#FF6900' }}>Founder · Managing Director</div>
              <p style={{ fontSize: 36, fontWeight: 500, lineHeight: 1.25, color: '#fff', letterSpacing: '-0.025em', marginTop: 28, marginBottom: 48 }}>
                "Wat XINNO anders maakt dan de doorsnee IT-partner is dat wij exact weten hoe de processen in de juridische praktijk lopen, en wat belangrijk is voor een advocaat en zijn of haar team. Daar voldoet gewone IT niet, dan wil je <span className="v3-gradient">IT zonder omkijken.</span>"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{ width: 56, height: 2, background: '#FF6900' }} />
                <div>
                  <div style={{ fontSize: 18, color: '#fff', fontWeight: 700 }}>Ramon van den Heuvel</div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: '0.16em', marginTop: 4 }}>Oprichter & Managing Director</div>
                </div>
              </div>
            </div>
          </V3FadeUp>
        </div>
      </V3Spotlight>

      {/* PARTNERS */}
      <section className="v3-section" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow">Partners van XINNO</div>
            <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 1.0, marginBottom: 56 }}>
              Partners van XINNO.
            </h2>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
              {PARTNER_LOGOS.map((p, i) => (
                <V3Magnetic key={i} strength={5}>
                  <div style={{ height: 160, padding: '20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fff', border: '1px solid rgba(57,74,88,0.08)', borderRadius: 20, transition: 'border-color .4s, transform .5s cubic-bezier(.2,.7,.2,1)' }}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,105,0,0.4)'; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(57,74,88,0.08)'; }}
                  >
                    {p.src ? (
                      <img src={p.src} alt={p.name} style={{ height: 64, maxWidth: '92%', width: 'auto', objectFit: 'contain', opacity: 0.8 }} />
                    ) : (
                      <CustomerLogo {...p} opacity={0.8} fontSize={24} />
                    )}
                  </div>
                </V3Magnetic>
              ))}
            </div>
          </V3FadeUp>
        </div>
      </section>

      {/* CTA */}
      <section style={{ 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' }}>
          <V3FadeUp delay={0.05}><div className="v3-eyebrow">Contact</div></V3FadeUp>
          <V3FadeUp delay={0.15}>
            <h2 style={{ marginTop: 28, fontSize: 84, lineHeight: 0.96, marginBottom: 40, maxWidth: 1000 }}>
              Is uw kantoor ook toe aan <span className="v3-gradient">IT zonder omkijken?</span>
            </h2>
          </V3FadeUp>
          <V3FadeUp delay={0.25}>
            <p style={{ fontSize: 20, lineHeight: 1.5, color: '#15202a', marginBottom: 48, maxWidth: 660 }}>
              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>
          </V3FadeUp>
          <V3FadeUp delay={0.35} style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
            <V3Magnetic strength={10}>
              <button className="v3-cta v3-cta--orange" style={{ fontSize: 16, padding: '20px 32px' }}>Neem contact op →</button>
            </V3Magnetic>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: '#394A58', letterSpacing: '0.1em' }}>020 242 0800</div>
          </V3FadeUp>
        </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: -300, right: -200 }} />
      <div className="v3-breath v3-breath--2" style={{ top: 1700, left: -300 }} />

      <V3Nav active="De online werkplek" />

      {/* HERO — soft warm gradient backdrop */}
      <section style={{ position: 'relative', padding: '100px 56px 100px', zIndex: 1, background: 'radial-gradient(ellipse 1000px 620px at 86% 22%, rgba(255,160,100,0.28) 0%, rgba(255,210,180,0.14) 36%, transparent 72%), linear-gradient(180deg, #FFF8F0 0%, #FFFDFA 65%, transparent 100%)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'center' }}>
          <div>
            <V3FadeUp delay={0.05}><div className="v3-eyebrow" style={{ color: '#9CA7B5' }}>XINNO · ons vlaggenschip</div></V3FadeUp>
            <div style={{ marginTop: 28, marginBottom: 36 }}>
              <V3HeroHeadline words={['Private', 'Desktop.']} size={104} />
            </div>
            <V3FadeUp delay={0.55}>
              <p style={{ fontSize: 20, lineHeight: 1.5, color: '#15202a', marginBottom: 24, fontWeight: 400, maxWidth: 580 }}>
                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>
            </V3FadeUp>
            <V3FadeUp delay={0.65}>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: '#3a4754', marginBottom: 36, maxWidth: 580 }}>
                Daarom kiest u voor de XINNO Private Desktop: 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>
            </V3FadeUp>
            <V3FadeUp delay={0.75} style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <V3Magnetic strength={8}>
                <button className="v3-cta v3-cta--orange">Plan kennismaking →</button>
              </V3Magnetic>
              <button className="v3-cta v3-cta--ghost">Bekijk video</button>
            </V3FadeUp>
          </div>
          <V3FadeUp delay={0.4}>
            <V3Tilt max={6}>
              <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden' }}>
                <img src="images/feature-2.jpg" alt="Veilig werken vanaf elk apparaat" style={{ width: '100%', height: 580, objectFit: 'cover', display: 'block' }} />
                <div className="v3-drift" style={{ position: 'absolute', top: 24, right: 24, background: 'rgba(10,20,28,0.94)', backdropFilter: 'blur(10px)', borderRadius: 999, padding: '10px 18px', display: 'flex', alignItems: 'center', gap: 10, color: '#fff' }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF6900' }} />
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 600 }}>Private Desktop</span>
                </div>
              </div>
            </V3Tilt>
          </V3FadeUp>
        </div>
      </section>

      {/* FEATURES — dark gradient with kinetic rows */}
      <V3Spotlight style={{ background: 'linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '160px 56px', overflow: 'hidden' }} color="rgba(255,105,0,0.2)">
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow" style={{ color: '#FF6900' }}>Wat krijgt u</div>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <h2 style={{ color: '#fff', marginTop: 24, fontSize: 84, lineHeight: 0.96, marginBottom: 80 }}>
              Vier dingen, geen omkijken.
            </h2>
          </V3FadeUp>

          {[
            { 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) => (
            <V3FadeUp key={i} delay={0.25 + i * 0.1}>
              <div style={{
                display: 'grid', gridTemplateColumns: '90px 1fr 1fr 80px',
                gap: 40, padding: '44px 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 .5s cubic-bezier(.2,.7,.2,1), padding-left .5s', cursor: 'pointer', borderRadius: 24,
              }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,105,0,0.05)'; e.currentTarget.style.paddingLeft = '20px'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; }}
              >
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.04em' }}>0{i + 1} / 04</div>
                <h3 style={{ color: '#fff', fontSize: 36, letterSpacing: '-0.03em', lineHeight: 1.08, fontWeight: 700 }}>{f.n}</h3>
                <p style={{ fontSize: 15.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, maxWidth: 440 }}>{f.b}</p>
                <div style={{ fontSize: 28, color: '#FF6900', textAlign: 'right', fontWeight: 300 }}>→</div>
              </div>
            </V3FadeUp>
          ))}
        </div>
      </V3Spotlight>

      {/* SIMPEL */}
      <section className="v3-section" style={{ paddingTop: 160, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow">Onze belofte</div>
            <h2 style={{ marginTop: 24, fontSize: 84, lineHeight: 0.96, marginBottom: 56 }}>
              Maak het simpel met XINNO.
            </h2>
          </V3FadeUp>
          <V3FadeUp delay={0.15}>
            <div style={{ display: 'grid', gridTemplateColumns: '0.55fr 0.45fr', gap: 80, alignItems: 'start' }}>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: '#15202a' }}>
                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: 32, fontWeight: 600, lineHeight: 1.2, color: '#15202a', letterSpacing: '-0.025em' }}>
                  Geen omkijken meer naar IT, dat is <span className="v3-gradient">onze belofte.</span>
                </p>
              </div>
            </div>
          </V3FadeUp>
        </div>
      </section>

      {/* TRUST KLANT-LOGOS — marquee */}
      <section className="v3-section" style={{ paddingTop: 80, position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 0 48px' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow">U bent in goed gezelschap</div>
            <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 1.0, marginBottom: 20 }}>
              U bent in goed gezelschap.
            </h2>
            <p style={{ fontSize: 17, maxWidth: 600 }}>
              XINNO geniet het vertrouwen van vele advocatenkantoren. Zij gingen u voor in de keuze voor IT zonder omkijken.
            </p>
          </V3FadeUp>
        </div>
        <V3Marquee
          items={KLANT_LOGOS}
          render={(p, i) => (
            <div style={{ padding: '0 28px', minWidth: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <CustomerLogo {...p} opacity={0.6} fontSize={Math.min(p.fontSize || 20, 20)} maxHeight={36} />
            </div>
          )}
        />
      </section>

      {/* EXTRA VEILIG — dark card */}
      <section style={{ padding: '160px 56px', position: 'relative', zIndex: 1 }}>
        <V3FadeUp delay={0.05}>
          <div style={{ maxWidth: 1280, margin: '0 auto', background: 'linear-gradient(180deg, #0a141c 0%, #15202a 100%)', borderRadius: 32, padding: '80px 64px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
            <V3Spotlight color="rgba(255,105,0,0.18)" style={{ margin: '-80px -64px', padding: '80px 64px', borderRadius: 32 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 80, alignItems: 'start' }}>
                <div>
                  <div className="v3-eyebrow" style={{ color: '#FF6900' }}>Maak uw werkplek compleet</div>
                  <h2 style={{ color: '#fff', marginTop: 24, fontSize: 64, lineHeight: 1.0, marginBottom: 28 }}>
                    Extra veilig werken.
                  </h2>
                  <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 17, marginBottom: 20, maxWidth: 560, lineHeight: 1.55 }}>
                    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.
                  </p>
                  <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 16, marginBottom: 36, maxWidth: 560, lineHeight: 1.55 }}>
                    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 v3-cta--orange">Bekijk alle security opties →</button>
                  </V3Magnetic>
                </div>
                <div>
                  <div className="v3-eyebrow" style={{ color: 'rgba(255,255,255,0.5)' }}>Extra veilig met</div>
                  <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0' }}>
                    {['Secure MFA', 'Immutable back-up', '24 × 7 SOC-SIEM', 'Aangetekend Mailen'].map((s, i) => (
                      <li key={i} style={{ padding: '22px 0', borderBottom: '1px solid rgba(255,255,255,0.14)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', transition: 'padding-left .35s cubic-bezier(.2,.7,.2,1)' }}
                        onMouseEnter={e => { e.currentTarget.style.paddingLeft = '14px'; }}
                        onMouseLeave={e => { e.currentTarget.style.paddingLeft = '0'; }}
                      >
                        <span style={{ fontSize: 20, color: '#fff', fontWeight: 600, letterSpacing: '-0.015em' }}>{s}</span>
                        <span style={{ fontSize: 18, color: '#FF6900' }}>→</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </V3Spotlight>
          </div>
        </V3FadeUp>
      </section>

      {/* ANDERE OPLOSSINGEN */}
      <section className="v3-section" style={{ position: 'relative', zIndex: 1, paddingTop: 180, paddingBottom: 80 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V3FadeUp delay={0.05}>
            <div className="v3-eyebrow">Onze andere oplossingen</div>
            <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 1.0, marginBottom: 56 }}>
              Niet de juiste pasvorm?
            </h2>
          </V3FadeUp>
          <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.',
                icon: (
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#FF6900" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M18 10a6 6 0 0 0-11.5-2A5 5 0 0 0 7 18h11a4 4 0 0 0 0-8z" />
                  </svg>
                ),
              },
              {
                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.',
                icon: (
                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#FF6900" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="2" y="3" width="20" height="14" rx="2" />
                    <line x1="8" y1="21" x2="16" y2="21" />
                    <line x1="12" y1="17" x2="12" y2="21" />
                  </svg>
                ),
              },
            ].map((p, i) => (
              <V3FadeUp key={i} delay={0.15 + i * 0.1}>
                <V3Magnetic strength={4}>
                  <div className="v3-card">
                    <div style={{ width: 64, height: 64, borderRadius: 16, background: 'rgba(255,105,0,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
                      {p.icon}
                    </div>
                    <h3 style={{ fontSize: 32, marginBottom: 18, letterSpacing: '-0.03em', lineHeight: 1.12 }}>{p.n}</h3>
                    <p style={{ fontSize: 15.5, lineHeight: 1.65, marginBottom: 28 }}>{p.b}</p>
                    <a style={{ fontSize: 15, color: '#FF6900', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Meer over {p.n.split(' ').slice(-2).join(' ')} →</a>
                  </div>
                </V3Magnetic>
              </V3FadeUp>
            ))}
          </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: 64 }}>
          <div>
            <XinnoLogo size={38} variant="white" />
            <p style={{ marginTop: 28, fontSize: 14.5, 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 style={{ marginTop: 32, display: 'flex', gap: 14, alignItems: 'center' }}>
              <img src="images/badge-iso-27001.jpg" alt="ISO 27001" style={{ height: 48, width: 'auto', background: '#fff', padding: 4, borderRadius: 4 }} />
              <img src="images/badge-ict-waarborg.png" alt="ICT Waarborg" style={{ height: 32, width: 'auto', filter: 'brightness(0) invert(1)', opacity: 0.85 }} />
            </div>
          </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 onze nieuwsbrief.</p>
            <div style={{ display: 'flex', background: 'rgba(255,255,255,0.06)', borderRadius: 999, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.16)', padding: 4 }}>
              <input placeholder="uw@kantoor.nl" style={{ background: 'transparent', border: 0, padding: '12px 18px', color: '#fff', fontSize: 13.5, flex: 1, outline: 'none', fontFamily: 'inherit' }} />
              <button style={{ background: '#FF6900', border: 0, color: '#fff', padding: '12px 22px', fontWeight: 700, fontSize: 13, borderRadius: 999 }}>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 });