// Shared chrome: Nav, Footer, SectionHeader, Card, theme tokens
const { useState, useEffect, useRef } = React;

const THEME_DARK = {
  '--bg': '#050d12',
  '--bg-card': 'rgba(8, 18, 26, 0.72)',
  '--bg-card-hover': 'rgba(10, 22, 32, 0.85)',
  '--text': '#f0f4f8',
  '--text-soft': '#f0f4f8',
  '--text-dim': '#f0f4f8',
  '--text-muted': '#f0f4f8',
  '--accent': '#0e9e88',
  '--accent-bright': '#12c4a8',
  '--accent-dim': 'rgba(14, 158, 136, 0.22)',
  '--border': 'rgba(14, 158, 136, 0.22)',
  '--border-soft': 'rgba(143, 168, 184, 0.12)',
  '--nav-bg': 'rgba(5, 13, 18, 0.7)',
  '--input-bg': 'rgba(8, 18, 26, 0.5)',
  '--rule': 'rgba(143, 168, 184, 0.14)',
};

function Nav({ route, navigate }) {
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'platform', label: 'Platform' },
    { id: 'team', label: 'Team' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, height: 72, zIndex: 100,
      background: 'var(--nav-bg)',
      backdropFilter: 'blur(14px) saturate(160%)', WebkitBackdropFilter: 'blur(14px) saturate(160%)',
      borderBottom: '1px solid var(--border-soft)',
      display: 'flex', alignItems: 'center',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', width: '100%', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 32,
      }}>
        <button onClick={() => navigate('home')} style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <img
            src="/logo.png"
            alt="Quantum Defense Innovation"
            style={{ height: 36, width: 'auto', objectFit: 'contain' }}
            onError={(e) => { e.target.style.display = 'none'; if (e.target.nextSibling) e.target.nextSibling.style.display = 'inline'; }}
          />
          <span style={{
            display: 'none', fontWeight: 600, color: '#0e9e88', fontSize: 20,
            letterSpacing: '0.08em', fontFamily: 'inherit',
          }}>QDI</span>
          <span style={{ width: 1, height: 14, background: 'var(--border-soft)', display: 'inline-block' }} />
          <span style={{
            fontSize: 11, fontWeight: 400, color: 'var(--text-dim)',
            letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: 'inherit',
          }}>Quantum Defense Innovation</span>
        </button>
        <div style={{ display: 'flex', gap: 4 }}>
          {links.map((l) => {
            const active = route === l.id;
            return (
              <button key={l.id} onClick={() => navigate(l.id)} style={{
                background: 'none', border: 'none', padding: '24px 16px', cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 13, fontWeight: active ? 500 : 400,
                color: active ? 'var(--text)' : 'var(--text-dim)',
                letterSpacing: '0.02em', position: 'relative', transition: 'color 0.2s',
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text)'}
              onMouseLeave={(e) => e.currentTarget.style.color = active ? 'var(--text)' : 'var(--text-dim)'}>
                {l.label}
                <span style={{
                  position: 'absolute', left: 16, right: 16, bottom: 20, height: 1,
                  background: 'var(--accent-bright)',
                  transformOrigin: 'left center',
                  transform: active ? 'scaleX(1)' : 'scaleX(0)',
                  transition: 'transform 0.3s ease',
                }} />
              </button>
            );
          })}
        </div>
        <div />
      </div>
    </nav>
  );
}

function Footer({ navigate }) {
  return (
    <footer style={{
      position: 'relative', zIndex: 2,
      borderTop: '1px solid var(--border-soft)',
      background: 'var(--nav-bg)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      padding: '56px 40px 40px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.2fr', gap: 48 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <img src="/logo.png" alt="QDI" style={{ height: 28, width: 'auto', objectFit: 'contain' }} />
            <span style={{ fontSize: 10, color: '#f0f4f8', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              Quantum Defense Innovation
            </span>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 14 }}>Navigate</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {['home', 'platform', 'team', 'contact'].map((l) => (
              <button key={l} onClick={() => navigate(l)} style={{
                background: 'none', border: 'none', padding: 0, textAlign: 'left',
                fontFamily: 'inherit', fontSize: 13, color: '#f0f4f8', cursor: 'pointer', textTransform: 'capitalize',
              }}>{l}</button>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 14 }}>Our Mission & Vision</div>
          <div style={{ fontSize: 12, color: '#f0f4f8', lineHeight: 1.8, fontWeight: 400 }}>
            To secure the critical infrastructure the world depends on against both classical and quantum-enabled threats. We are building the sovereign-grade, dual-spectrum security backbone that keeps nations, industries, and institutions resilient well beyond 2030.
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--accent-bright)', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 14 }}>Confidentiality</div>
          <div style={{ fontSize: 12, color: '#f0f4f8', lineHeight: 1.8, fontWeight: 400 }}>
            © 2026 Quantum Defense Innovation Inc.<br />
            All Rights Reserved.
          </div>
        </div>
      </div>
    </footer>
  );
}

function Eyebrow({ children, style }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)',
      letterSpacing: '0.24em', textTransform: 'uppercase',
      display: 'inline-flex', alignItems: 'center', gap: 12, ...style,
    }}>
      <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.5 }} />
      {children}
    </div>
  );
}

function SectionHeader({ label, title, subtitle, note, accentTitle, align = 'center', maxWidth = 820 }) {
  return (
    <div style={{
      textAlign: align, marginBottom: 72,
      maxWidth, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0,
    }}>
      <div style={{ marginBottom: 20, display: 'flex', justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
        <Eyebrow>{label}</Eyebrow>
      </div>
      <h2 style={{
        fontSize: 'clamp(36px, 4.8vw, 56px)', fontWeight: 600, margin: 0, marginBottom: 20,
        lineHeight: 1.08, letterSpacing: '-0.02em',
        color: accentTitle ? 'var(--accent-bright)' : 'var(--text)',
      }}>{title}</h2>
      {subtitle && (
        <div style={{ fontSize: 19, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.5, marginBottom: note ? 16 : 0, letterSpacing: '-0.005em' }}>
          {subtitle}
        </div>
      )}
      {note && (
        <div style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-muted)', lineHeight: 1.7, maxWidth: 680, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>
          {note}
        </div>
      )}
    </div>
  );
}

function Card({ children, style, hover = true }) {
  const [h, setH] = useState(false);
  return (
    <div
      onMouseEnter={() => hover && setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        background: h ? 'var(--bg-card-hover)' : 'var(--bg-card)',
        border: '1px solid var(--border)',
        borderRadius: 10,
        padding: 28,
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        boxShadow: h ? '0 0 32px rgba(14,158,136,0.18), 0 1px 0 rgba(255,255,255,0.03) inset' : '0 1px 0 rgba(255,255,255,0.02) inset',
        transition: 'box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease',
        borderColor: h ? 'rgba(18,196,168,0.35)' : 'var(--border)',
        ...style,
      }}
    >
      {children}
    </div>
  );
}

function Rule({ style }) {
  return <div style={{ height: 1, background: 'var(--rule)', ...style }} />;
}

Object.assign(window, { Nav, Footer, Eyebrow, SectionHeader, Card, Rule, THEME_DARK });