// KDInfotech — refreshed multi-page site (C·2 Deep Tech + science motifs).
// Exposes window.KDSite — a hash-routed click-through with shared chrome.
// Components (Button, Card) from the DS bundle; Icon from lucide-icon.js;
// background motifs from motifs.js (window.KDMotifs).
const { useState, useEffect } = React;
const NAVB = 'var(--navy-border)', LIME = 'var(--kdi-lime-500)';
const assetUrl = (p) => (window.__resources && window.__resources[p]) || p;

/* ---------- shared atoms ---------- */
function Motif({ kind, w = 1200, h = 360, strong = false, theme = 'dark', style }) {
  const inner = (window.KDMotifs && window.KDMotifs[kind] ? window.KDMotifs[kind](w, h, strong, theme) : '');
  return <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio={kind === 'trace' ? 'none' : 'xMidYMid slice'} aria-hidden="true"
    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', ...style }} dangerouslySetInnerHTML={{ __html: inner }} />;
}
// faint science-motif watermark for LIGHT sections (kills the "too white" feel)
function LightWash({ kind = 'lattice', style }) {
  return <Motif kind={kind} theme="light" w={760} h={420} style={{ left: 'auto', right: 0, width: '58%', maskImage: 'linear-gradient(90deg, transparent, #000 60%)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 60%)', ...style }} />;
}
// KDI lockup — high-res power mark + "KDI" in the brand serif (no "KDInfoTech, LLC")
function KDILogo({ height = 30, onClick }) {
  return (
    <a onClick={onClick} style={{ cursor: onClick ? 'pointer' : 'default', display: 'inline-flex', alignItems: 'center', gap: Math.round(height * 0.32) }}>
      <img src={assetUrl("../../assets/logo/kdi-mark.png")} alt="KDInfotech" style={{ height }} />
      <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: Math.round(height * 0.92), color: '#fff', letterSpacing: '0.01em', lineHeight: 1 }}>KDI</span>
    </a>
  );
}
function Eyebrow({ children, dark }) {
  return <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: dark ? LIME : 'var(--kdi-green-700)', fontWeight: 500 }}>{children}</div>;
}
function Serif({ children, style }) {
  return <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, letterSpacing: '-0.02em', margin: 0, ...style }}>{children}</h2>;
}
function Dark({ children, style, motif = 'wells', bg = 'var(--navy-900)' }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: bg, color: '#fff', ...style }}>
      <Motif kind={motif} />
      <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(96deg, ${bg} 0%, ${bg} 44%, transparent 86%)` }} />
      <div style={{ position: 'absolute', right: -150, top: -170, width: 500, height: 500, borderRadius: '50%', background: 'var(--glow-green)' }} />
      <div style={{ position: 'relative', zIndex: 2 }}>{children}</div>
    </section>
  );
}
const wrap = { maxWidth: 1160, margin: '0 auto', padding: '0 40px' };
// subtle green tint for light sections so they don't read as flat white
const TINT = 'linear-gradient(180deg, var(--accent-soft) 0%, var(--surface-page) 62%)';
const TINT_SOFT = 'linear-gradient(180deg, var(--surface-page) 0%, var(--accent-soft) 100%)';

/* ---------- header / footer ---------- */
const NAV = ['Capabilities', 'Clients', 'Partners', 'Careers', 'Contact'];
function Header({ page, go }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 100, background: 'var(--navy-950)', borderBottom: `1px solid ${NAVB}` }}>
      <div style={{ ...wrap, paddingTop: 18, paddingBottom: 18, display: 'flex', alignItems: 'center', gap: 28 }}>
      <KDILogo height={30} onClick={() => go('home')} />
      <nav style={{ display: 'flex', gap: 2, marginLeft: 12 }}>
        {NAV.map((l) => {
          const active = page === l.toLowerCase();
          return <a key={l} onClick={() => go(l.toLowerCase())} style={{ cursor: 'pointer', color: active ? '#fff' : '#B7C2CA', textDecoration: 'none', fontSize: 14, fontWeight: active ? 700 : 500, padding: '8px 12px', borderRadius: 8, borderBottom: active ? `2px solid ${LIME}` : '2px solid transparent' }}
            onMouseEnter={(e) => { e.currentTarget.style.color = '#fff'; }} onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = '#B7C2CA'; }}>{l}</a>;
        })}
      </nav>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={() => go('contact')} style={{ display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap', background: 'var(--accent)', color: '#fff', border: 'none', borderRadius: 9, padding: '11px 18px', font: 'inherit', fontFamily: 'var(--font-serif)', fontSize: 14, fontWeight: 700, cursor: 'pointer' }}>Connect with us</button>
      </div>
      </div>
    </div>
  );
}
function Footer({ go }) {
  const cols = { Capabilities: ['Managed services', 'Scientific & lab IT', 'Security', 'Compliance & regulatory'], Company: ['Clients', 'Partners', 'Careers', 'Contact'], Connect: ['LinkedIn', 'Email us'] };
  const route = { Clients: 'clients', Partners: 'partners', Careers: 'careers', Contact: 'contact' };
  const href = { LinkedIn: 'https://www.linkedin.com/company/kdinfotech/', 'Email us': 'mailto:contact@kdinfotech.com' };
  return (
    <footer style={{ position: 'relative', overflow: 'hidden', background: 'var(--navy-950)', color: 'var(--text-on-inverse)' }}>
      <div style={{ position: 'relative', zIndex: 2, ...wrap, paddingTop: 56, paddingBottom: 28, display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <div style={{ marginBottom: 16 }}><KDILogo height={32} /></div>
          <p style={{ fontSize: 16, color: 'var(--text-on-inverse-dim)', whiteSpace: 'nowrap', margin: '0 0 14px' }}>The IT partner for science-led organizations</p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: LIME }}>◆ SF Bay Area HQ &nbsp;·&nbsp; Established 2009</div>
        </div>
        {Object.entries(cols).map(([h, items]) => (
          <div key={h}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: LIME }}>{h}</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginTop: 14 }}>
              {items.map((it) => {
                if (href[it]) return <a key={it} href={href[it]} target={href[it].startsWith('http') ? '_blank' : undefined} rel={href[it].startsWith('http') ? 'noopener noreferrer' : undefined} style={{ cursor: 'pointer', fontSize: 14, color: 'var(--text-on-inverse)', textDecoration: 'none' }}>{it}</a>;
                const dest = h === 'Capabilities' ? 'capabilities' : route[it];
                return <a key={it} onClick={() => dest && go(dest)} style={{ cursor: dest ? 'pointer' : 'default', fontSize: 14, color: 'var(--text-on-inverse)', textDecoration: 'none' }}>{it}</a>;
              })}
            </div>
          </div>
        ))}
      </div>
      <div style={{ position: 'relative', zIndex: 2, ...wrap, paddingTop: 20, paddingBottom: 20, borderTop: `1px solid ${NAVB}`, display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--text-on-inverse-dim)' }}>
        <span>© 2026 KDInfotech, LLC. All rights reserved.</span>
        <span style={{ display: 'flex', gap: 18 }}><a onClick={() => go('terms')} style={{ cursor: 'pointer', color: 'var(--text-on-inverse-dim)' }}>Terms</a><a onClick={() => go('privacy')} style={{ cursor: 'pointer', color: 'var(--text-on-inverse-dim)' }}>Privacy</a></span>
      </div>
    </footer>
  );
}

/* ---------- reusable blocks ---------- */
function PageHero({ eyebrow, title, sub, motif, titleSize = 38 }) {
  return (
    <Dark motif={motif} bg="var(--navy-950)">
      <div style={{ ...wrap, paddingTop: 58, paddingBottom: 58, minHeight: 196, display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', gap: 16 }}>
        <Eyebrow dark>{eyebrow}</Eyebrow>
        <Serif style={{ fontSize: titleSize, lineHeight: 1.12, color: '#fff', margin: 0, maxWidth: 'none' }}>{title}</Serif>
        {sub && <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18.5, fontWeight: 300, lineHeight: 1.55, color: '#AEBAC3', maxWidth: 820, margin: 0 }}>{sub}</p>}
      </div>
    </Dark>
  );
}
function LogoWall({ logos, dir, cols = 5, pad = '14px 16px' }) {
  const tile = { height: 88, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', background: 'var(--surface-card)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: pad };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 16 }}>
      {logos.map(([file, name, href]) => {
        const inner = file
          ? <img src={assetUrl(`../../assets/${dir}/${file}`)} alt={name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
          : <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 18, color: 'var(--text-primary)', textAlign: 'center', letterSpacing: '-0.01em' }}>{name}</span>;
        return href
          ? <a key={name} href={href} target="_blank" rel="noopener noreferrer" title={name} style={{ ...tile, textDecoration: 'none', transition: 'border-color .15s, box-shadow .15s' }} onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,.06)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-default)'; e.currentTarget.style.boxShadow = 'none'; }}>{inner}</a>
          : <div key={name} title={name} style={tile}>{inner}</div>;
      })}
    </div>
  );
}
const CLIENT_LOGOS = [
  ['alzpath.png', 'AlzPath', 'https://alzpath.bio/'], ['arsenal.png', 'Arsenal Bio', 'https://www.arsenalbio.com'], ['attotude.png', 'AttoTude', 'https://www.attotude.com'], ['attovia.png', 'Attovia', 'https://www.attovia.com/'], ['billiontoone.png', 'BillionToOne', 'https://www.billiontoone.com'],
  ['cero.png', 'CERo Therapeutics', 'https://cero.bio/'], ['grace-science.png', 'Grace Science', 'https://www.gracescience.com'], ['lyell.png', 'Lyell', 'https://www.lyell.com'], ['merge-labs.png', 'Merge Labs', 'https://merge.io/'], ['metagenomi.png', 'Metagenomi', 'https://metagenomi.co/'],
  ['oregon-physics.png', 'Oregon Physics', 'https://www.oregon-physics.com'], ['outpace.png', 'Outpace Bio', 'https://www.outpacebio.com'], ['pinkdx.png', 'PinkDx', 'https://www.pinkdx.com'], ['prognomiq.png', 'PrognomIQ', 'https://www.prognomiq.com'], ['prolific-machines.png', 'Prolific Machines', 'https://www.prolificmachines.com'],
];
const PARTNER_LOGOS = [
  ['adobe.png', 'Adobe'], ['apple.png', 'Apple'], ['aws.png', 'AWS'], ['backblaze.png', 'Backblaze'], ['box.png', 'Box'],
  ['cisco-meraki.webp', 'Cisco Meraki'], ['crowdstrike.png', 'CrowdStrike'], ['drata.png', 'Drata'], ['druva.png', 'Druva'], ['google-workspace.png', 'Google Workspace'],
  ['jamf.png', 'Jamf'], ['juniper.png', 'Juniper'], ['lenovo.png', 'Lenovo'], ['logitech.png', 'Logitech'], ['microsoft.jpg', 'Microsoft'],
  ['okta.png', 'Okta'], ['palo-alto-networks.png', 'Palo Alto Networks'], ['proxmox.png', 'Proxmox'], ['pure-storage.png', 'Pure Storage'], ['sentinelone.png', 'SentinelOne'],
  ['truenas.png', 'TrueNAS'], ['veeam.png', 'Veeam'], ['vmware.png', 'VMware'], ['zoom.png', 'Zoom'],
];
function CTA({ go }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--navy-900)', color: '#fff' }}>
      <Motif kind="helix" w={520} h={300} strong style={{ left: 'auto', right: 0, width: '44%', opacity: 0.7, maskImage: 'linear-gradient(90deg, transparent, #000 46%)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 46%)' }} />
      <div style={{ position: 'absolute', right: -120, top: -140, width: 460, height: 460, borderRadius: '50%', background: 'var(--glow-green)' }} />
      <div style={{ position: 'relative', zIndex: 2, ...wrap, paddingTop: 72, paddingBottom: 72, display: 'flex', alignItems: 'center', gap: 32 }}>
        <div style={{ flex: 1 }}>
          <Serif style={{ fontSize: 38, color: '#fff', maxWidth: 620 }}>Let's keep your science moving.</Serif>
          <p style={{ fontSize: 16.5, color: '#AEBAC3', marginTop: 12, marginBottom: 0, maxWidth: 520 }}>Tell us what you're building. We'll handle the infrastructure behind it.</p>
        </div>
        <button onClick={() => go('contact')} style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--accent)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', padding: '15px 24px', font: 'inherit', fontSize: 15, fontWeight: 700, cursor: 'pointer', flex: 'none', whiteSpace: 'nowrap' }}>Connect with us <Icon name="arrow-right" size={18} /></button>
      </div>
    </section>
  );
}

const CAPS = [
  ['server-cog', 'Managed services', 'Full-spectrum IT operations and user support, with the consistent accessibility and responsiveness of a Bay Area-based team.', ['End user support', 'Identity & access management', 'Cloud operations', 'Backup & disaster recovery']],
  ['flask-conical', 'Scientific & lab IT', 'Specialized infrastructure for the technical complexity of research environments, from active labs to petabyte-scale compute.', ['Lab systems integration', 'ELN / LIMS / QMS administration', 'Petabyte-scale storage', 'HPC & AI / ML compute']],
  ['shield-check', 'Security', 'End-to-end security programs, from architecture and tooling to monitoring and incident response in regulated environments.', ['Endpoint detection & response', 'Incident response planning', 'Security architecture & monitoring', 'Vulnerability & patch management']],
  ['clipboard-check', 'Compliance & regulatory', 'Validation, audit readiness, and ongoing compliance across the frameworks that matter most in highly regulated industries.', ['GxP validation support', 'SOX IT general controls', 'IPO readiness', 'SOC 2 / HIPAA readiness']],
];

/* ---------- HOME ---------- */
// Reusable legible vertical DNA double helix (crisp line art, not a tiled pattern).
function DNAHelix({ height = 440, style }) {
  const H = 460, W = 360, cx = W / 2, amp = 96, turns = 2.6, N = 220;
  const s1 = [], s2 = [];
  for (let i = 0; i <= N; i++) {
    const y = 24 + (i / N) * (H - 48), t = (i / N) * Math.PI * 2 * turns;
    s1.push([cx + amp * Math.sin(t), y]);
    s2.push([cx + amp * Math.sin(t + Math.PI), y]);
  }
  const path = (pts) => 'M' + pts.map((p) => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' L');
  const rungs = [];
  for (let i = 6; i <= N; i += 12) {
    const a = s1[i], b = s2[i];
    rungs.push({ a, b, front: Math.cos((i / N) * Math.PI * 2 * turns) > 0, y: a[1] });
  }
  return (
    <svg viewBox={`0 0 ${W} ${H}`} aria-hidden="true" style={{ height, maxHeight: '100%', ...style }}>
      <defs>
        <linearGradient id="hx-green" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#D8E130" /><stop offset="100%" stopColor="#5E9E2E" /></linearGradient>
        <linearGradient id="hx-blue" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#6FA8DC" /><stop offset="100%" stopColor="#2E6BA8" /></linearGradient>
      </defs>
      {rungs.map((r, i) => (
        <line key={i} x1={r.a[0].toFixed(1)} y1={r.y.toFixed(1)} x2={r.b[0].toFixed(1)} y2={r.y.toFixed(1)}
          stroke="#BCD631" strokeWidth={r.front ? 3 : 2} strokeLinecap="round" opacity={r.front ? 0.85 : 0.4} />
      ))}
      <path d={path(s2)} fill="none" stroke="url(#hx-blue)" strokeWidth="5" strokeLinecap="round" opacity="0.85" />
      <path d={path(s1)} fill="none" stroke="url(#hx-green)" strokeWidth="5.5" strokeLinecap="round" />
      {rungs.filter((r) => r.front).map((r, i) => (
        <circle key={'n' + i} cx={r.a[0].toFixed(1)} cy={r.y.toFixed(1)} r="5" fill="#BCD631" />
      ))}
    </svg>
  );
}
function HeroMark() {
  return (
    <div style={{ position: 'relative', minHeight: 420, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', background: 'var(--glow-green)' }} />
      <DNAHelix height={440} style={{ position: 'relative' }} />
    </div>
  );
}
function Home({ go }) {
  return (
    <div>
      <Dark motif="wells">
        <div style={{ ...wrap, minHeight: 'calc(100vh - 67px)', paddingTop: 48, paddingBottom: 64, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{ maxWidth: 760 }}>
            <Eyebrow dark>KDInfotech</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 52, lineHeight: 1.07, letterSpacing: '-0.025em', margin: '16px 0 20px', color: '#fff' }}>The IT partner built for<br /><span style={{ color: LIME }}>science-led organizations.</span></h1>
            <p style={{ fontSize: 19, fontWeight: 300, lineHeight: 1.6, color: '#AEBAC3', maxWidth: 560, margin: '0 0 30px' }}>We run IT operations and infrastructure for biotech, life sciences, R&D-intensive, and high-tech companies in regulated and compliance-sensitive industries, from Day <span style={{ fontFamily: 'Helvetica, Arial, sans-serif' }}>1</span> buildout to enterprise-grade operations at scale.</p>
            <div style={{ display: 'flex', gap: 12 }}>
              <button onClick={() => go('contact')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap', background: 'var(--accent)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', padding: '14px 22px', font: 'inherit', fontFamily: 'var(--font-serif)', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>Connect with us <Icon name="arrow-right" size={18} /></button>
              <button onClick={() => go('capabilities')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap', background: 'transparent', color: '#fff', border: `1px solid ${NAVB}`, borderRadius: 'var(--radius-md)', padding: '13px 22px', font: 'inherit', fontFamily: 'var(--font-serif)', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>See our capabilities</button>
            </div>
            <div style={{ display: 'flex', gap: 22, marginTop: 30, fontFamily: 'var(--font-mono)', fontSize: 12, color: '#6E7E89' }}>
              <span style={{ color: LIME }}>◆ SF Bay Area HQ</span><span style={{ color: LIME }}>Founded in 2009</span>
            </div>
          </div>
        </div>
      </Dark>

      {/* capabilities teaser */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-page)' }}>
        <LightWash kind="wells" style={{ left: 0, right: 'auto', width: '52%', maskImage: 'linear-gradient(270deg, transparent, #000 60%)', WebkitMaskImage: 'linear-gradient(270deg, transparent, #000 60%)' }} />
        <div style={{ position: 'relative', ...wrap, paddingTop: 72, paddingBottom: 72 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36 }}>
            <div style={{ maxWidth: 720 }}><Eyebrow>Capabilities</Eyebrow><Serif style={{ fontSize: 34, marginTop: 12 }}>Comprehensive, end-to-end IT solutions.</Serif></div>
            <button onClick={() => go('capabilities')} style={{ background: 'transparent', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-md)', padding: '11px 18px', fontWeight: 700, fontSize: 14, cursor: 'pointer', display: 'inline-flex', gap: 8, alignItems: 'center' }}>Explore capabilities <Icon name="arrow-right" size={16} /></button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {CAPS.map(([icon, t, d]) => (
              <Card key={t} interactive onClick={() => go('capabilities')} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <span style={{ display: 'inline-flex', width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', color: 'var(--kdi-green-700)', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={23} /></span>
                <h3 style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em' }}>{t}</h3>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{d}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* west coast */}
      <Dark motif="wells">
        <div style={{ ...wrap, paddingTop: 72, paddingBottom: 72, display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 48, alignItems: 'center' }}>
          <div>
            <Eyebrow dark>Local presence</Eyebrow>
            <Serif style={{ fontSize: 34, color: '#fff', margin: '14px 0 16px', whiteSpace: 'nowrap' }}>Available where our clients operate.</Serif>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, fontWeight: 300, lineHeight: 1.6, color: '#AEBAC3', maxWidth: 520, margin: 0 }}>Most MSPs offshore their delivery. We don't. When a lab move can't slip or an instrument is down, a senior engineer who knows your setup is on site, not in a ticket queue 6 time zones away.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['map-pin', 'HQ in San Francisco Bay Area'], ['wrench', 'Primarily West Coast-based engineers'], ['users', 'Onsite capability throughout the U.S.']].map(([icon, t]) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px', background: 'rgba(255,255,255,.04)', border: `1px solid ${NAVB}`, borderRadius: 'var(--radius-md)' }}>
                <span style={{ display: 'inline-flex', width: 38, height: 38, borderRadius: 'var(--radius-sm)', background: 'var(--kdi-grad-power)', color: 'var(--navy-900)', alignItems: 'center', justifyContent: 'center', flex: 'none' }}><Icon name={icon} size={19} /></span>
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 15 }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </Dark>

      {/* differentiators */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(180deg, var(--accent-soft), var(--surface-page))', borderBottom: '1px solid var(--border-default)' }}>
        <LightWash kind="lattice" />
        <div style={{ position: 'relative', ...wrap, paddingTop: 64, paddingBottom: 64 }}>
          <div style={{ maxWidth: 720, marginBottom: 40 }}>
            <Eyebrow>Why KDI</Eyebrow>
            <Serif style={{ fontSize: 34, marginTop: 12 }}>The IT partner teams trust to get it right.</Serif>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[['microscope', 'Vertical expertise', 'We know the compliance landscape, vendor ecosystem, and operational realities of biotech, life sciences, and R&D-intensive companies in regulated and compliance-sensitive industries.'], ['award', 'Enterprise-grade credentials', 'We have experience building and managing IT infrastructure for multiple enterprise-scale companies. That rigor keeps your environment clean and audit-ready as you scale.'], ['compass', 'Stage-appropriate advisory', 'Client-first, always. We advise on what you actually need at each stage, and just as often, on what you don\u2019t. The result is IT that\u2019s right-sized for today, without limiting tomorrow.']].map(([icon, t, d]) => (
              <Card key={t} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <span style={{ display: 'inline-flex', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', color: 'var(--kdi-green-700)', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={22} /></span>
                <div style={{ fontWeight: 700, fontSize: 16 }}>{t}</div>
                <p style={{ margin: 0, fontWeight: 400, fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-secondary)' }}>{d}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- CAPABILITIES ---------- */
function Capabilities({ go }) {
  const verticals = [['dna', 'Newly funded biotechs', 'Day 1 IT, security posture, and lab buildout from scratch.'], ['flask-round', 'Scaling lab environments', 'New labs, new sites, fast headcount, deployed on accelerated timelines.'], ['cpu', 'High-compute & AI/ML', 'HPC/GPU clusters and petabyte storage for data-heavy science.'], ['landmark', 'Enterprise companies', 'SOX ITGC, audit readiness, and enterprise rigor.']];
  return (
    <div>
      <PageHero eyebrow="Capabilities" title={<>One <span style={{ color: LIME }}>partner</span> for the whole stack.</>} sub="From the lab bench to the compute cluster, we run the systems your work depends on and keep them reliable, secure, and scalable." motif="lattice" />
      <section style={{ position: 'relative', overflow: 'hidden', background: TINT }}>
        <LightWash kind="lattice" />
        <div style={{ position: 'relative', ...wrap, paddingTop: 64, paddingBottom: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {CAPS.map(([icon, t, d, list]) => (
            <Card key={t} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <span style={{ display: 'inline-flex', width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', color: 'var(--kdi-green-700)', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={24} /></span>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 21 }}>{t}</h3>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-secondary)' }}>{d}</p>
              <ul style={{ listStyle: 'none', margin: '4px 0 0', padding: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 18px' }}>
                {list.map((c) => <li key={c} style={{ display: 'flex', gap: 9, fontSize: 13, color: 'var(--text-secondary)' }}><span style={{ color: 'var(--accent)' }}>•</span>{c}</li>)}
              </ul>
            </Card>
          ))}
        </div>
      </section>
      {/* lifecycle */}
      <Dark motif="lattice">
        <div style={{ ...wrap, paddingTop: 64, paddingBottom: 64 }}>
          <Eyebrow dark>Across the lifecycle</Eyebrow>
          <Serif style={{ fontSize: 30, color: '#fff', margin: '12px 0 36px' }}>From your first hire to your IPO.</Serif>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
            {[['rocket', 'Day 1 buildout', 'Virtual CIO and security posture for newly funded teams.'], ['trending-up', 'Rapid scaling', 'New labs and sites deployed on accelerated timelines.'], ['building-2', 'Enterprise operations', 'Depth and rigor for mature, high-stakes programs.'], ['life-buoy', 'Ongoing support', 'Proactive management of complex, science-driven IT.']].map(([icon, t, d], i) => (
              <div key={t} style={{ padding: '4px 24px', borderLeft: i ? `1px solid ${NAVB}` : 'none' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#6E7E89', marginBottom: 14 }}>0{i + 1}</div>
                <span style={{ display: 'inline-flex', color: LIME, marginBottom: 12 }}><Icon name={icon} size={22} /></span>
                <div style={{ fontWeight: 700, fontSize: 16, color: '#fff', marginBottom: 8 }}>{t}</div>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: '#AEBAC3' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </Dark>
      <section style={{ background: TINT_SOFT, borderTop: '1px solid var(--border-default)' }}>
        <div style={{ ...wrap, paddingTop: 64, paddingBottom: 64 }}>
          <Eyebrow>Who we work with</Eyebrow>
          <Serif style={{ fontSize: 30, margin: '12px 0 32px' }}>A trusted partner at each stage.</Serif>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {verticals.map(([icon, t, d]) => (
              <div key={t} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <span style={{ display: 'inline-flex', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--navy-900)', color: LIME, alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={21} /></span>
                <div style={{ fontWeight: 700, fontSize: 15.5 }}>{t}</div>
                <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: 'var(--text-secondary)' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- CLIENTS ---------- */
function Clients({ go }) {
  const examples = [['MSP transition, zero downtime', 'Following the sudden departure of a client\'s previous MSP, we stepped in immediately — tickets resolved, projects on track, new hires equipped. Now we\'re building their IT roadmap as long-term partners.'], ['Built to move as fast as the science', 'For a fast-changing client, our agile team develops processes and policies as flexible as their needs — keeping them ready for any challenge and ahead of the curve.']];
  return (
    <div>
      <PageHero eyebrow="Clients" title={<>Trusted by the world's <span style={{ color: LIME }}>most innovative companies</span></>} sub="We have the pleasure of supporting organizations, from newly established startups to enterprise-scale companies, on their mission to change the world." motif="cells" />
      <section style={{ background: TINT }}>
        <div style={{ ...wrap, paddingTop: 56, paddingBottom: 72 }}><LogoWall logos={CLIENT_LOGOS} dir="clients-trim" cols={5} /></div>
      </section>
    </div>
  );
}

/* ---------- PARTNERS ---------- */
function Partners({ go }) {
  return (
    <div>
      <PageHero eyebrow="Partners" title={<>Partnered with the <span style={{ color: LIME }}>best in the ecosystem.</span></>} sub="We build on the vendor and technology relationships that let us deliver the solutions and infrastructure our clients need today." motif="contour" />
      <section style={{ background: TINT }}>
        <div style={{ ...wrap, paddingTop: 56, paddingBottom: 72 }}>
          <LogoWall logos={PARTNER_LOGOS} dir="partners" cols={6} pad="8px 12px" />
        </div>
      </section>
    </div>
  );
}

/* ---------- CAREERS ---------- */
function Careers({ go }) {
  const perks = [['users', 'Supportive team & culture'], ['graduation-cap', 'Mentorship & growth'], ['heart-pulse', 'Comprehensive benefits'], ['calendar', 'Unlimited PTO']];
  const roles = [['Technical Operations Manager', 'Santa Clara, CA'], ['System Administrator', 'Portland, OR']];
  const culture = [['handshake', 'A team that backs you up', 'Collaborative by default. When you hit something hard, senior engineers dig in alongside you until it is solved.'], ['compass', 'Mentorship and real growth', 'Clear paths to grow your skills and your career, with people invested in getting you there.'], ['sparkles', 'Work that matters', 'The systems you run power real science, and your work has weight and visibility.']];
  return (
    <div>
      <PageHero eyebrow="Careers" title={<><span style={{ color: LIME }}>Exceptional team</span> doing work that counts.</>} sub="Join us in working together on genuinely challenging problems for some of the most innovative and rapidly growing companies in the world." motif="trace" />
      <section style={{ background: TINT }}>
        <div style={{ ...wrap, paddingTop: 56, paddingBottom: 8, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {perks.map(([icon, t]) => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '18px 20px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', background: 'var(--surface-page)' }}>
              <span style={{ display: 'inline-flex', color: 'var(--accent)' }}><Icon name={icon} size={20} /></span><span style={{ fontWeight: 600, fontSize: 14.5 }}>{t}</span>
            </div>
          ))}
        </div>
      </section>
      <section style={{ background: 'var(--surface-card)' }}>
        <div style={{ ...wrap, paddingTop: 40, paddingBottom: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {culture.map(([icon, t, d]) => (
            <Card key={t} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <span style={{ display: 'inline-flex', width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--accent-soft)', color: 'var(--kdi-green-700)', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={23} /></span>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 19 }}>{t}</h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--text-secondary)' }}>{d}</p>
            </Card>
          ))}
        </div>
      </section>
      <section style={{ position: 'relative', overflow: 'hidden', background: TINT_SOFT, borderTop: '1px solid var(--border-default)' }}>
        <LightWash kind="lattice" />
        <div style={{ position: 'relative', ...wrap, paddingTop: 56, paddingBottom: 64 }}>
          <Eyebrow>Open roles</Eyebrow>
          <Serif style={{ fontSize: 28, margin: '12px 0 24px' }}>Where we're hiring.</Serif>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
            {roles.map(([t, m], i) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '18px 22px', borderTop: i ? '1px solid var(--border-subtle)' : 'none' }}>
                <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 16 }}>{t}</div><div style={{ fontSize: 13, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)', marginTop: 3 }}>{m}</div></div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--kdi-green-700)', fontWeight: 700, fontSize: 14 }}>Apply <Icon name="arrow-right" size={15} /></span>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section style={{ background: 'var(--surface-page)', borderTop: '1px solid var(--border-default)' }}>
        <div style={{ ...wrap, paddingTop: 56, paddingBottom: 56 }}>
          <div style={{ display: 'flex', gap: 18, padding: '26px 28px', background: 'var(--accent-soft)', border: '1px solid var(--border-default)', borderLeft: '4px solid var(--accent)', borderRadius: 'var(--radius-md)', maxWidth: 880 }}>
            <span style={{ display: 'inline-flex', flex: 'none', width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--surface-card)', color: 'var(--kdi-green-700)', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}><Icon name="shield-alert" size={21} /></span>
            <div>
              <h3 style={{ margin: '0 0 10px', fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 20 }}>Protect yourself from recruiting phishing scams</h3>
              <p style={{ margin: '0 0 12px', fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-secondary)' }}>There has been a rise in fraudulent job opportunity scams targeting individuals on various platforms. Scammers are impersonating recruiters from reputable companies to deceive unsuspecting job seekers into sharing personal information or financial details. We want to emphasize the importance of staying vigilant and cautious when engaging with job opportunities online.</p>
              <p style={{ margin: '0 0 8px', fontWeight: 700, fontSize: 14, color: 'var(--text-primary)' }}>Tips to help you protect yourself:</p>
              <ul style={{ margin: '0 0 12px', paddingLeft: 20, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-secondary)' }}>
                <li>Verify the legitimacy of the job posting and the recruiter's profile before sharing any personal information.</li>
                <li>Be cautious of unsolicited messages or requests for sensitive information, such as bank details or social security numbers.</li>
                <li>Research the company and recruiter to ensure they are legitimate and reputable.</li>
              </ul>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-secondary)' }}>If you encounter any suspicious job offers or communication, please report them to the platform and the company being impersonated immediately. Your security and privacy are of utmost importance, and we encourage everyone to remain vigilant and informed to prevent falling victim to these scams.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
function Field({ label, placeholder, area, value, onChange, type, grow }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, flex: grow ? 1 : undefined, minHeight: 0 }}>
      <span style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--text-secondary)' }}>{label}</span>
      {area
        ? <textarea rows="4" placeholder={placeholder} value={value} onChange={onChange} style={{ font: 'var(--type-body-sm)', fontFamily: 'var(--font-sans)', color: 'var(--text-primary)', padding: '11px 13px', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-sm)', outline: 'none', resize: 'vertical', flex: grow ? 1 : undefined, minHeight: grow ? 120 : undefined }} />
        : <input type={type || 'text'} placeholder={placeholder} value={value} onChange={onChange} style={{ font: 'var(--type-body-sm)', fontFamily: 'var(--font-sans)', color: 'var(--text-primary)', height: 42, padding: '0 13px', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-sm)', outline: 'none' }} />}
    </label>
  );
}
function Contact({ go }) {
  const offices = [
    ['SF Bay Area HQ', '4677 Old Ironsides Drive, Suite 320', 'Santa Clara, CA 95054'],
    ['Portland office', '310 SW Fourth Avenue, Suite 730', 'Portland, OR 97204'],
  ];
  return (
    <div style={{ background: 'var(--navy-900)' }}>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <Motif kind="helix" w={1100} h={340} strong style={{ left: 'auto', right: 0, top: 'auto', bottom: 10, height: '50%', width: '42%', opacity: 0.7, maskImage: 'linear-gradient(90deg, transparent, #000 46%)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 46%)' }} />
        <div style={{ position: 'absolute', right: -120, top: -150, width: 440, height: 440, borderRadius: '50%', background: 'var(--glow-green)' }} />
        <div style={{ position: 'relative', zIndex: 2, ...wrap, paddingTop: 58, paddingBottom: 10, minHeight: 196, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 14 }}>
          <Eyebrow dark>Contact</Eyebrow>
          <Serif style={{ fontSize: 38, lineHeight: 1.12, color: '#fff', margin: 0 }}>Let's <span style={{ color: LIME }}>connect</span></Serif>
        </div>
      </div>
      <div style={{ ...wrap, paddingTop: 40, paddingBottom: 80, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {offices.map(([city, l1, l2]) => (
              <div key={city} style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '24px 26px', background: 'var(--navy-800)', border: `1px solid ${NAVB}`, borderRadius: 'var(--radius-md)', color: '#fff' }}>
                <span style={{ display: 'inline-flex', width: 46, height: 46, borderRadius: 'var(--radius-sm)', background: 'var(--kdi-grad-power)', color: 'var(--navy-900)', alignItems: 'center', justifyContent: 'center' }}><Icon name="map-pin" size={22} /></span>
                <div style={{ fontWeight: 700, fontSize: 19, fontFamily: 'var(--font-serif)', color: '#fff' }}>{city}</div>
                <div style={{ fontSize: 15.5, lineHeight: 1.6, color: '#AEBAC3' }}>{l1}<br />{l2}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center', justifyContent: 'space-between', padding: '24px 30px', background: 'var(--navy-800)', border: `1px solid ${NAVB}`, borderRadius: 'var(--radius-md)', color: '#fff' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '.12em', textTransform: 'uppercase', color: LIME }}>Get in touch</span>
            <a href="tel:+18009239185" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', whiteSpace: 'nowrap', color: '#fff', textDecoration: 'none', fontWeight: 400, fontSize: 17 }}><Icon name="phone" size={18} style={{ color: LIME }} /> (800) 923-9185</a>
            <a href="mailto:contact@kdinfotech.com" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', whiteSpace: 'nowrap', color: '#fff', textDecoration: 'none', fontWeight: 400, fontSize: 17 }}><Icon name="mail" size={18} style={{ color: LIME }} /> contact@kdinfotech.com</a>
            <a href="https://www.linkedin.com/company/kdinfotech/" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginRight: 12, fontFamily: 'var(--font-sans)', whiteSpace: 'nowrap', color: '#fff', textDecoration: 'none', fontWeight: 400, fontSize: 17 }}><svg width="18" height="18" viewBox="0 0 24 24" fill={LIME} aria-hidden="true" style={{ flex: 'none' }}><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" /></svg> KDInfotech</a>
          </div>
        </div>
      </div>
  );
}

/* ---------- LEGAL (Terms / Privacy) ---------- */
function LegalBlock({ b }) {
  if (b.t === 'lead') return <p style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 18, color: 'var(--text-primary)', margin: 0 }}>{b.x}</p>;
  if (b.t === 'h') return <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 20, letterSpacing: '-0.01em', color: 'var(--text-primary)', margin: '18px 0 0' }}>{b.x}</h2>;
  if (b.t === 'ul') return (
    <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {b.x.map((it, i) => <li key={i} style={{ display: 'flex', gap: 10, fontSize: 15, lineHeight: 1.6, color: 'var(--text-secondary)' }}><span style={{ color: 'var(--accent)', flex: 'none' }}>•</span><span>{it}</span></li>)}
    </ul>
  );
  return <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--text-secondary)', margin: 0 }}>{b.x}</p>;
}
function LegalPage({ go, page, title, blocks }) {
  return (
    <div style={{ background: 'var(--surface-page)' }}>
      <PageHero eyebrow="Legal" title={title} motif="lattice" />
      <section style={{ ...wrap, maxWidth: 880, paddingTop: 52, paddingBottom: 72, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {(blocks || []).map((b, i) => <LegalBlock key={i} b={b} />)}
      </section>
    </div>
  );
}
function Terms({ go }) { return <LegalPage go={go} page="terms" title="Terms and conditions of use" blocks={(window.LEGAL || {}).terms} />; }
function Privacy({ go }) { return <LegalPage go={go} page="privacy" title="Privacy policy" blocks={(window.LEGAL || {}).privacy} />; }

/* ---------- router ---------- */
const PAGES = { home: Home, capabilities: Capabilities, clients: Clients, partners: Partners, careers: Careers, contact: Contact, terms: Terms, privacy: Privacy };
function KDSite() {
  const [page, setPage] = useState((window.location.hash || '#home').slice(1) in PAGES ? (window.location.hash || '#home').slice(1) : 'home');
  const go = (p) => { setPage(p); window.location.hash = p; window.scrollTo(0, 0); };
  useEffect(() => {
    const onHash = () => { const p = (window.location.hash || '#home').slice(1); if (p in PAGES) setPage(p); };
    window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const Page = PAGES[page] || Home;
  return <div><Header page={page} go={go} /><Page go={go} /><Footer go={go} /></div>;
}
Object.assign(window, { KDSite });