/* ============================================================
   V2 — Photo-first BENTO (FROM DESIGN CANVAS HANDOFF)
   White bg · bento-grid mosaic · color-block icon tiles
   14-20px radius (NOT pill — differentiates from V3)
   Motion: tile-stagger scale-in · image clip-reveal · counter-up
   Real images everywhere · 38px logo (matches v1/v3)
============================================================ */

/* Solid-fill icons for color-block tiles (white-on-orange) */
function V2Icon({ name, size = 26, color = '#fff' }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const s = {
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="M9 12l2 2 4-4" /></>,
    cloud: <><path d="M18 10a6 6 0 0 0-11.5-2A5 5 0 0 0 7 18h11a4 4 0 0 0 0-8z" /></>,
    monitor: <><rect x="2.5" y="4" width="19" height="13" rx="2" /><path d="M9 21h6M12 17v4" /></>,
    settings: <><circle cx="12" cy="12" r="3" /><path d="M12 1v6m0 10v6m11-11h-6m-10 0H1m17.49-7.49l-4.24 4.24m-6.5 6.5l-4.24 4.24m12.98 0l-4.24-4.24m-6.5-6.5L3.51 3.51" /></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>,
    map: <><polygon points="3 6 3 21 9 18 15 21 21 18 21 3 15 6 9 3 3 6" /><line x1="9" y1="3" x2="9" y2="18" /><line x1="15" y1="6" x2="15" y2="21" /></>,
    check: <><circle cx="12" cy="12" r="9.5" /><path d="M8 12l3 3 5-6" /></>,
    play: <><polygon points="9 7 18 12 9 17" fill={color} /></>,
    arrow: <><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></>,
  };
  return <svg {...p}>{s[name] || null}</svg>;
}

/* Tile entrance — scale-in with stagger */
function V2Tile({ children, delay = 0, style = {}, className = '', ...rest }) {
  return <div className={`v2-tile v2-tile-in ${className}`} style={{ animationDelay: `${delay}s`, ...style }} {...rest}>{children}</div>;
}

/* Image clip-path reveal wrapper */
function V2ImageReveal({ children, delay = 0, style = {} }) {
  return <div className="v2-image-reveal" style={{ animationDelay: `${delay}s`, ...style }}>{children}</div>;
}

/* Counter-up stat */
function V2Stat({ value, label, delay = 0, large }) {
  return (
    <div>
      <div className="v2-count" style={{ animationDelay: `${delay}s`, fontSize: large ? 88 : 56, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.045em', color: '#15202a', marginBottom: 12 }}>{value}</div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 500 }}>{label}</div>
    </div>
  );
}

/* Section header — big number + eyebrow + heading */
function V2SectionHeader({ num, eyebrow, title, accent }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 32, alignItems: 'start', marginBottom: 56 }}>
      <div className="v2-section-num">{num}</div>
      <div style={{ paddingTop: 12 }}>
        <div className="v2-eyebrow">{eyebrow}</div>
        <h2 style={{ marginTop: 18, fontSize: 56, lineHeight: 1.0 }}>{title}{accent ? <> <span style={{ color: '#FF6900' }}>{accent}</span></> : null}</h2>
      </div>
    </div>
  );
}

/* V2 NAV — shared across pages */
function V2Nav({ active }) {
  return (
    <nav className="v2-nav">
      <XinnoLogo size={38} />
      <div className="v2-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="v2-nav__cta">servicedesk</button>
      </div>
    </nav>
  );
}

/* Real-image bento photo tile */
function V2Photo({ src, alt, corner, height = '100%', radius = 18 }) {
  return (
    <div style={{ position: 'relative', height, overflow: 'hidden', borderRadius: radius }}>
      <img src={src} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      {corner ? (
        <div style={{ position: 'absolute', top: 14, left: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.16em', textTransform: 'uppercase', background: 'rgba(10,20,28,0.7)', padding: '5px 10px', borderRadius: 4 }}>
          {corner}
        </div>
      ) : null}
    </div>
  );
}

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

      <V2Nav />

      {/* HERO — BENTO MOSAIC */}
      <section style={{ padding: '80px 56px 80px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          {/* top: eyebrow + title */}
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0, marginBottom: 40 }}>
            <div className="v2-eyebrow">VOOR ADVOCATEN EN NOTARISSEN</div>
            <h1 style={{ marginTop: 28, fontSize: 84, lineHeight: 0.96, maxWidth: 1000 }}>
              IT zonder omkijken voor de advocatuur en het notariaat.
            </h1>
          </V2Tile>

          {/* BENTO grid: 4 cols × 2 rows */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: '300px 240px', gap: 16 }}>
            {/* text + CTA tile (2×1) */}
            <V2Tile delay={0.15} style={{ gridColumn: 'span 2', gridRow: 'span 1', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <p style={{ fontSize: 19, lineHeight: 1.45, color: '#15202a', fontWeight: 400 }}>
                Dat is werken met de 365 Modern Workplace voor de advocatuur en het notariaat van XINNO.
              </p>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 24 }}>
                <button className="v2-cta">Ontdek de werkplek <V2Icon name="arrow" size={16} color="#fff" /></button>
                <button className="v2-cta v2-cta--ghost">Plan kennismaking</button>
              </div>
            </V2Tile>

            {/* big hero photo (2×2) */}
            <V2Tile delay={0.2} className="v2-tile--photo" style={{ gridColumn: 'span 2', gridRow: 'span 2', padding: 0 }}>
              <V2ImageReveal delay={0.3} style={{ height: '100%' }}>
                <V2Photo src="images/hero-advocaat.jpg" alt="Advocaat aan laptop in lichte ruimte" corner="Hero" radius={18} />
              </V2ImageReveal>
            </V2Tile>

            {/* stat tile 1 — orange */}
            <V2Tile delay={0.3} className="v2-tile--orange">
              <div className="v2-count" style={{ fontSize: 80, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.045em', marginBottom: 14, animationDelay: '0.5s' }}>17</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 500, color: 'rgba(255,255,255,0.95)' }}>jaar gespecialiseerd</div>
              <p style={{ fontSize: 13.5, marginTop: 10, lineHeight: 1.5 }}>in IT voor juridische professionals</p>
            </V2Tile>

            {/* stat tile 2 */}
            <V2Tile delay={0.35}>
              <V2Stat value="+110" label="aangesloten kantoren" delay={0.55} />
              <p style={{ marginTop: 14, fontSize: 13.5, lineHeight: 1.5 }}>van klein niche-kantoor tot 100+ medewerkers</p>
            </V2Tile>
          </div>

          {/* logos row */}
          <V2Tile delay={0.45} style={{ background: 'transparent', border: 0, padding: '40px 0 0', marginTop: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 24 }}>
              <span style={{ flex: 1, height: 1, background: 'rgba(57,74,88,0.18)' }} />
              <span>Vertrouwd door +110 advocatenkantoren</span>
              <span style={{ flex: 1, height: 1, background: 'rgba(57,74,88,0.18)' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, alignItems: 'center' }}>
              {KLANT_LOGOS.map((p, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 12px', minHeight: 80 }}>
                  {p.src ? (
                    <img src={p.src} alt={p.name} style={{ height: 36, maxWidth: '90%', width: 'auto', objectFit: 'contain', opacity: 0.7 }} />
                  ) : (
                    <CustomerLogo {...p} opacity={0.6} fontSize={16} />
                  )}
                </div>
              ))}
            </div>
          </V2Tile>
        </div>
      </section>

      {/* LEDE — bento split */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="01" eyebrow="VOOR ADVOCATEN EN NOTARISSEN" title="Waar ambitie groeit," accent="groeit XINNO mee." />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
            <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0 }}>
              <p style={{ fontSize: 19, lineHeight: 1.5, color: '#15202a', marginBottom: 22 }}>
                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: 16, 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: 16 }}>
                Wij kennen uw processen, spreken uw taal en begrijpen uw afhankelijkheid van IT als geen ander.
              </p>
            </V2Tile>
            <V2Tile delay={0.15} className="v2-tile--dark">
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 24 }}>SINDS 2009</div>
              <h3 style={{ color: '#fff', fontSize: 36, lineHeight: 1.1, marginBottom: 28 }}>Dé partij die kennis en ervaring heeft in de advocatuur.</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div>
                  <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.55)', marginBottom: 6, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.1em', textTransform: 'uppercase' }}>HQ</div>
                  <div style={{ fontSize: 15, color: '#fff', fontWeight: 600 }}>Amsterdam, NL</div>
                </div>
                <div>
                  <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.55)', marginBottom: 6, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.1em', textTransform: 'uppercase' }}>ONDERDEEL VAN</div>
                  <div style={{ fontSize: 15, color: '#fff', fontWeight: 600 }}>TSH (Strikwerda)</div>
                </div>
              </div>
              <button className="v2-cta" style={{ marginTop: 28, background: '#FF6900' }}>Neem contact op <V2Icon name="arrow" size={16} color="#fff" /></button>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* SERVICES — large bento product tiles */}
      <section style={{ padding: '120px 56px', background: '#fbf9f4' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="02" eyebrow="DRIE MODERN WORKPLACES" title="Voor iedere situatie" accent="een oplossing." />
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 16, gridAutoRows: '460px' }}>
            <V2Tile delay={0.05} style={{ background: '#fff', display: 'flex', flexDirection: 'column' }}>
              <div className="v2-icon-tile"><V2Icon name="shield" size={28} /></div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 28, marginBottom: 12 }}>01 / Vlaggenschip</div>
              <h3 style={{ fontSize: 30, marginBottom: 14, letterSpacing: '-0.025em', lineHeight: 1.15 }}>XINNO Private Desktop</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, flexGrow: 1, marginBottom: 20 }}>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.</p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 22 }}>
                {['Amsterdams DC', 'Vast bedrag/maand', '24×7 bewaakt'].map((t, k) => (
                  <span key={k} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#394A58', padding: '5px 10px', background: 'rgba(57,74,88,0.06)', borderRadius: 999, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t}</span>
                ))}
              </div>
              <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Meer over Private Desktop <V2Icon name="arrow" size={14} color="#FF6900" /></a>
            </V2Tile>
            <V2Tile delay={0.15} style={{ background: '#fff', display: 'flex', flexDirection: 'column' }}>
              <div className="v2-icon-tile"><V2Icon name="cloud" size={28} /></div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 28, marginBottom: 12 }}>02 / Hybrid</div>
              <h3 style={{ fontSize: 26, marginBottom: 14, letterSpacing: '-0.025em', lineHeight: 1.18 }}>XINNO 365 Hybrid Desktop</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, flexGrow: 1, marginBottom: 22 }}>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.</p>
              <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Meer <V2Icon name="arrow" size={14} color="#FF6900" /></a>
            </V2Tile>
            <V2Tile delay={0.25} style={{ background: '#fff', display: 'flex', flexDirection: 'column' }}>
              <div className="v2-icon-tile"><V2Icon name="monitor" size={28} /></div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 28, marginBottom: 12 }}>03 / Managed</div>
              <h3 style={{ fontSize: 26, marginBottom: 14, letterSpacing: '-0.025em', lineHeight: 1.18 }}>XINNO 365 Managed Desktop</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, flexGrow: 1, marginBottom: 22 }}>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.</p>
              <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Meer <V2Icon name="arrow" size={14} color="#FF6900" /></a>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* NIEUWS — bento layout */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="03" eyebrow="NIEUWS & ACTUEEL" title="Nieuws &" accent="actueel." />
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 0.7fr', gap: 16, gridAutoRows: '460px' }}>
            <V2Tile delay={0.05} className="v2-tile--photo">
              <V2ImageReveal delay={0.15} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                <V2Photo src="images/news-fd-special.jpg" alt="FD-special interview" corner="FD · 03/2026" height={260} radius={0} />
                <div style={{ padding: '28px 32px 32px', flexGrow: 1, background: '#fff', display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 14 }}>FD-special · 5 min read</div>
                  <h3 style={{ fontSize: 26, marginBottom: 14, lineHeight: 1.18 }}>De brug slaan tussen IT en advocatuur</h3>
                  <p style={{ fontSize: 14.5, lineHeight: 1.6, flexGrow: 1, marginBottom: 18 }}>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 }}>Lees verder →</a>
                </div>
              </V2ImageReveal>
            </V2Tile>
            <V2Tile delay={0.15} className="v2-tile--photo">
              <V2ImageReveal delay={0.25} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
                <V2Photo src="images/news-brande-verheij.jpg" alt="Brande & Verheij LLP" corner="Case" height={200} radius={0} />
                <div style={{ padding: '24px 28px 28px', flexGrow: 1, background: '#fff', display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 12 }}>Case · 3 min read</div>
                  <h4 style={{ fontSize: 20, lineHeight: 1.22, marginBottom: 12 }}>Brande & Verheij LLP werkt sneller en veiliger</h4>
                  <p style={{ fontSize: 14, lineHeight: 1.6, flexGrow: 1, marginBottom: 16 }}>Sinds de oprichting in mei 2019 vertrouwt Brande & Verheij LLP op XINNO als IT-partner [...]</p>
                  <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600 }}>Lees verder →</a>
                </div>
              </V2ImageReveal>
            </V2Tile>
            <V2Tile delay={0.25} style={{ background: '#fbf9f4', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 14 }}>Stats</div>
                <V2Stat value="+2600" label="gebruikers" delay={0.4} />
                <p style={{ marginTop: 14, fontSize: 14, lineHeight: 1.55, color: '#3a4754' }}>met digitale vrijheid, elke werkdag.</p>
              </div>
              <a className="v2-cta v2-cta--ghost" style={{ alignSelf: 'flex-start', fontSize: 13, padding: '10px 18px' }}>Naar nieuwsarchief →</a>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* VIDEOS — bento 3-up using Wistia thumbs */}
      <section style={{ padding: '40px 56px 120px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0, marginBottom: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
            <div>
              <div className="v2-eyebrow">VIDEO CHANNEL</div>
              <h3 style={{ marginTop: 18, fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.05 }}>IT zonder omkijken, in beeld.</h3>
            </div>
            <a className="v2-cta v2-cta--ghost">Bekijk meer video's <V2Icon name="arrow" size={16} color="currentColor" /></a>
          </V2Tile>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {XINNO_VIDEOS.map((v, i) => (
              <V2Tile key={i} delay={0.1 + i * 0.08} className="v2-tile--photo">
                <V2ImageReveal delay={0.2 + i * 0.08}>
                  <a href={`https://fast.wistia.net/embed/medias/${v.id}`} target="_blank" rel="noopener noreferrer" style={{ position: 'relative', display: 'block', height: 220, overflow: 'hidden', cursor: 'pointer' }}>
                    <img src={`https://fast.wistia.com/embed/medias/${v.id}/swatch`} alt={v.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.84)' }} />
                    <div style={{ position: 'absolute', top: 14, left: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.16em', textTransform: 'uppercase', background: 'rgba(10,20,28,0.65)', padding: '5px 10px', borderRadius: 4 }}>
                      {v.dur}
                    </div>
                    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <div style={{ width: 56, height: 56, borderRadius: 14, background: '#FF6900', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <V2Icon name="play" size={20} color="#fff" />
                      </div>
                    </div>
                  </a>
                </V2ImageReveal>
                <div style={{ padding: '22px 26px 26px', background: '#fbf9f4' }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 10 }}>{v.dur}</div>
                  <h4 style={{ fontSize: 18, lineHeight: 1.3, letterSpacing: '-0.015em' }}>{v.title}</h4>
                </div>
              </V2Tile>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIAL — ONE dark gradient */}
      <section style={{ background: 'radial-gradient(ellipse at center, rgba(255,105,0,0.18) 0%, transparent 60%), linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '140px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0, marginBottom: 56 }}>
            <div className="v2-eyebrow" style={{ color: '#FF6900' }}>Wat juristen van ons vinden</div>
            <h2 style={{ color: '#fff', marginTop: 24, fontSize: 60, lineHeight: 1.0 }}>
              Drie advocatenkantoren over XINNO.
            </h2>
          </V2Tile>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {[
              { logo: 'images/SOLV-LOGO-KLEUR-MEDIUM.png', name: 'SOLV Advocaten', q: '…ze gaan mee in de ontwikkelingen en lopen daarin voorop. Dat is denk ik de kracht van Xinno.' },
              { 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) => (
              <V2Tile key={i} delay={0.15 + i * 0.08} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)' }}>
                <div style={{ fontSize: 56, color: '#FF6900', opacity: 0.55, fontWeight: 800, lineHeight: 0.6, marginBottom: 8 }}>"</div>
                <p style={{ fontSize: 17, lineHeight: 1.55, color: '#fff', marginBottom: 32 }}>{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: 22, width: 'auto', objectFit: 'contain', filter: 'brightness(0) invert(1)', opacity: 0.88 }} />
                </div>
              </V2Tile>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '140px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.3fr 0.7fr', gap: 60, alignItems: 'center' }}>
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0 }}>
            <div className="v2-eyebrow">IT ZONDER OMKIJKEN</div>
            <h2 style={{ marginTop: 24, fontSize: 64, lineHeight: 0.98, marginBottom: 24 }}>
              Klaar voor uw digitale toekomst?
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.5, color: '#3a4754', maxWidth: 540 }}>
              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>
          </V2Tile>
          <V2Tile delay={0.15} style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
            <button className="v2-cta" style={{ fontSize: 16, padding: '20px 32px' }}>Neem contact op <V2Icon name="arrow" size={18} color="#fff" /></button>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: '#394A58', letterSpacing: '0.08em' }}>020 242 0800<br />sales@xinno.nl</div>
          </V2Tile>
        </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">
      <V2Nav active="Over ons" />

      {/* HERO — bento with portrait + meta tiles */}
      <section style={{ padding: '80px 56px 80px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0, marginBottom: 40 }}>
            <div className="v2-eyebrow">Over XINNO</div>
            <h1 style={{ marginTop: 28, fontSize: 96, lineHeight: 0.96 }}>Een visie apart.</h1>
            <p style={{ fontSize: 22, lineHeight: 1.4, color: '#15202a', marginTop: 32, maxWidth: 580, fontWeight: 400 }}>
              Wie zijn we, en waar gaan we naar toe? Dit is de visie onze op ICT voor de advocatuur.
            </p>
          </V2Tile>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridAutoRows: '220px', gap: 16 }}>
            <V2Tile delay={0.15} className="v2-tile--photo" style={{ gridColumn: 'span 2', gridRow: 'span 2' }}>
              <V2ImageReveal delay={0.25} style={{ height: '100%' }}>
                <V2Photo src="images/about-hero-office.jpg" alt="XINNO kantoor Amsterdam" corner="Team" height="100%" radius={18} />
              </V2ImageReveal>
            </V2Tile>
            <V2Tile delay={0.25} className="v2-tile--orange" style={{ gridColumn: 'span 1' }}>
              <div className="v2-count" style={{ animationDelay: '0.45s', fontSize: 64, fontWeight: 800, lineHeight: 0.9, marginBottom: 12 }}>17</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 500 }}>Jaar ervaring</div>
            </V2Tile>
            <V2Tile delay={0.3} className="v2-tile--dark">
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 8 }}>Est.</div>
              <div style={{ fontSize: 22, color: '#fff', fontWeight: 700, lineHeight: 1.2 }}>23 maart 2009</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>Amsterdam, NL</div>
            </V2Tile>
            <V2Tile delay={0.35}>
              <div className="v2-count" style={{ animationDelay: '0.55s', fontSize: 64, fontWeight: 800, lineHeight: 0.9, color: '#15202a', marginBottom: 10 }}>+110</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em' }}>Kantoren</div>
            </V2Tile>
            <V2Tile delay={0.4}>
              <div className="v2-count" style={{ animationDelay: '0.6s', fontSize: 64, fontWeight: 800, lineHeight: 0.9, color: '#15202a', marginBottom: 10 }}>+2600</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em' }}>Gebruikers</div>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* INTRO */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="01" eyebrow="De basis" title="IT die past bij het" accent="juridisch werkproces." />
          <V2Tile delay={0.05} style={{ background: '#fbf9f4', padding: '48px 56px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60 }}>
              <p style={{ fontSize: 19, lineHeight: 1.5, color: '#15202a' }}>
                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, lineHeight: 1.55 }}>
                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>
          </V2Tile>
        </div>
      </section>

      {/* TIMELINE */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="02" eyebrow="Van bierviltje tot 2600 gebruikers" title="Drie momenten," accent="één verhaal." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, gridAutoRows: '380px' }}>
            {[
              { 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.', featured: true },
              { 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) => (
              <V2Tile key={i} delay={0.05 + i * 0.08} className={e.featured ? 'v2-tile--orange' : ''} style={{ display: 'flex', flexDirection: 'column' }}>
                <div className="v2-count" style={{ animationDelay: `${0.15 + i * 0.08}s`, fontSize: 88, fontWeight: 800, lineHeight: 0.9, letterSpacing: '-0.045em', color: e.featured ? '#fff' : '#FF6900', marginBottom: 28 }}>{e.y}</div>
                <h4 style={{ color: e.featured ? '#fff' : '#15202a', fontSize: 22, marginBottom: 14, fontWeight: 700, letterSpacing: '-0.02em' }}>{e.t}</h4>
                <p style={{ color: e.featured ? 'rgba(255,255,255,0.92)' : '#3a4754', fontSize: 14.5, lineHeight: 1.65 }}>{e.b}</p>
              </V2Tile>
            ))}
          </div>
        </div>
      </section>

      {/* START + TOEKOMST */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="03" eyebrow="Verhaal" title="De start &" accent="de toekomst." />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <V2Tile delay={0.05} style={{ background: '#fbf9f4' }}>
              <div className="v2-eyebrow" style={{ marginBottom: 16 }}>De start</div>
              <h3 style={{ fontSize: 32, marginBottom: 20, letterSpacing: '-0.03em', lineHeight: 1.1 }}>De start van XINNO</h3>
              <p style={{ fontSize: 15.5, marginBottom: 18, lineHeight: 1.65 }}>
                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: 15.5, lineHeight: 1.65 }}>
                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>
            </V2Tile>
            <V2Tile delay={0.15} style={{ background: '#fbf9f4' }}>
              <div className="v2-eyebrow" style={{ marginBottom: 16 }}>De toekomst</div>
              <h3 style={{ fontSize: 32, marginBottom: 20, letterSpacing: '-0.03em', lineHeight: 1.1 }}>De toekomst van XINNO</h3>
              <p style={{ fontSize: 15.5, marginBottom: 18, lineHeight: 1.65 }}>
                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.
              </p>
              <p style={{ fontSize: 15.5, lineHeight: 1.65 }}>
                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>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* RAMON QUOTE — dark gradient */}
      <section style={{ background: 'radial-gradient(ellipse at top right, rgba(255,105,0,0.18) 0%, transparent 50%), linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '140px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.5fr 1.5fr', gap: 64, alignItems: 'center' }}>
          <V2Tile delay={0.05} className="v2-tile--photo" style={{ background: 'transparent', border: 0 }}>
            <V2ImageReveal delay={0.15}>
              <V2Photo src="images/ramon-vandenheuvel.jpg" alt="Ramon van den Heuvel" corner="Founder" height={420} radius={18} />
            </V2ImageReveal>
          </V2Tile>
          <V2Tile delay={0.15} style={{ background: 'transparent', border: 0, padding: 0 }}>
            <div className="v2-eyebrow" style={{ color: '#FF6900' }}>Founder · Managing Director</div>
            <p style={{ fontSize: 34, fontWeight: 500, lineHeight: 1.3, color: '#fff', letterSpacing: '-0.022em', marginTop: 28, marginBottom: 40 }}>
              "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 IT zonder omkijken."
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ width: 40, height: 2, background: '#FF6900' }} />
              <div>
                <div style={{ fontSize: 16, color: '#fff', fontWeight: 700 }}>Ramon van den Heuvel</div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: '0.16em', marginTop: 2 }}>Oprichter & Managing Director</div>
              </div>
            </div>
          </V2Tile>
        </div>
      </section>

      {/* PARTNERS */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="04" eyebrow="Partners" title="Partners van" accent="XINNO." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {PARTNER_LOGOS.map((p, i) => (
              <V2Tile key={i} delay={0.05 + i * 0.06} style={{ background: '#fbf9f4', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '36px 20px', minHeight: 160 }}>
                {p.src ? (
                  <img src={p.src} alt={p.name} style={{ height: 60, maxWidth: '92%', width: 'auto', objectFit: 'contain', opacity: 0.78 }} />
                ) : (
                  <CustomerLogo {...p} opacity={0.7} fontSize={22} />
                )}
              </V2Tile>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '120px 56px' }}>
        <V2Tile delay={0.05} style={{ maxWidth: 1280, margin: '0 auto', background: '#0a141c', padding: '72px 64px', borderRadius: 24, border: 0, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 0, right: 0, width: 600, height: 400, background: 'radial-gradient(ellipse at top right, rgba(255,105,0,0.22) 0%, transparent 60%)', pointerEvents: 'none' }} />
          <div style={{ position: 'relative' }}>
            <div className="v2-eyebrow" style={{ color: '#FF6900' }}>IT zonder omkijken</div>
            <h2 style={{ color: '#fff', marginTop: 24, fontSize: 56, lineHeight: 1.0, marginBottom: 24, maxWidth: 760 }}>
              Is uw kantoor ook toe aan IT zonder omkijken?
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 17, maxWidth: 580, marginBottom: 36, 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={{ fontSize: 16, padding: '20px 32px' }}>Neem contact op <V2Icon name="arrow" size={18} color="#fff" /></button>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.1em' }}>020 242 0800</span>
            </div>
          </div>
        </V2Tile>
      </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">
      <V2Nav active="De online werkplek" />

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 56px 0', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.18em' }}>
        De online werkplek · Xinno Private Desktop
      </div>

      {/* HERO — bento */}
      <section style={{ padding: '60px 56px 80px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0, marginBottom: 40 }}>
            <div className="v2-eyebrow">XINNO · ons vlaggenschip</div>
            <h1 style={{ marginTop: 28, fontSize: 96, lineHeight: 0.96 }}>Private Desktop.</h1>
          </V2Tile>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridAutoRows: '220px', gap: 16 }}>
            <V2Tile delay={0.15} style={{ gridColumn: 'span 2', gridRow: 'span 2', display: 'flex', flexDirection: 'column' }}>
              <p style={{ fontSize: 19, lineHeight: 1.5, color: '#15202a', marginBottom: 18 }}>
                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: 15.5, lineHeight: 1.6, marginBottom: 24 }}>
                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', gap: 12, alignItems: 'center', marginTop: 'auto' }}>
                <button className="v2-cta">Plan kennismaking <V2Icon name="arrow" size={16} color="#fff" /></button>
                <button className="v2-cta v2-cta--ghost">Bekijk video</button>
              </div>
            </V2Tile>
            <V2Tile delay={0.2} className="v2-tile--photo" style={{ gridColumn: 'span 2', gridRow: 'span 2' }}>
              <V2ImageReveal delay={0.3} style={{ height: '100%' }}>
                <V2Photo src="images/feature-2.jpg" alt="Veilig werken vanaf elk apparaat" corner="Private Desktop" height="100%" radius={18} />
              </V2ImageReveal>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* FEATURES — 4 bento tiles */}
      <section style={{ padding: '120px 56px', background: '#fbf9f4' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="01" eyebrow="Wat krijgt u" title="Vier dingen," accent="geen omkijken." />
          <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, idx) => (
              <V2Tile key={idx} delay={0.05 + idx * 0.08} style={{ background: '#fff' }}>
                <div className="v2-icon-tile"><V2Icon name={f.i} size={26} /></div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 28, marginBottom: 12 }}>0{idx + 1} / Feature</div>
                <h3 style={{ fontSize: 26, marginBottom: 14, letterSpacing: '-0.025em', lineHeight: 1.18 }}>{f.n}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65 }}>{f.b}</p>
              </V2Tile>
            ))}
          </div>
        </div>
      </section>

      {/* SIMPEL */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="02" eyebrow="Onze belofte" title="Maak het simpel" accent="met XINNO." />
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <V2Tile delay={0.05} style={{ background: '#fbf9f4' }}>
              <p style={{ fontSize: 18, 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>
            </V2Tile>
            <V2Tile delay={0.15} className="v2-tile--orange" style={{ display: 'flex', alignItems: 'center' }}>
              <p style={{ fontSize: 26, fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.02em', color: '#fff' }}>
                Geen omkijken meer naar IT, dat is onze belofte.
              </p>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* TRUST */}
      <section style={{ padding: '60px 56px 120px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="03" eyebrow="U bent in goed gezelschap" title="U bent in" accent="goed gezelschap." />
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0, marginBottom: 24 }}>
            <p style={{ fontSize: 16, color: '#3a4754', maxWidth: 720 }}>XINNO geniet het vertrouwen van vele advocatenkantoren. Zij gingen u voor in de keuze voor IT zonder omkijken.</p>
          </V2Tile>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 16 }}>
            {KLANT_LOGOS.map((p, i) => (
              <V2Tile key={i} delay={0.05 + i * 0.04} style={{ background: '#fbf9f4', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 12px', minHeight: 110 }}>
                {p.src ? (
                  <img src={p.src} alt={p.name} style={{ height: 36, maxWidth: '92%', width: 'auto', objectFit: 'contain', opacity: 0.72 }} />
                ) : (
                  <CustomerLogo {...p} opacity={0.62} fontSize={15} />
                )}
              </V2Tile>
            ))}
          </div>
        </div>
      </section>

      {/* EXTRA VEILIG — dark gradient */}
      <section style={{ background: 'radial-gradient(ellipse at top right, rgba(255,105,0,0.20) 0%, transparent 50%), linear-gradient(180deg, #0a141c 0%, #15202a 100%)', color: '#fff', padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2Tile delay={0.05} style={{ background: 'transparent', border: 0, padding: 0, marginBottom: 48 }}>
            <div className="v2-eyebrow" style={{ color: '#FF6900' }}>Maak uw werkplek compleet</div>
            <h2 style={{ color: '#fff', marginTop: 24, fontSize: 64, lineHeight: 1.0 }}>Extra veilig werken.</h2>
          </V2Tile>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 16 }}>
            <V2Tile delay={0.15} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)' }}>
              <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 17, marginBottom: 20, 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: 15.5, marginBottom: 32, lineHeight: 1.6 }}>
                Zo kunt u ervoor kiezen om uw IT-omgeving 24×7 proactief te laten bewaken door ons SOC-SIEM – vergelijkbaar met uw creditcard maatschappij die verdacht gedrag detecteert en stopt voor het te laat is.
              </p>
              <button className="v2-cta">Bekijk alle security opties <V2Icon name="arrow" size={18} color="#fff" /></button>
            </V2Tile>
            <V2Tile delay={0.25} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)' }}>
              <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', 'Immutable back-up', '24 × 7 SOC-SIEM', 'Aangetekend Mailen'].map((s, i) => (
                  <li key={i} style={{ padding: '18px 0', borderBottom: '1px solid rgba(255,255,255,0.14)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 16, color: '#fff', fontWeight: 600 }}>
                    <span>{s}</span>
                    <V2Icon name="arrow" size={16} color="#FF6900" />
                  </li>
                ))}
              </ul>
            </V2Tile>
          </div>
        </div>
      </section>

      {/* ANDERE OPLOSSINGEN */}
      <section style={{ padding: '120px 56px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <V2SectionHeader num="04" eyebrow="Onze andere oplossingen" title="Niet de juiste" accent="pasvorm?" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {[
              { i: 'cloud', 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.' },
              { i: 'monitor', 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) => (
              <V2Tile key={i} delay={0.05 + i * 0.1}>
                <div className="v2-icon-tile"><V2Icon name={p.i} size={26} /></div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 28, marginBottom: 12 }}>0{i + 2} / desktop</div>
                <h3 style={{ fontSize: 28, marginBottom: 16, letterSpacing: '-0.025em', lineHeight: 1.18 }}>{p.n}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 24 }}>{p.b}</p>
                <a style={{ color: '#FF6900', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>Meer over {p.n.split(' ').slice(-2).join(' ')} <V2Icon name="arrow" size={14} color="#FF6900" /></a>
              </V2Tile>
            ))}
          </div>
        </div>
      </section>

      <V2Footer />
    </div>
  );
}

/* V2 FOOTER */
function V2Footer() {
  return (
    <footer className="v2-footer">
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 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>
          <div>
            <h5>Nieuwsbrief</h5>
            <p style={{ marginBottom: 18, fontSize: 13.5 }}>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: 14, 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 16px', color: '#fff', fontSize: 13.5, flex: 1, outline: 'none', fontFamily: 'inherit' }} />
              <button style={{ background: '#FF6900', border: 0, color: '#fff', padding: '12px 20px', fontWeight: 700, fontSize: 13, borderRadius: 10 }}>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 · Amsterdam</span>
        </div>
      </div>
    </footer>
  );
}

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