// Minimal v2 — refined light landing page for CypherKeep.
// Uses real screenshots (bezels already in PNG transparency).
// Animations: parallax hero shot, magnetic CTA, scroll-triggered sections,
// cipher-scramble headers, sticky scrolling encryption flow, feature tabs
// that swap screenshots with cross-fade, marquee, sticky-on-scroll masthead.

const ACCENT = '#5046e5';
const INK = '#0f0e14';
const BONE = '#f5f3ed';
const BONE_DIM = 'rgba(15,14,20,.6)';
const BONE_FAINT = 'rgba(15,14,20,.08)';

// ── Nav ──────────────────────────────────────────────────────────
function Nav() {
  return (
    <nav style={{
      position:'fixed', top:16, left:'50%', transform:'translateX(-50%)',
      zIndex: 50,
      width:'min(1180px, calc(100vw - 32px))',
      padding: '12px 16px 12px 24px',
      borderRadius: 999,
      background: 'rgba(245,243,237,.75)',
      backdropFilter:'saturate(1.4) blur(14px)',
      WebkitBackdropFilter:'saturate(1.4) blur(14px)',
      border: '1px solid rgba(15,14,20,.08)',
      boxShadow: '0 10px 40px -20px rgba(15,14,20,.2), 0 1px 0 rgba(255,255,255,.5) inset',
      display:'flex', alignItems:'center', gap:28,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:10 }}>
        <ShieldLogo size={32} accent={ACCENT} glow={false}/>
        <Wordmark size={22} color={INK}/>
      </div>
      <div className="nav-links-center" style={{ gap:4, marginLeft:12, fontSize:13 }}>
        {[['Features','#features'],['Security','#security'],['Compare','#compare'],['FAQ','#faq']].map(([lbl,href])=>(
          <a key={href} href={href} style={{
            padding:'6px 12px', borderRadius:999, color:'rgba(15,14,20,.7)',
            cursor:'pointer', textDecoration:'none',
            transition:'background .2s, color .2s',
          }}
          onMouseEnter={e=>{ e.currentTarget.style.background='rgba(15,14,20,.06)'; e.currentTarget.style.color=INK; }}
          onMouseLeave={e=>{ e.currentTarget.style.background='transparent'; e.currentTarget.style.color='rgba(15,14,20,.7)'; }}
          >{lbl}</a>
        ))}
      </div>
      <div style={{ flex:1 }}/>
      <a href="#download" style={{
        padding:'10px 16px 10px 14px', borderRadius:999,
        background: INK, color: BONE, fontSize:14, fontWeight:500,
        display:'inline-flex', alignItems:'center', gap:8,
        textDecoration:'none',
      }}>
        <DownloadMark size={12} color={BONE}/> Download
      </a>
    </nav>
  );
}

Object.assign(window, { ACCENT, INK, BONE, BONE_DIM, BONE_FAINT, Nav });