/* ============================================================
   V2 — Editorial bold (Ramp/Vercel/Neon vibe)
   Inter 900 display 64-96-120 · Inter 400 body 16-17
   X-diagonal PROMINENT · oranje accent strips · asymmetric grid
   120px padding · 4-8px radius · subtle scroll-reveals
   Hero: abstract X-diagonal + grote typografie, foto klein accent
   Icons: solid filled met oranje accent stroke
============================================================ */

/* Solid filled icons with brand accent */
function V2Icon({ name, size = 28, fill = '#FF6900', accent = '#394A58' }) {
  const w = size;
  const common = { width: w, height: w, viewBox: '0 0 32 32', xmlns: 'http://www.w3.org/2000/svg' };
  const shapes = {
    shield: <><path d="M16 2L4 6v10c0 7.2 5.1 12.6 12 14 6.9-1.4 12-6.8 12-14V6L16 2z" fill={fill}/><path d="M11 16l3 3 7-7" stroke="#fff" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    server: <><rect x="4" y="6" width="24" height="8" rx="1" fill={accent}/><rect x="4" y="18" width="24" height="8" rx="1" fill={fill}/><circle cx="8" cy="10" r="1.2" fill="#fff"/><circle cx="8" cy="22" r="1.2" fill="#fff"/></>,
    cloud: <><path d="M23 13a7 7 0 0 0-13.4-2A6 6 0 0 0 9 23h14a5 5 0 0 0 0-10z" fill={fill}/></>,
    settings: <><circle cx="16" cy="16" r="14" fill={accent}/><circle cx="16" cy="16" r="5" fill={fill}/><circle cx="16" cy="16" r="2" fill="#fff"/></>,
    lock: <><rect x="6" y="14" width="20" height="14" rx="2" fill={fill}/><path d="M10 14V9a6 6 0 0 1 12 0v5" stroke={accent} strokeWidth="3" fill="none" strokeLinecap="round"/><circle cx="16" cy="21" r="2" fill="#fff"/></>,
    monitor: <><rect x="2" y="4" width="28" height="20" rx="2" fill={accent}/><rect x="6" y="8" width="20" height="12" rx="1" fill={fill}/><line x1="12" y1="28" x2="20" y2="28" stroke={accent} strokeWidth="3"/></>,
    users: <><circle cx="12" cy="11" r="5" fill={fill}/><path d="M3 26c0-5 4-9 9-9s9 4 9 9" fill={fill}/><circle cx="22" cy="13" r="4" fill={accent} opacity="0.4"/><path d="M19 26c0-4 2.5-7 6-7s6 3 6 7" fill={accent} opacity="0.4"/></>,
    map: <><polygon points="2 8 2 28 11 24 21 28 30 24 30 4 21 8 11 4 2 8" fill={accent}/><polygon points="11 4 11 24 21 28 21 8" fill={fill}/></>,
    play: <><circle cx="16" cy="16" r="14" fill={fill}/><polygon points="13 10 23 16 13 22" fill="#fff"/></>,
    check: <><circle cx="16" cy="16" r="14" fill={fill}/><polyline points="10 17 14 21 22 12" stroke="#fff" strokeWidth="2.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
    arrow: <><line x1="6" y1="16" x2="26" y2="16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><polyline points="18 8 26 16 18 24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></>,
  };
  return <svg {...common}>{shapes[name] || null}</svg>;
}

/* Big X-diagonal hero band */
function V2XDiagBand({ color = '#FF6900', height = 220, opacity = 1, style = {} }) {
  return (
    <svg viewBox="0 0 100 60" preserveAspectRatio="none" style={{ display: 'block', width: '100%', height, opacity, ...style }}>
      <polygon points="0,0 70,0 100,30 70,60 0,60" fill={color} />
    </svg>
  );
}

/* ──────────────────────────────────────────────────────────────
   V2 HOMEPAGE
────────────────────────────────────────────────────────────── */
function V2Home() {
  return (
    <div className="variant v2" data-variant="2" data-page="home" data-screen-label="V2 · Homepage">

      {/* NAV */}
      <nav className="v2-nav">
        <XinnoLogo size={28} />
        <div className="v2-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="v2-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO — clean split with single subtle X-diagonal */}
      <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 80, paddingBottom: 0, background: 'linear-gradient(180deg, #fafaf7 0%, #f5f3ee 100%)' }}>
        {/* Subtle X-diagonal accent — oranje, far top-right, low opacity */}
        <div style={{ position: 'absolute', top: 0, right: -200, width: 480, height: 240, opacity: 0.08, pointerEvents: 'none' }}>
          <V2XDiagBand color="#FF6900" height={240} />
        </div>

        <div style={{ position: 'relative', padding: '0 56px', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center', paddingTop: 60, paddingBottom: 80 }}>
            <div>
              <div className="v2-eyebrow">SINDS 2009 · IT VOOR DE ADVOCATUUR</div>
              <h1 className="is-large" style={{ marginTop: 24, fontSize: 96, lineHeight: 0.96, fontWeight: 900 }}>
                IT zonder<br /><span style={{ color: '#FF6900', letterSpacing: '-0.05em' }}>omkijken.</span>
              </h1>
              <p style={{ marginTop: 32, fontSize: 21, lineHeight: 1.5, color: '#15202a', marginBottom: 36, fontWeight: 400, maxWidth: 540 }}>
                Dat is werken met de 365 Modern Workplace voor de advocatuur en het notariaat van XINNO.
              </p>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <button className="v2-cta">Ontdek de werkplek <V2Icon name="arrow" size={18} fill="#fff" /></button>
                <button className="v2-cta v2-cta--ghost">Plan kennismaking</button>
              </div>
            </div>
            <PhotoSlot height={480} src="images/hero-advocaat.jpg" alt="Advocaat aan laptop in lichte ruimte" corner="HERO" style={{ borderRadius: 8 }} />
          </div>

          {/* meta strip */}
          <div style={{ marginTop: 96, padding: '32px 0', borderTop: '1px solid rgba(57,74,88,0.12)', borderBottom: '1px solid rgba(57,74,88,0.12)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }}>
            {[
              ['17', 'jaar gespecialiseerd in IT voor juridische professionals'],
              ['NL', 'Amsterdams datacenter, 24×7 bewaakt'],
              ['+110', 'aangesloten advocaten- en notariskantoren'],
              ['+2600', 'gebruikers met digitale vrijheid'],
            ].map(([n, l], i) => (
              <div key={i}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 8 }}>0{i+1}</div>
                <div style={{ fontSize: 36, fontWeight: 900, color: '#15202a', lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 8 }}>{n}</div>
                <div style={{ fontSize: 13.5, color: '#3a4754', lineHeight: 1.55 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LEDE — asymmetric 60/40 */}
      <section className="v2-section">
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 120, alignItems: 'start' }}>
          <div>
            <div className="v2-eyebrow">VOOR ADVOCATEN EN NOTARISSEN</div>
            <h2 style={{ marginTop: 24, fontSize: 84, lineHeight: 0.96 }}>
              Waar ambitie groeit,<br /><span style={{ color: '#FF6900' }}>groeit XINNO mee.</span>
            </h2>
          </div>
          <div style={{ paddingTop: 36 }}>
            <p style={{ fontSize: 17, marginBottom: 20 }}>
              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: 20 }}>
              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: 28 }}>
              Wij kennen uw processen, spreken uw taal en begrijpen uw afhankelijkheid van IT als geen ander.
            </p>
            <a className="v2-cta v2-cta--ghost" style={{ display: 'inline-flex' }}>Neem contact met ons op <V2Icon name="arrow" size={16} /></a>
          </div>
        </div>
      </section>

      {/* SERVICES — asymmetric 3 cards */}
      <section style={{ background: '#15202a', color: '#fff', padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
        {/* big bg X-diagonal */}
        <div style={{ position: 'absolute', top: 60, left: -200, width: 700, height: 360, opacity: 0.08, pointerEvents: 'none' }}>
          <V2XDiagBand color="#FF6900" height={360} />
        </div>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, marginBottom: 80, alignItems: 'end' }}>
            <div>
              <div className="v2-eyebrow" style={{ color: '#FFA100' }}>
                <span style={{ background: '#FFA100' }} />
                DRIE MODERN WORKPLACES
              </div>
              <h2 style={{ marginTop: 24, color: '#fff', fontSize: 84, lineHeight: 0.96 }}>
                Voor iedere<br />situatie een<br /><span style={{ color: '#FF6900' }}>oplossing.</span>
              </h2>
            </div>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.72)', maxWidth: 380, paddingBottom: 20 }}>
              De 365 Modern Workplaces van XINNO. Drie werkplekken, één belofte: u zit veilig, overal, zonder omkijken.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 16 }}>
            {[
              { i: 'shield', 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.', featured: true },
              { i: 'cloud', 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.' },
              { i: 'monitor', 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.' },
            ].map((s, i) => (
              <div key={i} style={{
                background: s.featured ? '#FF6900' : 'rgba(255,255,255,0.06)',
                border: s.featured ? '1px solid #FF6900' : '1px solid rgba(255,255,255,0.12)',
                borderRadius: 8,
                padding: '40px 36px',
                display: 'flex', flexDirection: 'column',
                minHeight: 380,
              }}>
                <V2Icon name={s.i} size={36} fill={s.featured ? '#fff' : '#FF6900'} accent={s.featured ? 'rgba(255,255,255,0.6)' : 'rgba(255,255,255,0.4)'} />
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: s.featured ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '0.16em', marginTop: 28, marginBottom: 14 }}>0{i+1} / Product</div>
                <h3 style={{ color: '#fff', fontSize: 26, marginBottom: 14, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.15 }}>{s.n}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: s.featured ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.72)', flexGrow: 1, marginBottom: 24 }}>{s.b}</p>
                <a style={{ color: s.featured ? '#fff' : '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Meer <V2Icon name="arrow" size={14} /></a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NIEUWS — editorial 70/30 */}
      <section className="v2-section">
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 64 }}>
            <div>
              <div className="v2-eyebrow">NIEUWS & ACTUEEL</div>
              <h2 style={{ marginTop: 24, fontSize: 84, lineHeight: 0.96 }}>Nieuws &<br /><span style={{ color: '#FF6900' }}>actueel.</span></h2>
            </div>
            <a className="v2-cta v2-cta--ghost">Naar nieuwsarchief <V2Icon name="arrow" size={16} /></a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40 }}>
            {/* big featured */}
            <article style={{ borderRadius: 8, overflow: 'hidden', background: '#fff', border: '1px solid rgba(57,74,88,0.08)' }}>
              <PhotoSlot height={360} src="images/news-fd-special.jpg" alt="FD-special interview" corner="01 / 02" />
              <div style={{ padding: '36px 40px 40px' }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 16 }}>FD-SPECIAL · 03 / 2026</div>
                <h3 style={{ fontSize: 32, marginBottom: 16, lineHeight: 1.1 }}>De brug slaan tussen IT en advocatuur</h3>
                <p style={{ fontSize: 16, marginBottom: 24, lineHeight: 1.55 }}>
                  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: 6 }}>Lees verder <V2Icon name="arrow" size={14} /></a>
              </div>
            </article>
            {/* small */}
            <article style={{ borderRadius: 8, overflow: 'hidden', background: '#fff', border: '1px solid rgba(57,74,88,0.08)', display: 'flex', flexDirection: 'column' }}>
              <PhotoSlot height={220} src="images/news-brande-verheij.jpg" alt="Brande & Verheij LLP" corner="02 / 02" />
              <div style={{ padding: '28px 32px 32px', flexGrow: 1 }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 14 }}>CASE STUDY · 02 / 2026</div>
                <h4 style={{ fontSize: 22, marginBottom: 14, lineHeight: 1.2 }}>Brande & Verheij LLP werkt sneller en veiliger dankzij XINNO 365 Hybrid Desktop</h4>
                <p style={{ fontSize: 14.5, marginBottom: 20, lineHeight: 1.6 }}>
                  Sinds de oprichting in mei 2019 vertrouwt Brande & Verheij LLP, een Rotterdams advocatenkantoor gespecialiseerd in burgerlijk recht en procesrecht, op XINNO als [...]
                </p>
                <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 'auto' }}>Lees verder <V2Icon name="arrow" size={14} /></a>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* VIDEOS */}
      <section className="v2-section v2-section--tight" style={{ background: '#faf8f3', paddingTop: 40 }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48 }}>
            <div>
              <div className="v2-eyebrow">VIDEO CHANNEL</div>
              <h3 style={{ marginTop: 18, fontSize: 44, fontWeight: 900, letterSpacing: '-0.035em', lineHeight: 1 }}>IT zonder omkijken, in beeld.</h3>
            </div>
            <a className="v2-cta v2-cta--ghost">Bekijk meer video's <V2Icon name="arrow" size={16} /></a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {XINNO_VIDEOS.map((v, i) => (
              <div key={i} style={{ borderRadius: 8, overflow: 'hidden', background: '#fff', border: '1px solid rgba(57,74,88,0.08)' }}>
                <WistiaThumb id={v.id} duration={v.dur} title={v.title} height={220} style={{ borderRadius: 0 }} />
                <div style={{ padding: '20px 24px 24px' }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 10 }}>{v.dur}</div>
                  <h4 style={{ fontSize: 18, lineHeight: 1.3, letterSpacing: '-0.015em' }}>{v.title}</h4>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS — full-width with X-diagonal divider */}
      <div style={{ width: '100%', height: 8, background: '#FF6900' }} />
      <section style={{ background: '#FF6900', color: '#fff', padding: '120px 56px 100px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 24, opacity: 0.9 }}>
            WAT JURISTEN VAN ONS VINDEN
          </div>
          <h2 style={{ color: '#fff', fontSize: 84, lineHeight: 0.96, marginBottom: 80 }}>Drie advocatenkantoren.<br /><span style={{ fontStyle: 'italic', fontWeight: 500 }}>Drie quotes.</span></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {[
              { k: 'SOLV Advocaten', q: '…ze gaan mee in de ontwikkelingen en lopen daarin voorop. Dat is denk ik de kracht van Xinno.' },
              { 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} style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 8, padding: '36px 32px 32px' }}>
                <div style={{ fontSize: 48, color: '#fff', opacity: 0.4, fontWeight: 900, marginBottom: 8, lineHeight: 1 }}>"</div>
                <p style={{ fontSize: 18, lineHeight: 1.5, color: '#fff', marginBottom: 32, fontWeight: 500, letterSpacing: '-0.01em' }}>
                  {t.q}
                </p>
                <div style={{ fontSize: 14, color: '#fff', fontWeight: 700, letterSpacing: '0.01em' }}>{t.k}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <div style={{ width: '100%', height: 8, background: '#D14124' }} />

      {/* CTA */}
      <section className="v2-section v2-section--xl" style={{ background: '#15202a', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: -120, top: 60, width: 600, height: 280, opacity: 0.08 }}>
          <V2XDiagBand color="#FF6900" height={280} />
        </div>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="v2-eyebrow" style={{ color: '#FF6900' }}><span style={{ background: '#FF6900' }} />IT ZONDER OMKIJKEN</div>
            <h2 style={{ color: '#fff', fontSize: 72, lineHeight: 0.98, marginTop: 24, marginBottom: 28 }}>
              Klaar voor uw <span style={{ color: '#FF6900' }}>digitale toekomst?</span>
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 17, maxWidth: 520, lineHeight: 1.55 }}>
              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>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18 }}>
            <button className="v2-cta" style={{ fontSize: 16, padding: '22px 32px' }}>Neem contact op <V2Icon name="arrow" size={18} fill="#fff" /></button>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.1em' }}>
              020 242 0800<br />sales@xinno.nl
            </div>
          </div>
        </div>
      </section>

      <V2Footer />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   V2 — OVER ONS
────────────────────────────────────────────────────────────── */
function V2About() {
  return (
    <div className="variant v2" data-variant="2" data-page="about" data-screen-label="V2 · Over ons">
      <nav className="v2-nav">
        <XinnoLogo size={28} />
        <div className="v2-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="v2-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO — full-width X-diagonal as graphic device */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: '120px 56px 80px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="v2-eyebrow">XINNO · OVER ONS</div>
          <h1 className="is-large" style={{ marginTop: 32, fontSize: 168, lineHeight: 0.88, letterSpacing: '-0.06em' }}>
            Een visie<br /><span style={{ color: '#FF6900', fontStyle: 'italic', fontWeight: 500 }}>apart.</span>
          </h1>
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
            <p style={{ fontSize: 26, lineHeight: 1.3, color: '#15202a', fontWeight: 500, maxWidth: 520, letterSpacing: '-0.015em' }}>
              Wie zijn we, en waar gaan we naar toe? Dit is de visie onze op ICT voor de advocatuur.
            </p>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <V2XDiagBand color="#FF6900" height={120} style={{ width: 280 }} />
            </div>
          </div>
        </div>
      </section>

      {/* INTRO */}
      <section className="v2-section v2-section--tight">
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 100, alignItems: 'start' }}>
          <div>
            <div className="v2-eyebrow">DE BASIS</div>
            <h2 style={{ marginTop: 18, fontSize: 56, lineHeight: 1, letterSpacing: '-0.04em' }}>IT die past bij het juridisch werkproces.</h2>
          </div>
          <div>
            <p style={{ fontSize: 19, marginBottom: 22, color: '#15202a', lineHeight: 1.5 }}>
              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. 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 — horizontal with X-diagonal markers */}
      <section style={{ background: '#15202a', color: '#fff', padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="v2-eyebrow" style={{ color: '#FFA100' }}><span style={{ background: '#FFA100' }}/>VAN BIERVILTJE TOT 2600 GEBRUIKERS</div>
          <h2 style={{ color: '#fff', marginTop: 24, marginBottom: 80, fontSize: 80, lineHeight: 0.96 }}>
            Drie momenten,<br /><span style={{ color: '#FF6900' }}>één verhaal.</span>
          </h2>
          <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) => (
              <div key={i} style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 8, border: '1px solid rgba(255,255,255,0.12)', padding: '40px 32px' }}>
                <V2XDiagBand color="#FF6900" height={20} style={{ width: 60, marginBottom: 28 }} />
                <div style={{ fontSize: 88, fontWeight: 900, color: '#FF6900', lineHeight: 0.9, marginBottom: 24, letterSpacing: '-0.05em' }}>{e.y}</div>
                <h4 style={{ color: '#fff', fontSize: 22, marginBottom: 16, letterSpacing: '-0.02em' }}>{e.t}</h4>
                <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 14.5, lineHeight: 1.6 }}>{e.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* START + TOEKOMST */}
      <section className="v2-section">
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="v2-eyebrow">DE START</div>
            <h3 style={{ marginTop: 20, fontSize: 44, marginBottom: 24, letterSpacing: '-0.035em', lineHeight: 1.05 }}>De start van XINNO</h3>
            <p style={{ fontSize: 16, marginBottom: 18 }}>
              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 bij hun werkproces om de cliënt optimaal te bedienen.
            </p>
            <p style={{ fontSize: 16 }}>
              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.
            </p>
          </div>
          <div>
            <div className="v2-eyebrow">DE TOEKOMST</div>
            <h3 style={{ marginTop: 20, fontSize: 44, marginBottom: 24, letterSpacing: '-0.035em', lineHeight: 1.05 }}>De toekomst van XINNO</h3>
            <p style={{ fontSize: 16, marginBottom: 18 }}>
              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.
            </p>
            <p style={{ fontSize: 16 }}>
              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.
            </p>
          </div>
        </div>
      </section>

      {/* RAMON QUOTE — full-width orange band */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: '120px 56px', background: '#faf8f3' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 80, alignItems: 'center' }}>
          <PhotoSlot height={520} label="PORTRAIT · Ramon van den Heuvel, Managing Director, Amsterdam kantoor, natuurlijk licht, fly-on-the-wall" corner="FOUNDER" style={{ borderRadius: 8 }} />
          <div>
            <div className="v2-eyebrow">FOUNDER · MANAGING DIRECTOR</div>
            <p style={{ fontSize: 38, fontWeight: 500, lineHeight: 1.2, color: '#15202a', letterSpacing: '-0.025em', marginTop: 28, marginBottom: 40 }}>
              "Wat XINNO anders maakt dan de doorsnee IT-partner is dat wij <span style={{ color: '#FF6900' }}>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: 16 }}>
              <div style={{ width: 48, height: 3, background: '#FF6900' }} />
              <div>
                <div style={{ fontSize: 16, color: '#15202a', fontWeight: 700 }}>Ramon van den Heuvel</div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#394A58', textTransform: 'uppercase', letterSpacing: '0.16em', marginTop: 2 }}>Oprichter & Managing Director</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PARTNERS */}
      <section className="v2-section v2-section--tight">
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="v2-eyebrow">PARTNERS VAN XINNO</div>
          <h2 style={{ marginTop: 18, fontSize: 64, lineHeight: 0.98, marginBottom: 56 }}>Partners van <span style={{ color: '#FF6900' }}>XINNO.</span></h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, border: '1px solid rgba(57,74,88,0.1)', borderRadius: 8, overflow: 'hidden' }}>
            {PARTNER_LOGOS.map((p, i) => (
              <div key={i} style={{ padding: '56px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: i < 4 ? '1px solid rgba(57,74,88,0.1)' : 0, background: '#fff' }}>
                <CustomerLogo {...p} opacity={0.65} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="v2-section v2-section--xl" style={{ background: '#FF6900', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: -120, top: -60, width: 700, height: 360, opacity: 0.18 }}>
          <V2XDiagBand color="#fff" height={360} />
        </div>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: '#fff', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 24, opacity: 0.85 }}>IT ZONDER OMKIJKEN</div>
          <h2 style={{ color: '#fff', fontSize: 88, lineHeight: 0.96, marginBottom: 32, maxWidth: 1000 }}>
            Is uw kantoor ook toe aan<br /><span style={{ fontStyle: 'italic', fontWeight: 500 }}>IT zonder omkijken?</span>
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.92)', fontSize: 18, maxWidth: 640, marginBottom: 40, lineHeight: 1.5 }}>
            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: 20 }}>
            <button className="v2-cta" style={{ background: '#fff', color: '#FF6900', fontSize: 16, padding: '22px 32px' }}>Neem contact op <V2Icon name="arrow" size={18} fill="#FF6900" /></button>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: '#fff', letterSpacing: '0.1em' }}>020 242 0800 · sales@xinno.nl</span>
          </div>
        </div>
      </section>

      <V2Footer />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   V2 — XINNO PRIVATE DESKTOP
────────────────────────────────────────────────────────────── */
function V2PrivateDesktop() {
  return (
    <div className="variant v2" data-variant="2" data-page="private-desktop" data-screen-label="V2 · Private Desktop">
      <nav className="v2-nav">
        <XinnoLogo size={28} />
        <div className="v2-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="v2-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO */}
      <section style={{ position: 'relative', overflow: 'hidden', padding: '60px 56px 0' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 32 }}>
            De online werkplek / Xinno Private Desktop
          </div>
          <div className="v2-eyebrow">XINNO · ONS VLAGGENSCHIP</div>
          <h1 style={{ marginTop: 28, fontSize: 144, lineHeight: 0.9, letterSpacing: '-0.06em' }}>
            Private<br /><span style={{ color: '#FF6900' }}>Desktop.</span>
          </h1>
          <div style={{ marginTop: 60, display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'start' }}>
            <div>
              <p style={{ fontSize: 22, lineHeight: 1.45, color: '#15202a', marginBottom: 24, fontWeight: 500, letterSpacing: '-0.01em' }}>
                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 }}>
                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>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <button className="v2-cta">Plan kennismaking <V2Icon name="arrow" size={18} fill="#fff" /></button>
                <button className="v2-cta v2-cta--ghost">Bekijk video</button>
              </div>
            </div>
            <PhotoSlot height={420} label="PRODUCT VISUAL · XINNO Private Desktop interface, Nederlands datacenter graphic" corner="PD · 01" style={{ borderRadius: 8 }} />
          </div>
        </div>
        {/* big bottom X-diagonal */}
        <div style={{ marginTop: 100, position: 'relative', height: 80, overflow: 'hidden' }}>
          <V2XDiagBand color="#FF6900" height={80} style={{ width: '120%', marginLeft: '-10%' }} />
        </div>
      </section>

      {/* FEATURES — 4-up cards */}
      <section className="v2-section" style={{ background: '#15202a', color: '#fff' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, marginBottom: 64, alignItems: 'end' }}>
            <div>
              <div className="v2-eyebrow" style={{ color: '#FFA100' }}><span style={{ background: '#FFA100' }}/>WAT KRIJGT U</div>
              <h2 style={{ color: '#fff', marginTop: 24, fontSize: 80, lineHeight: 0.96 }}>
                Vier dingen,<br /><span style={{ color: '#FF6900' }}>geen omkijken.</span>
              </h2>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.72)', fontSize: 17, maxWidth: 380, lineHeight: 1.55, paddingBottom: 16 }}>
              Veilig, beheerd, toegankelijk en compleet. Vier pijlers waar u niet meer over hoeft na te denken.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {[
              { i: 'lock', 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.' },
              { i: 'settings', n: 'Geen omkijken naar beheer', b: 'XINNO verzorgt het technisch en functioneel beheer van uw IT-omgeving. Geen omkijken meer naar updates en gebruikersondersteuning.' },
              { i: 'map', 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.' },
              { i: 'check', 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={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 8, padding: '40px 36px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
                  <V2Icon name={f.i} size={40} fill="#FF6900" accent="rgba(255,255,255,0.5)" />
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em' }}>0{i+1} / Feature</div>
                </div>
                <h3 style={{ color: '#fff', fontSize: 28, marginBottom: 14, letterSpacing: '-0.025em', lineHeight: 1.15, fontWeight: 800 }}>{f.n}</h3>
                <p style={{ color: 'rgba(255,255,255,0.72)', fontSize: 15, lineHeight: 1.65 }}>{f.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SIMPEL MET XINNO */}
      <section className="v2-section">
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="v2-eyebrow">ONZE BELOFTE</div>
            <h2 style={{ marginTop: 18, fontSize: 64, lineHeight: 0.98 }}>
              Maak het<br /><span style={{ color: '#FF6900' }}>simpel met XINNO.</span>
            </h2>
          </div>
          <div>
            <p style={{ fontSize: 19, marginBottom: 28, color: '#15202a', lineHeight: 1.5 }}>
              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 style={{ display: 'inline-block', padding: '20px 28px', background: '#FF6900', color: '#fff', borderRadius: 8, fontWeight: 800, fontSize: 22, letterSpacing: '-0.015em' }}>
              Geen omkijken meer naar IT, dat is onze belofte.
            </div>
          </div>
        </div>
      </section>

      {/* TRUST — KLANT-LOGOS editorial */}
      <section className="v2-section v2-section--tight" style={{ background: '#faf8f3' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
            <div>
              <div className="v2-eyebrow">U BENT IN GOED GEZELSCHAP</div>
              <h2 style={{ marginTop: 18, fontSize: 56, lineHeight: 0.98 }}>U bent in goed gezelschap.</h2>
            </div>
            <p style={{ fontSize: 16, color: '#3a4754', maxWidth: 360, paddingBottom: 12 }}>XINNO geniet het vertrouwen van vele advocatenkantoren. Zij gingen u voor in de keuze voor IT zonder omkijken.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', borderRadius: 8, overflow: 'hidden', border: '1px solid rgba(57,74,88,0.1)' }}>
            {KLANT_LOGOS.map((p, i) => (
              <div key={i} style={{ padding: '48px 16px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: i < 6 ? '1px solid rgba(57,74,88,0.1)' : 0, background: '#fff', minHeight: 120 }}>
                <CustomerLogo {...p} opacity={0.65} fontSize={Math.min(p.fontSize, 16)} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* EXTRA VEILIG WERKEN */}
      <section style={{ background: '#15202a', color: '#fff', padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', right: -80, top: 80, width: 700, height: 300, opacity: 0.1 }}>
          <V2XDiagBand color="#FF6900" height={300} />
        </div>
        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 80, alignItems: 'start' }}>
            <div>
              <div className="v2-eyebrow" style={{ color: '#FFA100' }}><span style={{ background: '#FFA100' }}/>MAAK UW WERKPLEK COMPLEET</div>
              <h2 style={{ color: '#fff', marginTop: 24, fontSize: 80, lineHeight: 0.96, marginBottom: 32 }}>
                Extra veilig<br /><span style={{ color: '#FF6900' }}>werken.</span>
              </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. Maar voor wie veilig nog niet veilig genoeg is, kan er altijd nog een schepje bovenop.
              </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>
              <button className="v2-cta">Bekijk alle security opties <V2Icon name="arrow" size={18} fill="#fff" /></button>
            </div>
            <div>
              <div className="v2-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', 'Multi-factor authentication, breed toepasbaar'],
                  ['Immutable back-up', 'Onveranderbaar — ransomware-proof'],
                  ['24 × 7 SOC-SIEM', 'Proactieve dreigingsdetectie'],
                  ['Aangetekend Mailen', 'Bewijswaardige e-mail levering'],
                ].map(([n, d], i) => (
                  <li key={i} style={{ padding: '24px 0', borderBottom: '1px solid rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18 }}>
                    <div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: '#fff', marginBottom: 4 }}>{n}</div>
                      <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>{d}</div>
                    </div>
                    <V2Icon name="arrow" size={20} fill="#FF6900" />
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ANDERE OPLOSSINGEN */}
      <section className="v2-section">
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div className="v2-eyebrow">ONZE ANDERE OPLOSSINGEN</div>
          <h2 style={{ marginTop: 18, fontSize: 56, lineHeight: 0.98, marginBottom: 48 }}>Niet de juiste pasvorm?</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              { 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) => (
              <div key={i} className="v2-card">
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 16 }}>0{i+2} / desktop</div>
                <h3 style={{ fontSize: 30, marginBottom: 18, letterSpacing: '-0.025em', lineHeight: 1.15 }}>{p.n}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 28 }}>{p.b}</p>
                <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Meer over {p.n.split(' ').slice(-2).join(' ')} <V2Icon name="arrow" size={14} /></a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <V2Footer />
    </div>
  );
}

/* V2 FOOTER */
function V2Footer() {
  return (
    <footer className="v2-footer" style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -60, right: -120, width: 700, height: 280, opacity: 0.08 }}>
        <V2XDiagBand color="#FF6900" height={280} />
      </div>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.2fr', gap: 56, marginBottom: 64 }}>
          <div>
            <XinnoLogo size={32} variant="white" />
            <p style={{ marginTop: 28, fontSize: 14.5, color: 'rgba(255,255,255,0.7)', maxWidth: 320, lineHeight: 1.65 }}>
              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>
          <div>
            <h5>Nieuwsbrief</h5>
            <p style={{ marginBottom: 18, fontSize: 13.5 }}>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: 6, 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.02em' }}>Inschrijven</button>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', 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.1em', textTransform: 'uppercase' }}>© 2026 XINNO — Onderdeel van TSH</span>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.1em', textTransform: 'uppercase' }}>KvK 34332222</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { V2Home, V2About, V2PrivateDesktop });