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

const THEME_DARK = {
  '--bg': '#FAF7F2',
  '--bg-card': 'rgba(255, 253, 248, 0.85)',
  '--bg-card-hover': 'rgba(255, 252, 244, 0.97)',
  '--text': '#121110',
  '--text-soft': '#2e2a26',
  '--text-dim': '#2e2a26',
  '--text-muted': '#7c7570',
  '--accent': '#0e9e88',
  '--accent-bright': '#0a8a76',
  '--accent-dim': 'rgba(10, 138, 118, 0.12)',
  '--border': 'rgba(10, 138, 118, 0.2)',
  '--border-soft': 'rgba(0, 0, 0, 0.08)',
  '--nav-bg': 'rgba(250, 247, 242, 0.88)',
  '--input-bg': 'rgba(255, 253, 248, 0.9)',
  '--rule': 'rgba(0, 0, 0, 0.08)',
};

function Nav({ route, navigate }) {
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'solutions', label: 'Solutions' },
    { id: 'articles', label: 'Articles' },
    { 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: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative',
      }}>
        <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, position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}>
          {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 style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
          <LinkedInButton />
        </div>
      </div>
    </nav>
  );
}

function Footer({ navigate }) {
  return (
    <footer style={{
      position: 'relative', zIndex: 2,
      borderTop: '1px solid var(--border-soft)',
      background: 'rgba(250, 247, 242, 0.88)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderTop: '1px solid rgba(0,0,0,0.08)',
      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: 'var(--text-muted)', 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 }}>
            {[
              { id: 'home', label: 'Home' },
              { id: 'solutions', label: 'Solutions' },
              { id: 'articles', label: 'Articles' },
              { id: 'team', label: 'Team' },
              { id: 'contact', label: 'Contact' },
            ].map((l) => (
              <button key={l.id} onClick={() => navigate(l.id)} style={{
                background: 'none', border: 'none', padding: 0, textAlign: 'left',
                fontFamily: 'inherit', fontSize: 13, color: 'var(--text-soft)', cursor: 'pointer',
              }}>{l.label}</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: 'var(--text-soft)', 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: 'var(--text-soft)', 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 }} />;
}

function LinkedInButton() {
  const [h, setH] = useState(false);
  // Note: original neutral "in" link icon — not the official LinkedIn brand mark.
  return (
    <a
      href="https://www.linkedin.com/company/quantum-defense-innovation"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="LinkedIn company page"
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
        textDecoration: 'none', flexShrink: 0,
        opacity: h ? 0.85 : 1,
        transition: 'opacity 0.2s ease',
      }}
    >
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <rect width="28" height="28" rx="5" fill="#0e9e88"/>
        <rect x="8.5" y="11.5" width="2.5" height="8.5" fill="#f0f4f8"/>
        <circle cx="9.75" cy="8.75" r="1.5" fill="#f0f4f8"/>
        <path d="M13 11.5H15.4V12.6H15.44C15.79 11.96 16.63 11.25 17.88 11.25C20.41 11.25 20.88 12.92 20.88 15.08V20H18.38V15.58C18.38 14.67 18.36 13.5 17.11 13.5C15.84 13.5 15.65 14.49 15.65 15.51V20H13.15V11.5H13Z" fill="#f0f4f8"/>
      </svg>
    </a>
  );
}

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