// Home page
const { useState: useStateH } = React;

function HomePage({ navigate }) {
  return (
    <div style={{ position: 'relative', zIndex: 2 }}>
      {/* HERO */}
      <section style={{
        minHeight: 'calc(100vh - 72px)', paddingTop: 120, paddingBottom: 100,
        display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
        padding: '140px 40px 100px',
      }}>
        <div style={{ maxWidth: 900, textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 14,
              padding: '8px 16px', borderRadius: 999,
              border: '1px solid var(--border)',
              background: 'var(--bg-card)', backdropFilter: 'blur(10px)',
              fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)',
              letterSpacing: '0.22em', textTransform: 'uppercase',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-bright)', boxShadow: '0 0 12px var(--accent-bright)' }} />
              Deep-Tech Cybersecurity
            </div>
          </div>

          <h1 style={{
            fontSize: 'clamp(44px, 7vw, 92px)', fontWeight: 600,
            lineHeight: 1.02, letterSpacing: '-0.035em',
            margin: 0, marginBottom: 36, color: 'var(--text)',
          }}>
            <span style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--text-soft)' }}>Quantum-Safe</span>{' '}
            Security.<br />
            Built for the <span style={{ color: 'var(--accent-bright)' }}>Mandate</span>.
          </h1>

          <p style={{
            fontSize: 18, fontWeight: 400, color: 'var(--text-soft)',
            maxWidth: 620, margin: '0 auto 52px', lineHeight: 1.65, textWrap: 'pretty',
          }}>
            Nation-state adversaries are harvesting encrypted data today to decrypt it once quantum computers reach sufficient capability — a strategy known as <em style={{ color: 'var(--text)', fontStyle: 'normal', fontWeight: 400 }}>Harvest Now, Decrypt Later</em>. The U.S. White House NSM-10 and CNSA 2.0 mandate all National Security Systems transition to Post-Quantum Cryptography by 2030. Critical infrastructure migration cycles take 5–7 years. Procurement must begin now.
          </p>

          {/* Credential anchors — architectural labels with vertical rules */}
          <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'stretch', gap: 0,
            marginBottom: 52, flexWrap: 'wrap',
          }}>
            {[
              { a: 'Patent Pending', b: 'CIPO #3,286,218' },
              { a: 'NIST PQC Aligned', b: 'FIPS 140-3 Roadmap' },
              { a: '2030 Mandate', b: 'NSM-10 · CNSA 2.0 · EU NIS2' },
            ].map((x, i) => (
              <React.Fragment key={x.a}>
                {i > 0 && <div style={{ width: 1, background: 'var(--border-soft)', margin: '0 28px' }} />}
                <div style={{ padding: '4px 0', minWidth: 140 }}>
                  <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text)', letterSpacing: '0.04em' }}>{x.a}</div>
                  <div style={{ fontSize: 11, fontWeight: 400, color: 'var(--text-muted)', marginTop: 4, letterSpacing: '0.05em' }}>{x.b}</div>
                </div>
              </React.Fragment>
            ))}
          </div>

          <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
            <button onClick={() => navigate('platform')} style={primaryBtn}>
              Explore the Platform <Arrow />
            </button>
            <button onClick={() => navigate('contact')} style={outlineBtn}>
              Investor Relations
            </button>
          </div>

        </div>
      </section>

      {/* WHY NOW */}
      <section style={{ padding: '120px 40px', position: 'relative' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start', marginBottom: 80 }}>
            <div>
              <Eyebrow>Why Now</Eyebrow>
              <h2 style={{
                fontSize: 'clamp(36px, 4vw, 52px)', fontWeight: 600, margin: '20px 0 0',
                lineHeight: 1.08, letterSpacing: '-0.025em', color: 'var(--text)',
              }}>
                The migration <br />window is <em style={{ fontWeight: 400, color: 'var(--text-soft)' }}>closing</em>.
              </h2>
            </div>
            <div style={{ paddingTop: 40 }}>
              <p style={{ fontSize: 17, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.7, margin: 0 }}>
                The cryptographic transition to post-quantum standards is the largest IT migration since Y2K —
                and unlike Y2K, the deadline is binding, the timeline is short, and the adversary is already collecting the data.
              </p>
            </div>
          </div>

          <Rule style={{ marginBottom: 80 }} />

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 64 }}>
            {[
              { n: '01', t: 'The Harvest Now, Decrypt Later Threat', b: 'Nation-state actors are already collecting encrypted government and infrastructure data. Any data with a shelf-life past 2030 is at probabilistic risk today.' },
              { n: '02', t: 'The Regulatory Mandate Is Binding', b: 'NSM-10, CNSA 2.0, and the EU NIS2 Directive create legally enforceable migration timelines with defined penalties. This is not optional for regulated operators.' },
              { n: '03', t: 'The Migration Window Is Closing', b: 'Critical infrastructure migrations take 5–7 years. To comply by 2030, procurement must begin in 2026. QDI is purpose-built for this window.' },
            ].map((x) => (
              <div key={x.n} style={{ position: 'relative' }}>
                <div style={{
                  fontSize: 72, fontWeight: 400, color: '#f0f4f8', opacity: 0.95,
                  letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 24,
                }}>{x.n}</div>
                <div style={{ width: 32, height: 1, background: 'var(--accent-bright)', marginBottom: 24 }} />
                <h3 style={{ fontSize: 20, fontWeight: 600, margin: 0, marginBottom: 16, lineHeight: 1.3, letterSpacing: '-0.01em', color: 'var(--text)' }}>{x.t}</h3>
                <p style={{ fontSize: 14, fontWeight: 400, color: 'var(--text-dim)', lineHeight: 1.75, margin: 0 }}>{x.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

const primaryBtn = {
  height: 48, padding: '0 22px', minWidth: 180, borderRadius: 6,
  background: 'var(--accent-bright)', color: '#fff', border: 'none',
  fontFamily: 'inherit', fontSize: 14, fontWeight: 500, letterSpacing: '0.01em',
  cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
  transition: 'transform 0.15s, box-shadow 0.25s',
  boxShadow: '0 8px 24px rgba(14,158,136,0.28)',
};
const outlineBtn = {
  height: 48, padding: '0 22px', minWidth: 180, borderRadius: 6,
  background: 'transparent', color: 'var(--accent-bright)', border: '1px solid var(--accent-bright)',
  fontFamily: 'inherit', fontSize: 14, fontWeight: 500, letterSpacing: '0.01em',
  cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  transition: 'background 0.2s',
};
const Arrow = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>;

Object.assign(window, { HomePage, primaryBtn, outlineBtn, Arrow });