/* ============================================================
   V1 — Engineering-confident (Linear/Attio/Modal vibe)
   Sober palette · Inter 400/500/700 · JetBrains Mono labels
   144→96px padding · 0px radius · STATIC · 200ms hover only
   Hero pattern: split 50/50 with photo right
   Icons: Lucide line, 1.5px stroke
============================================================ */

/* --- Lucide-style line icons (1.5px) --- */
function V1Icon({ name, size = 22, color = 'currentColor' }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></>,
    server: <><rect x="3" y="4" width="18" height="6" rx="0"/><rect x="3" y="14" width="18" height="6" rx="0"/><line x1="7" y1="7" x2="7.01" y2="7"/><line x1="7" y1="17" x2="7.01" y2="17"/></>,
    cloud: <><path d="M18 10a6 6 0 0 0-11.5-2A5 5 0 0 0 7 18h11a4 4 0 0 0 0-8z"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    lock: <><rect x="3" y="11" width="18" height="11" rx="0"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    monitor: <><rect x="2" y="3" width="20" height="14" rx="0"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></>,
    users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    map: <><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    play: <><polygon points="6 4 20 12 6 20 6 4"/></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></>,
  };
  return <svg {...props}>{paths[name] || null}</svg>;
}

/* Common section header — eyebrow + index */
function V1Eyebrow({ index, label, orange }) {
  return (
    <div className="v1-eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 14, color: orange ? '#FF6900' : undefined }}>
      <span style={{ opacity: 0.5 }}>{index}</span>
      <span style={{ width: 22, height: 1, background: 'currentColor', opacity: 0.4 }} />
      <span>{label}</span>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   V1 HOMEPAGE
────────────────────────────────────────────────────────────── */
function V1Home() {
  return (
    <div className="variant v1" data-variant="1" data-page="home" data-screen-label="V1 · Homepage">

      {/* NAV */}
      <nav className="v1-nav">
        <XinnoLogo size={24} />
        <div className="v1-nav__links">
          <a>De online werkplek</a>
          <a>Onmisbare aanvullingen</a>
          <a>Over ons</a>
          <a>Nieuws</a>
          <a>Contact</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <span className="v1-nav__phone">020 242 0800</span>
          <a style={{ fontSize: 13, color: '#394A58', fontWeight: 500 }}>inloggen</a>
          <button className="v1-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO — split 50/50 text left, photo right */}
      <section className="v1-section" style={{ paddingTop: 110, paddingBottom: 130, maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <V1Eyebrow index="01 — XINNO" label="IT voor de advocatuur" />
            <h1 style={{ marginTop: 28, marginBottom: 28, fontSize: 68 }}>IT zonder omkijken.</h1>
            <p style={{ fontSize: 19, maxWidth: 480, marginBottom: 36, color: '#394A58' }}>
              Dat is werken met de 365 Modern Workplace voor de advocatuur en het notariaat van XINNO.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
              <button className="v1-cta">Ontdek de werkplek <V1Icon name="arrow" size={16} /></button>
              <a className="v1-link">Plan een kennismaking</a>
            </div>
            <div style={{ marginTop: 64, paddingTop: 28, borderTop: '1px solid #DEE1E7', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28 }}>
              {[
                ['17 jaar', 'gespecialiseerd in IT voor juridische professionals'],
                ['NL', 'Amsterdams datacenter, 24×7 bewaakt'],
                ['Onderdeel', 'van TSH (Strikwerda Investments)'],
              ].map(([k, v], i) => (
                <div key={i}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: 6 }}>0{i+1}</div>
                  <div style={{ fontWeight: 600, fontSize: 14, color: '#0a0a0a', marginBottom: 3 }}>{k}</div>
                  <div style={{ fontSize: 13, color: '#7B8896', lineHeight: 1.55 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          <PhotoSlot
            height={520}
            src="images/hero-advocaat.jpg"
            alt="Advocaat aan het werk in lichte ruimte"
            corner="01 / 13"
            style={{ borderRadius: 0 }}
          />
        </div>
      </section>

      {/* hairline + subtle X-diagonal accent */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 64px', display: 'flex', justifyContent: 'flex-end' }}>
        <XDiagonal width={48} height={28} fill="#FF6900" stroke strokeWidth={1.2} />
      </div>
      <div className="v1-divider" style={{ maxWidth: 1240, margin: '20px auto 0', marginInline: 'auto', width: 'calc(100% - 128px)' }} />

      {/* LEDE */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80 }}>
          <V1Eyebrow index="02" label="Voor advocaten en notarissen" />
          <div style={{ maxWidth: 720 }}>
            <h2 style={{ marginBottom: 32, fontSize: 38, lineHeight: 1.18 }}>
              Waar ambitie groeit, groeit XINNO mee.
            </h2>
            <p style={{ fontSize: 17, 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: 17, marginBottom: 22 }}>
              Als ervaren experts in dé online werkplek voor de advocatuur en het notariaat bieden wij een oplossing die voldoet aan de hoge eisen van juridische professionals.
            </p>
            <p style={{ fontSize: 17, marginBottom: 28 }}>
              Wij kennen uw processen, spreken uw taal en begrijpen uw afhankelijkheid van IT als geen ander. Dat is onze basis voor uw partner voor zorgeloze IT.
            </p>
            <a className="v1-link">Neem contact met ons op</a>
          </div>
        </div>
      </section>

      <div className="v1-divider" style={{ maxWidth: 1240, margin: '0 auto', width: 'calc(100% - 128px)' }} />

      {/* SERVICES GRID */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="03" label="De 365 Modern Workplaces" />
          <div style={{ maxWidth: 720 }}>
            <h2 style={{ marginBottom: 16, fontSize: 38, lineHeight: 1.18 }}>De 365 Modern Workplaces van XINNO</h2>
            <p style={{ fontSize: 17 }}>Voor iedere situatie een oplossing.</p>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid #DEE1E7' }}>
          {[
            { i: 'shield', name: 'XINNO Private Desktop', body: '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.' },
            { i: 'cloud', name: 'XINNO 365 Hybrid Desktop', body: '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', name: 'XINNO 365 Managed Desktop', body: '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} className="v1-card" style={{ borderRadius: 0, border: 0, borderRight: i < 2 ? '1px solid #DEE1E7' : 0, padding: '48px 36px 40px', display: 'flex', flexDirection: 'column', minHeight: 380 }}>
              <V1Icon name={s.i} size={26} color="#394A58" />
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em', marginTop: 28, marginBottom: 12 }}>0{i+1} / Product</div>
              <h4 style={{ marginBottom: 16, fontSize: 19, letterSpacing: '-0.01em' }}>{s.name}</h4>
              <p style={{ fontSize: 14.5, lineHeight: 1.65, flexGrow: 1, marginBottom: 28 }}>{s.body}</p>
              <a className="v1-link" style={{ alignSelf: 'flex-start', borderBottom: 0, color: '#FF6900', display: 'inline-flex', alignItems: 'center', gap: 6 }}>Meer <V1Icon name="arrow" size={14} /></a>
            </div>
          ))}
        </div>
      </section>

      {/* STATS */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="04" label="In cijfers" />
          <h2 style={{ fontSize: 38, lineHeight: 1.18, maxWidth: 600 }}>Sinds 2009 partner voor zorgeloze IT.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid #DEE1E7' }}>
          {[
            ['15', 'jaar ervaring in de advocatuur'],
            ['+110', 'aangesloten kantoren'],
            ['+2600', 'gebruikers met digitale vrijheid'],
          ].map(([n, l], i) => (
            <div key={i} style={{ padding: '48px 36px 40px', borderRight: i < 2 ? '1px solid #DEE1E7' : 0, borderBottom: '1px solid #DEE1E7' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 24 }}>{`0${i+1}`}</div>
              <div style={{ fontSize: 72, fontWeight: 700, color: '#0a0a0a', lineHeight: 0.95, letterSpacing: '-0.04em' }}>{n}</div>
              <div style={{ fontSize: 14, color: '#394A58', marginTop: 18, lineHeight: 1.55, maxWidth: 220 }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* NIEUWS */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="05" label="Nieuws & Actueel" />
          <h2 style={{ fontSize: 38, lineHeight: 1.18, maxWidth: 600 }}>Nieuws & Actueel</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {[
            { date: '03 / 2026', title: 'FD-special interview: De brug slaan tussen IT en advocatuur', body: 'In de FD special "Legal Succes & Compliance" sprak XINNO Managing Director Ramon van den Heuvel over het slaan van de brug tussen [...]' },
            { date: '02 / 2026', title: 'Brande & Verheij LLP werkt sneller en veiliger dankzij XINNO 365 Hybrid Desktop', body: 'Sinds de oprichting in mei 2019 vertrouwt Brande & Verheij LLP, een Rotterdams advocatenkantoor gespecialiseerd in burgerlijk recht en procesrecht, op XINNO als [...]' },
          ].map((n, i) => (
            <article key={i} style={{ border: '1px solid #DEE1E7', padding: 0 }}>
              <PhotoSlot height={240} src={i === 0 ? "images/news-fd-special.jpg" : "images/news-brande-verheij.jpg"} alt={i === 0 ? "FD-special interview" : "Brande & Verheij case"} corner={`0${i+1} / 02`} style={{ borderBottom: '1px solid #DEE1E7' }} />
              <div style={{ padding: '28px 30px 32px' }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 14 }}>{n.date}</div>
                <h4 style={{ marginBottom: 14, fontSize: 19, lineHeight: 1.3, letterSpacing: '-0.015em' }}>{n.title}</h4>
                <p style={{ fontSize: 14.5, marginBottom: 22, lineHeight: 1.65 }}>{n.body}</p>
                <a className="v1-link" style={{ fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: 0, color: '#FF6900' }}>Lees verder <V1Icon name="arrow" size={13} /></a>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <a className="v1-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>Naar nieuwsarchief <V1Icon name="arrow" size={14} /></a>
        </div>
      </section>

      {/* VIDEOS */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="06" label="Video channel" />
          <h2 style={{ fontSize: 38, lineHeight: 1.18, maxWidth: 600 }}>IT zonder omkijken, in beeld.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {XINNO_VIDEOS.map((v, i) => (
            <div key={i} style={{ border: '1px solid #DEE1E7' }}>
              <WistiaThumb id={v.id} duration={v.dur} title={v.title} height={200} />
              <div style={{ padding: '20px 24px 24px' }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 10 }}>{v.dur}</div>
                <h4 style={{ fontSize: 16, lineHeight: 1.35, letterSpacing: '-0.01em' }}>{v.title}</h4>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <a className="v1-link" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>Bekijk meer video's <V1Icon name="arrow" size={14} /></a>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="07" label="Wat juristen van ons vinden" />
          <h2 style={{ fontSize: 38, lineHeight: 1.18, maxWidth: 600 }}>Drie advocatenkantoren over XINNO.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid #DEE1E7' }}>
          {[
            { 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={{ padding: '48px 36px 44px', borderRight: i < 2 ? '1px solid #DEE1E7' : 0, borderBottom: '1px solid #DEE1E7' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 24 }}>0{i+1} / quote</div>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: '#0a0a0a', marginBottom: 32, fontWeight: 400 }}>“{t.q}”</p>
              <div style={{ fontSize: 14, color: '#394A58', fontWeight: 600 }}>{t.k}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA STRIP */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 80, paddingBottom: 120 }}>
        <div style={{ background: '#394A58', color: '#fff', padding: '72px 64px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 22 }}>IT zonder omkijken</div>
            <h2 style={{ fontSize: 40, color: '#fff', marginBottom: 18, lineHeight: 1.15 }}>Klaar voor uw digitale toekomst?</h2>
            <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 16, maxWidth: 480 }}>
              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: 16 }}>
            <button className="v1-cta" style={{ background: '#FF6900' }}>Neem contact op <V1Icon name="arrow" size={16} color="#fff" /></button>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em' }}>020 242 0800 · sales@xinno.nl</div>
          </div>
        </div>
      </section>

      <V1Footer />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   V1 — OVER ONS
────────────────────────────────────────────────────────────── */
function V1About() {
  return (
    <div className="variant v1" data-variant="1" data-page="about" data-screen-label="V1 · Over ons">
      <nav className="v1-nav">
        <XinnoLogo size={24} />
        <div className="v1-nav__links">
          <a>De online werkplek</a>
          <a>Onmisbare aanvullingen</a>
          <a style={{ color: '#0a0a0a' }}>Over ons</a>
          <a>Nieuws</a>
          <a>Contact</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <span className="v1-nav__phone">020 242 0800</span>
          <a style={{ fontSize: 13, color: '#394A58', fontWeight: 500 }}>inloggen</a>
          <button className="v1-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* HERO */}
      <section className="v1-section" style={{ paddingTop: 110, paddingBottom: 100, maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
          <div>
            <V1Eyebrow index="01 — XINNO" label="Over ons" />
            <h1 style={{ marginTop: 28, fontSize: 64, lineHeight: 1.05 }}>Een visie<br />apart.</h1>
            <p style={{ fontSize: 19, marginTop: 32, color: '#394A58', maxWidth: 460 }}>
              Wie zijn we, en waar gaan we naar toe? Dit is de visie onze op ICT voor de advocatuur.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 16 }}>
            <XDiagonal width={56} height={32} fill="#FF6900" stroke strokeWidth={1.2} />
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.12em', textAlign: 'right' }}>
              Founded 2009<br />Amsterdam, NL
            </div>
          </div>
        </div>
      </section>

      <div className="v1-divider" style={{ maxWidth: 1240, margin: '0 auto', width: 'calc(100% - 128px)' }} />

      {/* INTRO TEXT */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80 }}>
          <V1Eyebrow index="02" label="Visie" />
          <div style={{ maxWidth: 720 }}>
            <p style={{ fontSize: 19, marginBottom: 28, color: '#0a0a0a', lineHeight: 1.55 }}>
              In de advocatuur is IT ondersteunend en complex, maar onmisbaar. Een groeiend aantal systemen en databronnen helpen de advocaat bij het tot een goed einde brengen van een zaak en bij het organiseren van het kantoor.
            </p>
            <p style={{ fontSize: 17, marginBottom: 22 }}>
              Maar als advocaat wilt u zich richten op de cliënt en geen omkijken hebben naar hoe IT werkt: u wilt dat het werkt.
            </p>
            <p style={{ fontSize: 17 }}>
              XINNO laat advocaten zorgeloos werken met IT zonder omkijken. Op zo'n manier dat de IT past bij het juridisch werkproces, en wordt onderhouden door een partner die de juridische sector kent als zijn broekzak. Iedereen in uw organisatie kan dankzij XINNO onder alle omstandigheden, overal veilig en zorgeloos aan de slag met strikt vertrouwelijke informatie en elke applicatie.
            </p>
          </div>
        </div>
      </section>

      <div className="v1-divider" style={{ maxWidth: 1240, margin: '0 auto', width: 'calc(100% - 128px)' }} />

      {/* TIMELINE */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="03" label="Tijdlijn" />
          <h2 style={{ fontSize: 38, lineHeight: 1.18, maxWidth: 600 }}>Van bierviltje tot 2600 gebruikers.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid #DEE1E7' }}>
          {[
            { y: '2006', 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', 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', b: 'XINNO sluit zich aan bij TSH. Daarmee openden deuren voor het versneld doorvoeren van ontwikkelingen op technisch gebied, het implementeren van nieuwe innovaties en het verder professionaliseren van de diensten.' },
          ].map((e, i) => (
            <div key={i} style={{ padding: '48px 36px 44px', borderRight: i < 2 ? '1px solid #DEE1E7' : 0, borderBottom: '1px solid #DEE1E7' }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 18 }}>0{i+1} / mijlpaal</div>
              <div style={{ fontSize: 56, fontWeight: 700, color: '#FF6900', lineHeight: 1, letterSpacing: '-0.03em', marginBottom: 24 }}>{e.y}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.65 }}>{e.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* START + TOEKOMST + RAMON */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="04" label="De start van XINNO" />
          <div style={{ maxWidth: 720 }}>
            <h3 style={{ marginBottom: 20 }}>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="v1-divider" style={{ margin: '40px 0 56px' }} />

        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80 }}>
          <V1Eyebrow index="05" label="De toekomst" />
          <div style={{ maxWidth: 720 }}>
            <h3 style={{ marginBottom: 20 }}>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. Niet alleen qua technologie, maar ook qua support en ondersteunende dienstverlening door onze collega's.
            </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 */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 40, paddingBottom: 100 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start' }}>
          <PhotoSlot height={460} label="PORTRAIT · Ramon van den Heuvel, Managing Director, kantoor Amsterdam, fly-on-the-wall, natuurlijk licht" corner="PORTRAIT" />
          <div style={{ paddingTop: 16 }}>
            <V1Eyebrow index="06" label="Founder" orange />
            <div style={{ marginTop: 28 }}>
              <p style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.35, color: '#0a0a0a', letterSpacing: '-0.02em', marginBottom: 36 }}>
                "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={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 6 }}>Ramon van den Heuvel</div>
              <div style={{ fontSize: 13, color: '#394A58', fontWeight: 500 }}>Oprichter en Managing Director</div>
            </div>
          </div>
        </div>
      </section>

      {/* PARTNERS */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 0 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 40 }}>
          <V1Eyebrow index="07" label="Partners" />
          <h2 style={{ fontSize: 38, lineHeight: 1.18, maxWidth: 600 }}>Partners van XINNO</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderTop: '1px solid #DEE1E7', borderBottom: '1px solid #DEE1E7' }}>
          {PARTNER_LOGOS.map((p, i) => (
            <div key={i} style={{ padding: '48px 24px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: i < 4 ? '1px solid #DEE1E7' : 0 }}>
              <CustomerLogo {...p} opacity={0.55} />
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingBottom: 120 }}>
        <div style={{ background: '#394A58', color: '#fff', padding: '72px 64px' }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FF6900', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 22 }}>IT zonder omkijken</div>
          <h2 style={{ fontSize: 40, color: '#fff', marginBottom: 22, lineHeight: 1.15, maxWidth: 720 }}>
            Is uw advocatenkantoor ook toe aan IT zonder omkijken?
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 16, maxWidth: 600, marginBottom: 36 }}>
            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', gap: 18, alignItems: 'center' }}>
            <button className="v1-cta" style={{ background: '#FF6900' }}>Neem contact op <V1Icon name="arrow" size={16} color="#fff" /></button>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.08em' }}>020 242 0800</div>
          </div>
        </div>
      </section>

      <V1Footer />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   V1 — XINNO PRIVATE DESKTOP
────────────────────────────────────────────────────────────── */
function V1PrivateDesktop() {
  return (
    <div className="variant v1" data-variant="1" data-page="private-desktop" data-screen-label="V1 · Private Desktop">
      <nav className="v1-nav">
        <XinnoLogo size={24} />
        <div className="v1-nav__links">
          <a style={{ color: '#0a0a0a' }}>De online werkplek</a>
          <a>Onmisbare aanvullingen</a>
          <a>Over ons</a>
          <a>Nieuws</a>
          <a>Contact</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <span className="v1-nav__phone">020 242 0800</span>
          <a style={{ fontSize: 13, color: '#394A58', fontWeight: 500 }}>inloggen</a>
          <button className="v1-nav__cta">servicedesk</button>
        </div>
      </nav>

      {/* breadcrumb */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '24px 64px 0', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
        De online werkplek / Xinno Private Desktop
      </div>

      {/* HERO */}
      <section className="v1-section" style={{ paddingTop: 80, paddingBottom: 100, maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <V1Eyebrow index="01 — XINNO" label="Private Desktop" />
            <h1 style={{ marginTop: 28, marginBottom: 28, fontSize: 60, lineHeight: 1.05 }}>
              Veilig bij uw dossiers,<br />altijd en overal.
            </h1>
            <p style={{ fontSize: 18, maxWidth: 520, marginBottom: 22, color: '#394A58' }}>
              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: 16, maxWidth: 520, marginBottom: 36 }}>
              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: 20 }}>
              <button className="v1-cta">Plan kennismaking <V1Icon name="arrow" size={16} /></button>
              <a className="v1-link">Bekijk video</a>
            </div>
          </div>
          <PhotoSlot
            height={520}
            label="PRODUCT VISUAL · XINNO Private Desktop — online bureaublad-interface, Nederlands datacenter, abstract gestileerd"
            corner="01 / PD"
          />
        </div>
      </section>

      <div className="v1-divider" style={{ maxWidth: 1240, margin: '0 auto', width: 'calc(100% - 128px)' }} />

      {/* FEATURES 4-up */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="02" label="Wat krijgt u" />
          <h2 style={{ fontSize: 38, lineHeight: 1.18, maxWidth: 600 }}>Vier dingen waar u niet meer over hoeft na te denken.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid #DEE1E7' }}>
          {[
            { 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} className="v1-card" style={{ borderRadius: 0, border: 0, borderRight: i % 2 === 0 ? '1px solid #DEE1E7' : 0, borderBottom: i < 2 ? '1px solid #DEE1E7' : 0, padding: '48px 40px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                <V1Icon name={f.i} size={22} color="#FF6900" />
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em' }}>0{i+1} / feature</div>
              </div>
              <h4 style={{ fontSize: 22, marginBottom: 14, letterSpacing: '-0.015em' }}>{f.n}</h4>
              <p style={{ fontSize: 15, lineHeight: 1.65 }}>{f.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* SIMPEL MET XINNO */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 60 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80 }}>
          <V1Eyebrow index="03" label="Onze belofte" />
          <div style={{ maxWidth: 720 }}>
            <h2 style={{ fontSize: 42, marginBottom: 28, lineHeight: 1.15 }}>Maak het simpel met XINNO.</h2>
            <p style={{ fontSize: 17, marginBottom: 22, color: '#0a0a0a' }}>
              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>
            <p style={{ fontSize: 19, fontWeight: 600, color: '#0a0a0a', letterSpacing: '-0.015em' }}>
              Geen omkijken meer naar IT, dat is onze belofte.
            </p>
          </div>
        </div>
      </section>

      <div className="v1-divider" style={{ maxWidth: 1240, margin: '40px auto 0', width: 'calc(100% - 128px)' }} />

      {/* TRUST — KLANT-LOGOS */}
      <section className="v1-section" style={{ maxWidth: 1240 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 56 }}>
          <V1Eyebrow index="04" label="In goed gezelschap" />
          <div style={{ maxWidth: 720 }}>
            <h2 style={{ fontSize: 38, lineHeight: 1.18, marginBottom: 16 }}>U bent in goed gezelschap.</h2>
            <p style={{ fontSize: 17 }}>XINNO geniet het vertrouwen van vele advocatenkantoren. Zij gingen u voor in de keuze voor IT zonder omkijken.</p>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', borderTop: '1px solid #DEE1E7', borderBottom: '1px solid #DEE1E7' }}>
          {KLANT_LOGOS.map((p, i) => (
            <div key={i} style={{ padding: '42px 12px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: i < 6 ? '1px solid #DEE1E7' : 0, minHeight: 110 }}>
              <CustomerLogo {...p} opacity={0.58} fontSize={Math.min(p.fontSize, 16)} />
            </div>
          ))}
        </div>
      </section>

      {/* EXTRA VEILIG */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 60 }}>
        <div style={{ background: '#394A58', color: '#fff', padding: '80px 64px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -20, top: -20, opacity: 0.18 }}>
            <XDiagonal width={280} height={160} fill="#FF6900" stroke strokeWidth={1.2} />
          </div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60 }}>
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: '#FFA100', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 22 }}>05 — Maak uw werkplek compleet</div>
              <h2 style={{ fontSize: 42, color: '#fff', marginBottom: 24, lineHeight: 1.15 }}>Extra veilig werken.</h2>
              <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 16, marginBottom: 22, maxWidth: 540 }}>
                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: 28, maxWidth: 540 }}>
                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="v1-cta" style={{ background: '#FF6900' }}>Bekijk alle security opties <V1Icon name="arrow" size={16} color="#fff" /></button>
            </div>
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 18 }}>Extra veilig met</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 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.12)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 15, color: '#fff' }}>
                    <span>{s}</span>
                    <V1Icon name="arrow" size={14} color="rgba(255,255,255,0.5)" />
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ANDERE OPLOSSINGEN */}
      <section className="v1-section" style={{ maxWidth: 1240, paddingTop: 80, paddingBottom: 100 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, marginBottom: 40 }}>
          <V1Eyebrow index="06" label="Onze andere oplossingen" />
          <h2 style={{ fontSize: 32, lineHeight: 1.18, maxWidth: 600 }}>Niet de juiste pasvorm? Bekijk de andere werkplekken.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid #DEE1E7' }}>
          {[
            { 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} style={{ padding: '40px 40px 36px', borderRight: i === 0 ? '1px solid #DEE1E7' : 0 }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#9CA7B5', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 14 }}>0{i+2} / desktop</div>
              <h4 style={{ marginBottom: 14, fontSize: 22, letterSpacing: '-0.015em' }}>{p.n}</h4>
              <p style={{ fontSize: 14.5, lineHeight: 1.65, marginBottom: 24 }}>{p.b}</p>
              <a className="v1-link" style={{ borderBottom: 0, color: '#FF6900', display: 'inline-flex', alignItems: 'center', gap: 6 }}>Meer <V1Icon name="arrow" size={14} /></a>
            </div>
          ))}
        </div>
      </section>

      <V1Footer />
    </div>
  );
}

/* V1 FOOTER */
function V1Footer() {
  return (
    <footer className="v1-footer">
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 0 56px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.2fr', gap: 56 }}>
        <div>
          <XinnoLogo size={26} variant="white" />
          <p style={{ marginTop: 24, fontSize: 14, color: 'rgba(255,255,255,0.7)', maxWidth: 300, lineHeight: 1.65 }}>
            Buitenveldertselaan 106<br />1081 AB Amsterdam<br /><br />
            020 242 0800<br />sales@xinno.nl<br />servicedesk@xinno.nl
          </p>
        </div>
        <div>
          <h5>Navigatie</h5>
          <ul>
            {['De online werkplek', 'Onmisbare aanvullingen', 'Contact', 'Nieuws', 'Over ons', 'Wat juristen van ons vinden', 'Werken bij XINNO'].map((l, i) => (
              <li key={i} style={{ marginBottom: 8 }}><a>{l}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <h5>Overig</h5>
          <ul>
            {['Algemene voorwaarden', 'Privacy statement', 'Klachtenafhandeling'].map((l, i) => (
              <li key={i} style={{ marginBottom: 8 }}><a>{l}</a></li>
            ))}
          </ul>
          <div style={{ marginTop: 32, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
            KvK 34332222 · Amsterdam
          </div>
        </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, border: '1px solid rgba(255,255,255,0.2)' }}>
            <input placeholder="uw@kantoor.nl" style={{ background: 'transparent', border: 0, padding: '12px 14px', color: '#fff', fontSize: 13, flex: 1, outline: 'none', fontFamily: 'inherit' }} />
            <button style={{ background: '#FF6900', border: 0, color: '#fff', padding: '12px 20px', fontWeight: 600, fontSize: 13 }}>Inschrijven</button>
          </div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 28, maxWidth: 1240, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, 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' }}>IT zonder omkijken</span>
      </div>
    </footer>
  );
}

Object.assign(window, { V1Home, V1About, V1PrivateDesktop });
