'use strict';

const verifyJsx = `
const { useState, useEffect } = React;

// ── Header ────────────────────────────────────────────────────────────────────
function Header({ active }) {
  const links = [
    { href: 'index.html', label: 'Home' },
    { href: 'mail.html', label: 'Mail' },
    { href: 'verify.html', label: 'SSN Shield', active: true },
    { href: 'how-it-works.html', label: 'How It Works' },
    { href: 'demo.html', label: 'Demo' },
    { href: 'about.html', label: 'About' },
  ];
  return (
    React.createElement('header', { className: 't-header' },
      React.createElement('div', { className: 't-headerbrand' },
        React.createElement('img', { src: 'https://pub-629428d185ca4960a0a73c850d32294b.r2.dev/company_159149/images/5e2efc0b-0ccf-4185-9131-978be0c88507.png', alt: 'Squyr' }),
        React.createElement('span', { className: 't-headername' }, 'Squyr',
          React.createElement('span', { className: 't-headername-dot' }, '.')
        ),
        React.createElement('span', { className: 't-headertag' }, 'Bilateral Cryptographic Data Exchange')
      ),
      React.createElement('nav', { className: 't-headernav' },
        ...links.map(l => React.createElement('a', {
          key: l.href, href: l.href,
          className: 't-headerlink' + (l.active ? ' active' : '')
        }, l.label))
      ),
      React.createElement('div', { className: 't-headerright' },
        React.createElement('a', {
          href: 'https://portal.squyr.com', className: 't-headersignin',
          target: '_blank', rel: 'noopener'
        }, 'SIGN IN ↗')
      )
    )
  );
}

// ── Hero Step ─────────────────────────────────────────────────────────────────
function FlowStep({ num, title, desc, role, accent }) {
  const borderColor = accent === 'cyan' ? 'var(--t-cyan-line)' : 'var(--t-summit-line)';
  const bgColor = accent === 'cyan' ? 'rgba(0,255,255,0.04)' : 'rgba(235,5,87,0.04)';
  const labelColor = accent === 'cyan' ? 'var(--t-cyan)' : 'var(--t-summit)';
  const pillBg = accent === 'cyan' ? 'var(--t-cyan-soft)' : 'var(--t-summit-soft)';
  const pillColor = labelColor;
  return (
    React.createElement('div', { style: {
      border: '1px solid ' + borderColor, background: bgColor, borderRadius: 10,
      padding: '14px 16px', borderLeft: '3px solid ' + labelColor
    }},
      React.createElement('div', { style: {
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8
      }},
        React.createElement('span', { style: {
          fontFamily: 'var(--t-mono)', fontSize: 10, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: labelColor, fontWeight: 600
        }}, num + ' · ' + title),
        React.createElement('span', { style: {
          fontFamily: 'var(--t-mono)', fontSize: 9, letterSpacing: '0.12em',
          padding: '2px 7px', borderRadius: 4, background: pillBg, color: pillColor
        }}, role)
      ),
      React.createElement('span', { style: {
        fontFamily: 'var(--t-mono)', fontSize: 10.5, color: 'var(--t-mute)',
        letterSpacing: '0.04em'
      }}, desc)
    )
  );
}

// ── Hero ───────────────────────────────────────────────────────────────────────
function Hero() {
  return (
    React.createElement('div', { className: 't-hero' },
      React.createElement('div', null,
        React.createElement('div', { className: 't-hero-kicker' },
          React.createElement('span', { className: 't-hero-kicker-bar' }),
          'SSN SHIELD · IN DEVELOPMENT · PATENT-PENDING'
        ),
        React.createElement('h1', null,
          'Identity verification ', React.createElement('b', null, 'without'), ' identity exposure.'
        ),
        React.createElement('p', null,
          'Every company that\\'s ever had a Social Security number breach had one thing in common: the SSN was transmitted to a third party. SSN Shield eliminates that entire attack surface — you get a yes/no answer and a cryptographic proof. You never see the number. You can\\'t store what you never received.'
        ),
        React.createElement('p', { style: {
          fontFamily: 'var(--t-mono)', fontSize: 13, color: 'var(--t-summit)',
          letterSpacing: '0.04em', marginTop: -16, marginBottom: 32
        }},
          'This is not encryption. This is elimination.'
        ),
        React.createElement('div', { className: 't-hero-cta' },
          React.createElement('a', {
            href: 'mailto:info@silvermv.com?subject=Squyr%20Verify%20Early%20Access&body=Organization%3A%0AUse%20case%3A%0A',
            className: 't-btn t-btnprimary', onClick: () => trackEvent('request_early_access_verify')
          }, 'Request early access →'),
          React.createElement('a', { href: 'index.html', className: 't-btn t-btnneutral' }, 'Back to platform')
        )
      ),
      React.createElement('div', { style: {
        border: '1px solid var(--t-border)',
        background: 'radial-gradient(ellipse at 50% 0%, rgba(0,255,255,0.05), transparent 60%), rgba(17,17,20,0.5)',
        borderRadius: 16, padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 18
      }},
        React.createElement('div', { style: {
          fontFamily: 'var(--t-mono)', fontSize: 10, letterSpacing: '0.18em',
          color: 'var(--t-cyan)', textTransform: 'uppercase', textAlign: 'center'
        }}, 'SSN Shield — zero-knowledge SSN verification'),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 }},
          React.createElement(FlowStep, { num: '01', title: 'CHALLENGE', desc: 'Your company sends a verification challenge.', role: 'you', accent: 'coral' }),
          React.createElement(FlowStep, { num: '02', title: 'MATCH', desc: 'SSN stays on the identity holder\\'s server.', role: 'holder', accent: 'cyan' }),
          React.createElement(FlowStep, { num: '03', title: 'PROOF', desc: 'Yes/no response + Ed25519 cryptographic proof.', role: 'holder', accent: 'cyan' }),
          React.createElement(FlowStep, { num: '04', title: 'RESULT', desc: 'You verified — the number was never transmitted.', role: 'you', accent: 'coral' })
        ),
        React.createElement('div', { style: {
          border: '1px dashed var(--t-cyan-line)', borderRadius: 8, padding: '12px 16px',
          fontFamily: 'var(--t-mono)', fontSize: 10, color: 'var(--t-cyan)',
          letterSpacing: '0.08em', textAlign: 'center', marginTop: 2
        }}, 'SSN never transmitted · never stored · never breachable on your infrastructure')
      )
    )
  );
}

// ── How It Works ──────────────────────────────────────────────────────────────
function HowItWorks() {
  return (
    React.createElement('div', { className: 't-intro' },
      React.createElement('div', { className: 't-intro-side' },
        React.createElement('h3', null, 'The SSN is not data to be transmitted.')
      ),
      React.createElement('div', { className: 't-intro-body' },
        React.createElement('p', null,
          'It\\'s a ', React.createElement('b', null, 'lookup key'), '. Every major IDV vendor — ',
          React.createElement('span', { style: { color: 'var(--t-summit)' } }, 'ID.me, Socure, Plaid, CLEAR, Onfido, Veriff'),
          ' — requires the SSN to be transmitted to their servers. They protect it after receipt, but it still travels across the wire and lives on their infrastructure.'
        ),
        React.createElement('p', null,
          'SSN Shield reframes the SSN as a lookup key that ', React.createElement('span', { style: { color: 'var(--t-cyan)' } }, 'never leaves the holder\\'s server'),
          '. You receive a ', React.createElement('span', { style: { color: 'var(--t-cyan)' } }, 'yes/no, Ed25519-signed proof'),
          ' — without ever seeing or storing the number.'
        )
      )
    )
  );
}

// ── Two-Model ─────────────────────────────────────────────────────────────────
function TwoModel() {
  const oldItems = [
    ['SSN submitted to vendor', 'RECEIVED'],
    ['Vendor stores for compliance', 'STORED'],
    ['Vendor breach = your liability', 'BREACH'],
  ];
  const newItems = [
    ['Challenge sent to holder', 'CHALLENGED'],
    ['Holder hashes locally, signs proof', 'SIGNED'],
    ['You verify — number never received', 'VERIFIED'],
  ];
  return (
    React.createElement('div', { style: { padding: '56px 40px', borderBottom: '1px solid var(--t-border)', position: 'relative', zIndex: 1 }},
      React.createElement('div', { style: { marginBottom: 32 }},
        React.createElement('h3', { style: { fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 8px' } }, 'The two models.'),
        React.createElement('p', { style: { color: 'var(--t-dim)', fontSize: 14, margin: 0 } },
          'A categorical reframe — not a security upgrade to the existing IDV model, but a different model entirely.'
        )
      ),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }},
        // Old model
        React.createElement('div', { style: {
          border: '1px solid rgba(235,5,87,0.3)', background: 'rgba(235,5,87,0.04)',
          borderRadius: 12, padding: '28px 28px 24px', display: 'flex', flexDirection: 'column', gap: 16
        }},
          React.createElement('span', { style: {
            fontFamily: 'var(--t-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--t-summit)'
          }}, 'THE OLD WAY'),
          React.createElement('span', { style: { fontSize: 18, fontWeight: 600, color: 'var(--t-summit)' }}, 'Collect, store, and pray.'),
          React.createElement('span', { style: { color: 'var(--t-dim)', fontSize: 13.5, lineHeight: 1.6 } },
            'Every SSN transmitted to vendor servers. Stored for compliance. Becomes breach surface. Every major IDV vendor has been breached or will be.'
          ),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }},
            ...oldItems.map(([label, result]) =>
              React.createElement('div', { key: label, style: {
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--t-mono)', fontSize: 10.5, color: 'var(--t-dim)'
              }},
                React.createElement('span', null, label),
                React.createElement('span', { style: { color: 'var(--t-summit)' }}, '→'),
                React.createElement('span', { style: {
                  marginLeft: 'auto', padding: '2px 8px', borderRadius: 4, fontSize: 9,
                  background: 'rgba(235,5,87,0.15)', color: 'var(--t-summit)',
                  border: '1px solid rgba(235,5,87,0.3)'
                }}, result)
              )
            )
          )
        ),
        // New model
        React.createElement('div', { style: {
          border: '1px solid var(--t-cyan-line)', background: 'var(--t-cyan-soft)',
          borderRadius: 12, padding: '28px 28px 24px', display: 'flex', flexDirection: 'column', gap: 16
        }},
          React.createElement('span', { style: {
            fontFamily: 'var(--t-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--t-cyan)'
          }}, 'SSN SHIELD'),
          React.createElement('span', { style: { fontSize: 18, fontWeight: 600, color: 'var(--t-cyan)' }}, 'Verify without seeing.'),
          React.createElement('span', { style: { color: 'var(--t-dim)', fontSize: 13.5, lineHeight: 1.6 } },
            'The SSN stays on the holder\\'s server. You receive a cryptographic yes/no with Ed25519 proof. You verified — you never received the number.'
          ),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }},
            ...newItems.map(([label, result]) =>
              React.createElement('div', { key: label, style: {
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--t-mono)', fontSize: 10.5, color: 'var(--t-dim)'
              }},
                React.createElement('span', null, label),
                React.createElement('span', { style: { color: 'var(--t-cyan)' }}, '→'),
                React.createElement('span', { style: {
                  marginLeft: 'auto', padding: '2px 8px', borderRadius: 4, fontSize: 9,
                  background: 'rgba(0,255,255,0.1)', color: 'var(--t-cyan)',
                  border: '1px solid var(--t-cyan-line)'
                }}, result)
              )
            )
          )
        )
      )
    )
  );
}

// ── Market / Industries ────────────────────────────────────────────────────────
function Market() {
  const rows = [
    { industry: 'FINANCIAL SERVICES', title: 'Banking & lending', body: 'Account opening, loan origination, credit decisions. SSN is the primary identifier — verify it without storing it.', meta: 'ELIMINATES SSN BREACH LIABILITY ENTIRELY' },
    { industry: 'HEALTHCARE CREDENTIALING', title: 'Provider verification', body: 'Licensing boards and hospital credentialing systems store SSNs for background checks. SSN Shield makes those databases irrelevant.', meta: 'MULTI-BILLION DOLLAR VERIFICATION SURFACE' },
    { industry: 'BACKGROUND CHECKS', title: 'Employment screening', body: 'Every employment background check requires SSN transmission to third-party providers. Verify once — never hold the data.', meta: 'VERIFY ONCE · STORE PROOF · NEVER HOLD THE NUMBER' },
    { industry: 'INSURANCE UNDERWRITING', title: 'Policy applications', body: 'SSN stored in policy systems for years. Verify once, store proof, never hold the number again.', meta: 'VERIFY ONCE · STORE PROOF · NEVER HOLD THE NUMBER' },
    { industry: 'GOVERNMENT', title: 'Public-sector identity', body: 'Federal and state agencies perform SSN-dependent identity checks. SSN Shield reduces the breach surface of the entire verification infrastructure.', meta: 'PATENT-PENDING · ZERO DIRECT COMPETITORS' },
  ];
  return (
    React.createElement('div', { style: { padding: '56px 40px', borderBottom: '1px solid var(--t-border)', position: 'relative', zIndex: 1 }},
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }},
        React.createElement('h3', { style: { fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', margin: 0, color: 'var(--t-cyan)' } }, 'Every industry that requires SSN verification.')
      ),
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 }},
        ...rows.map(row =>
          React.createElement('div', { key: row.industry, style: {
            display: 'grid', gridTemplateColumns: '180px 1fr auto',
            gap: 24, alignItems: 'center',
            border: '1px solid var(--t-border)', borderRadius: 10,
            padding: '18px 22px', background: 'rgba(17,17,20,0.5)'
          }},
            React.createElement('span', { style: {
              fontFamily: 'var(--t-mono)', fontSize: 9.5, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--t-cyan)'
            }}, row.industry),
            React.createElement('div', null,
              React.createElement('div', { style: { fontSize: 14, fontWeight: 600, marginBottom: 4 }}, row.title),
              React.createElement('div', { style: { color: 'var(--t-dim)', fontSize: 13, lineHeight: 1.5 }}, row.body)
            ),
            React.createElement('span', { style: {
              fontFamily: 'var(--t-mono)', fontSize: 9, letterSpacing: '0.1em',
              color: 'var(--t-mute)', textAlign: 'right', maxWidth: 140, lineHeight: 1.4
            }}, row.meta)
          )
        )
      )
    )
  );
}

// ── Competitive ───────────────────────────────────────────────────────────────
function Competitive() {
  const incumbents = ['ID.me', 'Socure', 'Plaid', 'CLEAR', 'Onfido', 'Veriff'];
  const drawbacks = ['SSN transmitted', 'SSN stored', 'Not zero-knowledge', 'Vendor breach = customer breach'];
  return (
    React.createElement('div', { style: { padding: '56px 40px', borderBottom: '1px solid var(--t-border)', position: 'relative', zIndex: 1 }},
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 32 }},
        // Incumbents card
        React.createElement('div', { style: {
          border: '1px solid rgba(235,5,87,0.3)', background: 'rgba(235,5,87,0.04)',
          borderRadius: 12, padding: '24px 24px 20px'
        }},
          React.createElement('div', { style: {
            fontFamily: 'var(--t-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--t-summit)', marginBottom: 12
          }}, 'THE INCUMBENTS'),
          React.createElement('div', { style: {
            display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16
          }},
            ...incumbents.map(name =>
              React.createElement('span', { key: name, style: {
                fontFamily: 'var(--t-mono)', fontSize: 11, color: 'var(--t-dim)',
                border: '1px solid var(--t-border)', padding: '4px 10px', borderRadius: 4
              }}, name)
            )
          ),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 }},
            ...drawbacks.map(d =>
              React.createElement('div', { key: d, style: {
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--t-mono)', fontSize: 10.5, color: 'var(--t-summit)'
              }},
                React.createElement('span', null, '✗'),
                React.createElement('span', null, d)
              )
            )
          )
        ),
        // SSN Shield card
        React.createElement('div', { style: {
          border: '1px solid var(--t-cyan-line)', background: 'var(--t-cyan-soft)',
          borderRadius: 12, padding: '24px 24px 20px'
        }},
          React.createElement('div', { style: {
            fontFamily: 'var(--t-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--t-cyan)', marginBottom: 12
          }}, 'SSN SHIELD'),
          React.createElement('div', { style: {
            fontFamily: 'var(--t-mono)', fontSize: 18, fontWeight: 700, color: 'var(--t-cyan)',
            letterSpacing: '-0.01em', marginBottom: 16, lineHeight: 1.2
          }}, 'Verify without seeing.'),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 }},
            ...['SSN never transmitted', 'SSN never stored', 'Zero-knowledge proof', 'No breach surface on your infrastructure'].map(d =>
              React.createElement('div', { key: d, style: {
                display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--t-mono)', fontSize: 10.5, color: 'var(--t-cyan)'
              }},
                React.createElement('span', null, '✓'),
                React.createElement('span', null, d)
              )
            )
          )
        )
      ),
      React.createElement('div', { style: {
        fontFamily: 'var(--t-mono)', fontSize: 12, color: 'var(--t-cyan)',
        letterSpacing: '0.08em', padding: '14px 20px', border: '1px solid var(--t-cyan-line)',
        borderRadius: 8, background: 'var(--t-cyan-soft)', display: 'inline-block'
      }}, 'Zero direct competitors. SSN Shield creates the category.')
    )
  );
}

// ── CTA ───────────────────────────────────────────────────────────────────────
function CTA() {
  return (
    React.createElement('div', { style: { padding: '64px 40px', borderBottom: '1px solid var(--t-border)', position: 'relative', zIndex: 1 }},
      React.createElement('div', { style: {
        border: '1px solid var(--t-cyan-line)', background: 'rgba(0,255,255,0.04)',
        borderRadius: 16, padding: '40px 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40
      }},
        React.createElement('div', null,
          React.createElement('h3', { style: { fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 10px' } },
            'Early-access conversations open Q4 2026.'
          ),
          React.createElement('p', { style: { color: 'var(--t-dim)', fontSize: 14, maxWidth: 440, margin: 0 } },
            'Seeking financial services, credentialing, and background-check providers ready to eliminate SSN storage entirely. Patent-pending.'
          )
        ),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-end' }},
          React.createElement('span', { style: {
            fontFamily: 'var(--t-mono)', fontSize: 10, letterSpacing: '0.14em',
            color: 'var(--t-summit)', border: '1px solid var(--t-summit-line)',
            padding: '4px 10px', borderRadius: 4
          }}, 'PATENT-PENDING'),
          React.createElement('a', {
            href: 'mailto:info@silvermv.com?subject=Squyr%20Verify%20Early%20Access&body=Organization%3A%0AUse%20case%3A%0A',
            className: 't-btn t-btnprimary', onClick: () => trackEvent('request_early_access_cta_verify')
          }, 'Request early access →'),
          React.createElement('a', {
            href: 'mailto:info@silvermv.com',
            style: { fontFamily: 'var(--t-mono)', fontSize: 11, color: 'var(--t-dim)', letterSpacing: '0.08em', textDecoration: 'none' },
            onClick: () => trackEvent('email_us_verify')
          }, 'info@silvermv.com')
        )
      )
    )
  );
}

// ── Trust Strip ────────────────────────────────────────────────────────────────
function TrustStrip() {
  return (
    React.createElement('div', { style: {
      padding: '22px 40px', borderTop: '1px solid var(--t-border)', background: '#06060a',
      display: 'flex', alignItems: 'center', gap: 30,
      fontFamily: 'var(--t-mono)', fontSize: 11, color: 'var(--t-mute)', letterSpacing: '0.1em',
      position: 'relative', zIndex: 1
    }},
      React.createElement('span', { style: { color: 'var(--t-cyan)' }}, 'ENCRYPTED'),
      React.createElement('span', null, '·'),
      React.createElement('span', null, 'ED25519'),
      React.createElement('span', null, '·'),
      React.createElement('span', null, 'ZERO'),
      React.createElement('span', null, '·'),
      React.createElement('span', null, 'NO'),
      React.createElement('span', null, '·'),
      React.createElement('span', null, 'FIPS'),
      React.createElement('span', { style: { flex: 1 } }),
      React.createElement('b', { style: { color: 'var(--t-text)', fontWeight: 500 }}, 'Silver Mountain Ventures, LLC'),
      React.createElement('span', null, '·'),
      React.createElement('span', null, '2026–2046')
    )
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────────
function Footer() {
  return (
    React.createElement('footer', { style: {
      flex: '0 0 auto', borderTop: '1px solid var(--t-border)', background: '#06060a',
      padding: '10px 40px', display: 'flex', alignItems: 'center', gap: 22,
      fontFamily: 'var(--t-mono)', fontSize: 10.5, color: 'var(--t-mute)', letterSpacing: '0.08em',
      position: 'relative', zIndex: 1
    }},
      React.createElement('b', { style: { color: 'var(--t-text)', fontWeight: 500 }}, 'Squyr'),
      React.createElement('span', { style: { flex: 1 } }),
      React.createElement('span', null, 'ENCRYPTED · ED25519 · ZERO · NO · FIPS'),
      React.createElement('span', { style: { color: 'var(--t-faint)' }}, '·'),
      React.createElement('span', null, '© 2026 SUMMIT AUDIENCE SEGMENTS')
    )
  );
}

// ── App ───────────────────────────────────────────────────────────────────────
function App() {
  return (
    React.createElement('div', { className: 't-root' },
      React.createElement(Header, null),
      React.createElement('main', null,
        React.createElement(Hero, null),
        React.createElement(HowItWorks, null),
        React.createElement(TwoModel, null),
        React.createElement(Market, null),
        React.createElement(Competitive, null),
        React.createElement(CTA, null)
      ),
      React.createElement(TrustStrip, null),
      React.createElement(Footer, null)
    )
  );
}

function trackEvent(name, props) {
  if (window.dataLayer) window.dataLayer.push(Object.assign({event: name}, props||{}));
}

const root = ReactDOM.createRoot(document.getElementById('squyr-verify-root'));
root.render(React.createElement(App));
`;

window.SquyrVerify = { component: verifyJsx };