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

function HomePage({ navigate }) {
  return (
    <div style={{ position: 'relative', zIndex: 2 }}>
      {/* HERO */}
      <section style={{
        minHeight: 'calc(100vh - 72px)',
        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)' }} />
              Quantum 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)' }}>Securing</span>{' '}
            Critical Infrastructure.<br />
            For a <span style={{ color: 'var(--accent-bright)' }}>Quantum</span> World.
          </h1>

          <p style={{
            fontSize: 18, fontWeight: 400, color: 'var(--text-soft)',
            maxWidth: 640, margin: '0 auto 52px', lineHeight: 1.7, textWrap: 'pretty',
          }}>
            Quantum computing is reshaping the foundations of cybersecurity. The cryptographic standards that have protected governments, financial institutions, and critical infrastructure for decades are approaching the end of their operational life. QDI exists to help organisations understand this shift and navigate it with confidence — through hardware and software solutions built for the quantum era.
          </p>

          {/* Credential anchors */}
          <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'stretch', gap: 0,
            marginBottom: 52, flexWrap: 'wrap',
          }}>
            {[
              { a: 'Patent Pending', b: 'CIPO #3,286,218' },
              { a: 'PQC Aligned', b: 'CSE ITSP.40.111 · CCCS ITSM.40.001' },
              { a: 'Canadian Company', b: 'Incorporated in Canada · Est. 2024' },
            ].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('solutions')} style={primaryBtn}>
              Learn More <Arrow />
            </button>
            <button onClick={() => navigate('contact')} style={outlineBtn}>
              Get in Touch
            </button>
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <NewsletterSection />

      {/* UNDERSTANDING THE LANDSCAPE */}
      <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>The Landscape</Eyebrow>
              <h2 style={{
                fontSize: 'clamp(36px, 4vw, 52px)', fontWeight: 600, margin: '20px 0 0',
                lineHeight: 1.08, letterSpacing: '-0.025em', color: 'var(--text)',
              }}>
                A new era of<br />
                <em style={{ fontWeight: 400, color: 'var(--text-soft)' }}>cybersecurity</em>.
              </h2>
            </div>
            <div style={{ paddingTop: 40 }}>
              <p style={{ fontSize: 17, fontWeight: 400, color: 'var(--text-soft)', lineHeight: 1.7, margin: 0 }}>
                The development of quantum computing represents one of the most significant technological transitions of our time. For cybersecurity, it means the foundations built over the last four decades — the mathematics underpinning encryption, authentication, and secure communications — need to evolve. Understanding this transition is the first step toward navigating it.
              </p>
            </div>
          </div>

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

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 64 }}>
            {[
              {
                n: '01',
                t: 'What Is Post-Quantum Cryptography?',
                b: 'Post-quantum cryptography (PQC) refers to cryptographic algorithms designed to be secure against the computational capabilities of quantum computers. Governments and standards bodies worldwide, including Canada\'s CSE, have been working to standardise these algorithms for broad adoption.',
              },
              {
                n: '02',
                t: 'The Harvest Now, Decrypt Later Problem',
                b: 'Encrypted data collected today can be stored and decrypted later, once quantum computers reach sufficient capability. This means data with a long confidentiality requirement — government communications, health records, financial infrastructure — has a new kind of risk profile that organisations are actively working to understand and address.',
              },
              {
                n: '03',
                t: "Canada's Regulatory Response",
                b: "Canada's Communications Security Establishment (CSE) and the Canadian Centre for Cyber Security (CCCS) have published guidance and migration roadmaps — including ITSP.40.111 and ITSM.40.001 — to support federal institutions and critical infrastructure operators in planning their transition to quantum-safe cryptography.",
              },
            ].map((x) => (
              <div key={x.n} style={{ position: 'relative' }}>
                <div style={{
                  fontSize: 72, fontWeight: 400, color: 'var(--text)',
                  opacity: 0.07, 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-soft)', lineHeight: 1.75, margin: 0 }}>{x.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ─── Newsletter Section ───────────────────────────────────────────────────────
function NewsletterSection() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle');
  const [focused, setFocused] = React.useState(false);

  const NEWSLETTER_URL = 'https://formspree.io/f/mqenlegd';

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setStatus('error'); return; }
    setStatus('submitting');
    try {
      const res = await fetch(NEWSLETTER_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({ email, _subject: 'QDI Newsletter — New Subscriber' }),
      });
      setStatus(res.ok ? 'success' : 'error');
    } catch { setStatus('error'); }
  };

  return (
    <section style={{ padding: '0 40px 100px', position: 'relative' }}>
      <div style={{ maxWidth: 720, margin: '0 auto', position: 'relative' }}>
        <div style={{
          background: 'var(--bg-card)', border: '1px solid var(--border)',
          borderRadius: 12, padding: '52px 56px',
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', textAlign: 'center',
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            fontSize: 11, fontWeight: 500, color: 'var(--accent-bright)',
            letterSpacing: '0.24em', textTransform: 'uppercase', marginBottom: 24,
          }}>
            <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.5 }} />
            QDI Intelligence Briefing
            <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.5 }} />
          </div>
          <h2 style={{
            fontSize: 'clamp(26px, 3vw, 36px)', fontWeight: 600,
            margin: '0 0 14px', lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--text)',
          }}>
            Follow the <em style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--text-soft)' }}>quantum conversation</em>.
          </h2>
          <p style={{
            fontSize: 15, fontWeight: 400, color: 'var(--text-soft)',
            lineHeight: 1.65, margin: '0 0 36px', maxWidth: 460, marginLeft: 'auto', marginRight: 'auto',
          }}>
            Regulatory updates, research, and insights on quantum cybersecurity — published by the QDI team and delivered to your inbox.
          </p>
          {status === 'success' ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, padding: '16px 0' }}>
              <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'var(--accent-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent-bright)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7" /></svg>
              </div>
              <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--accent-bright)' }}>You're subscribed. Welcome to the briefing.</div>
            </div>
          ) : (
            <form onSubmit={handleSubmit} noValidate style={{ display: 'flex', gap: 12, maxWidth: 460, margin: '0 auto', flexWrap: 'wrap', justifyContent: 'center' }}>
              <input type="email" value={email}
                onChange={(e) => { setEmail(e.target.value); setStatus('idle'); }}
                onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
                placeholder="your@email.com"
                style={{
                  flex: 1, minWidth: 200, height: 48, padding: '0 16px', borderRadius: 6,
                  border: focused ? '1px solid var(--accent-bright)' : status === 'error' ? '1px solid rgba(255,120,120,0.7)' : '1px solid var(--border)',
                  background: 'var(--input-bg)', color: 'var(--text)',
                  fontFamily: 'inherit', fontSize: 14, outline: 'none', transition: 'border-color 0.2s',
                  boxSizing: 'border-box', boxShadow: focused ? '0 0 0 3px var(--accent-dim)' : 'none',
                }} />
              <button type="submit" disabled={status === 'submitting'} style={{
                height: 48, padding: '0 24px', borderRadius: 6,
                background: 'var(--accent-bright)', color: '#fff', border: 'none',
                fontFamily: 'inherit', fontSize: 14, fontWeight: 500, cursor: 'pointer', flexShrink: 0,
                boxShadow: '0 8px 24px rgba(14,158,136,0.28)', opacity: status === 'submitting' ? 0.7 : 1, transition: 'opacity 0.2s',
              }}>
                {status === 'submitting' ? 'Subscribing…' : 'Subscribe'}
              </button>
              {status === 'error' && (
                <div style={{ width: '100%', textAlign: 'center', fontSize: 12, color: 'rgba(200,80,80,0.9)', marginTop: 2 }}>
                  Please enter a valid email address and try again.
                </div>
              )}
            </form>
          )}
          <p style={{ fontSize: 11, color: 'var(--text-muted)', margin: '18px 0 0', letterSpacing: '0.03em', lineHeight: 1.6 }}>
            No spam. Unsubscribe at any time. Your information is never shared.
          </p>
        </div>
      </div>
    </section>
  );
}

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, NewsletterSection, primaryBtn, outlineBtn, Arrow });