// Vault marketing screens — Landing · Pricing (fees) · Security
// Reuses tokens + Icon + mono/sans from vault-screens.jsx (loaded first).
// Every number here is drawn from the existing mockup / brand.config — nothing invented.

const { Icon, mono, sans } = window;

// hover / transition CSS (enhanced interactivity)
if (typeof document !== 'undefined' && !document.getElementById('vmk-styles')) {
  const s = document.createElement('style');
  s.id = 'vmk-styles';
  s.textContent = [
    '.vmk-btn{transition:transform .15s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .2s,opacity .2s;cursor:pointer;user-select:none}',
    '.vmk-btn:hover{transform:translateY(-1px)}',
    '.vmk-btn:active{transform:translateY(0)}',
    '.vmk-card{transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,background .2s}',
    '.vmk-card:hover{transform:translateY(-3px)}',
    '.vmk-nav{transition:color .15s,background .15s;cursor:pointer}',
    '.vmk-link{transition:opacity .15s,color .15s;cursor:pointer}',
    '.vmk-link:hover{opacity:.7}',
    '.vmk-faq{transition:background .15s}',
    '.vmk-scroll{scrollbar-width:none}',
    '.vmk-scroll::-webkit-scrollbar{display:none}',
  ].join('\n');
  document.head.appendChild(s);
}

// ─────────────────────────────────────────────────────────────
// Shared atoms
// ─────────────────────────────────────────────────────────────
function Eyebrow({ t, children }) {
  return <div style={{ fontSize: 11, color: t.accent, letterSpacing: 1.2, textTransform: 'uppercase', fontFamily: mono, fontWeight: 600 }}>{children}</div>;
}

function Wordmark({ t, children }) {
  return <span style={{ fontFamily: mono, fontSize: 14, letterSpacing: 1.5, color: t.text3, textTransform: 'uppercase', fontWeight: 600 }}>{children}</span>;
}

function PrimaryBtn({ t, children, onClick, full }) {
  return (
    <div className="vmk-btn" onClick={onClick} style={{
      display: full ? 'flex' : 'inline-flex', justifyContent: 'center', alignItems: 'center', gap: 8,
      padding: '13px 22px', borderRadius: 12, background: t.accent, color: t.accentInk,
      fontSize: 14, fontWeight: 600, fontFamily: sans,
      boxShadow: t.name === 'dark' ? '0 8px 24px oklch(0.82 0.07 82 / 0.18)' : '0 8px 24px oklch(0.50 0.06 200 / 0.20)',
    }}>{children}</div>
  );
}

function GhostBtn({ t, children, onClick, full }) {
  return (
    <div className="vmk-btn" onClick={onClick} style={{
      display: full ? 'flex' : 'inline-flex', justifyContent: 'center', alignItems: 'center', gap: 8,
      padding: '13px 22px', borderRadius: 12, background: t.surface1, color: t.text1,
      border: `1px solid ${t.hairline}`, fontSize: 14, fontWeight: 500, fontFamily: sans,
    }}>{children}</div>
  );
}

function Section({ children, t, pad, style }) {
  return <div style={{ padding: pad, ...style }}><div style={{ maxWidth: 1180, margin: '0 auto' }}>{children}</div></div>;
}

// ─────────────────────────────────────────────────────────────
// Marketing nav (in-page site nav — distinct from showcase chrome)
// ─────────────────────────────────────────────────────────────
function MarketingNav({ t, device, screen, onNav }) {
  const links = [
    { id: 'home', l: 'Personal' },
    { id: 'pricing', l: 'Pricing' },
    { id: 'security', l: 'Security' },
    { id: 'app', l: 'The app' },
  ];
  const compact = device === 'mobile';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: compact ? '14px 18px' : '20px 50px',
      borderBottom: `1px solid ${t.hairline}`, position: 'sticky', top: 0, zIndex: 30,
      background: t.name === 'dark' ? 'oklch(0.16 0.005 250 / 0.8)' : 'oklch(0.985 0.003 80 / 0.85)',
      backdropFilter: 'blur(16px) saturate(160%)', WebkitBackdropFilter: 'blur(16px) saturate(160%)',
    }}>
      <div className="vmk-link" onClick={() => onNav('home')} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: t.accent, color: t.accentInk, display: 'grid', placeItems: 'center', fontFamily: mono, fontWeight: 700, fontSize: 16 }}>V</div>
        <span style={{ fontSize: 18, fontWeight: 600, color: t.text1, letterSpacing: -0.3 }}>Vault</span>
      </div>
      {!compact && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          {links.map(x => (
            <div key={x.id} className="vmk-nav" onClick={() => onNav(x.id)} style={{
              padding: '8px 14px', borderRadius: 9, fontSize: 14, fontWeight: 500,
              color: screen === x.id ? t.text1 : t.text3,
              background: screen === x.id ? t.surface2 : 'transparent',
            }}>{x.l}</div>
          ))}
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {!compact && <div className="vmk-link" style={{ fontSize: 14, fontWeight: 500, color: t.text2 }}>Log in</div>}
        <PrimaryBtn t={t} onClick={() => onNav('app')}>{compact ? 'Get app' : 'Get the app'}</PrimaryBtn>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function Footer({ t, device, onNav }) {
  const compact = device === 'mobile';
  const cols = [
    { h: 'Product', items: ['Personal', 'Business', 'Cards', 'Security'] },
    { h: 'Company', items: ['About', 'Careers', 'Press', 'Contact'] },
    { h: 'Legal', items: ['Terms', 'Privacy', 'Licenses', 'Disputes'] },
  ];
  return (
    <div style={{ borderTop: `1px solid ${t.hairline}`, background: t.surface1, padding: compact ? '32px 18px 28px' : '56px 50px 40px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '1.6fr 1fr 1fr 1fr', gap: compact ? 26 : 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: t.accent, color: t.accentInk, display: 'grid', placeItems: 'center', fontFamily: mono, fontWeight: 700, fontSize: 15 }}>V</div>
              <span style={{ fontSize: 17, fontWeight: 600, color: t.text1 }}>Vault</span>
            </div>
            <div style={{ marginTop: 14, fontSize: 13, color: t.text3, lineHeight: 1.55, maxWidth: 280 }}>
              A premium wallet for moving money with certainty. Built on NIP rails, gated by hardware keys.
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{ fontSize: 12, color: t.text2, fontWeight: 600, letterSpacing: 0.3, marginBottom: 14 }}>{c.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.items.map(i => <div key={i} className="vmk-link" style={{ fontSize: 13, color: t.text3 }}>{i}</div>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 36, paddingTop: 22, borderTop: `1px solid ${t.hairline}`, display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, color: t.text3 }}>
            {Icon.shield(13)} Licensed by the Central Bank of Nigeria
          </div>
          <div style={{ fontSize: 11.5, color: t.text3, fontFamily: mono }}>DEMO — UI template. No real money moves.</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Stat band — every figure pulled from the mockup
// ─────────────────────────────────────────────────────────────
function StatBand({ t, device }) {
  const compact = device === 'mobile';
  const stats = [
    ['0%', 'transfer fee'],
    ['3.2s', 'avg. settlement'],
    ['₦50', 'flat stamp duty'],
    ['5 min', 'auto session lock'],
  ];
  return (
    <div style={{ borderTop: `1px solid ${t.hairline}`, borderBottom: `1px solid ${t.hairline}`, background: t.surface1 }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: compact ? '1fr 1fr' : 'repeat(4,1fr)' }}>
        {stats.map((s, i) => (
          <div key={s[1]} style={{
            padding: compact ? '22px 18px' : '34px 28px',
            borderLeft: (!compact && i > 0) ? `1px solid ${t.hairline}` : 'none',
            borderTop: (compact && i > 1) ? `1px solid ${t.hairline}` : 'none',
            borderLeftWidth: (compact && i % 2 === 1) ? 1 : (compact ? 0 : (i > 0 ? 1 : 0)),
            borderLeftStyle: 'solid', borderLeftColor: t.hairline,
          }}>
            <div style={{ fontFamily: mono, fontSize: compact ? 30 : 40, fontWeight: 500, color: t.text1, letterSpacing: -1, fontFeatureSettings: '"tnum" 1' }}>{s[0]}</div>
            <div style={{ fontSize: 13, color: t.text3, marginTop: 6 }}>{s[1]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LANDING
// ─────────────────────────────────────────────────────────────
function Landing({ t, device, onNav }) {
  const { VaultPhone, WalletHome } = window;
  const compact = device === 'mobile';
  const features = [
    { i: Icon.arrowUp(20), h: 'Instant transfers', d: 'NIP rails settle in seconds. We clocked the last send at 3.2 seconds, end to end.' },
    { i: Icon.card(20), h: 'Virtual cards', d: 'Spin up a Vault Black card, reveal details with Face ID, freeze it in a single tap.' },
    { i: Icon.shield(18), h: 'KYC in minutes', d: 'Scan your NIN, take a liveness selfie, and clear verification without leaving the app.' },
    { i: Icon.copy(18), h: 'A receipt for everything', d: 'Every transfer issues a reference you can copy, share, or export as a PDF.' },
    { i: Icon.check(18), h: 'Know where your money is', d: 'A live status timeline tracks each transfer from authorized to settled.' },
    { i: Icon.lock(16), h: 'Trust, by default', d: 'Hardware-key gating, tokenized cards, and an audit log you can actually read.' },
  ];

  return (
    <div style={{ background: t.bg, color: t.text1, fontFamily: sans }}>
      <MarketingNav t={t} device={device} screen="home" onNav={onNav} />

      {/* hero */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        {/* accent glow */}
        <div style={{ position: 'absolute', top: -120, right: compact ? -120 : 80, width: 480, height: 480, borderRadius: 480,
          background: `radial-gradient(circle, ${t.accent.replace(')', ' / 0.18)')} 0%, transparent 65%)`, pointerEvents: 'none' }} />
        <Section t={t} pad={compact ? '36px 18px 8px' : '76px 50px 40px'}>
          <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '1.05fr 0.95fr', gap: compact ? 28 : 40, alignItems: 'center' }}>
            <div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: t.surface1, border: `1px solid ${t.hairline}`, fontSize: 12, color: t.text2 }}>
                {Icon.shield(13)} <span>CBN-licensed · NGN wallet</span>
              </div>
              <h1 style={{ fontSize: compact ? 38 : 60, lineHeight: 1.04, letterSpacing: -1.8, fontWeight: 600, margin: compact ? '18px 0 0' : '22px 0 0', color: t.text1 }}>
                Money that moves<br/>the moment you do.
              </h1>
              <p style={{ fontSize: compact ? 15 : 18, color: t.text2, lineHeight: 1.5, margin: '18px 0 0', maxWidth: 460 }}>
                Send, hold, and spend naira with zero transfer fees and bank-grade security. Every kobo accounted for, every transfer confirmed.
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 28 }}>
                <PrimaryBtn t={t} onClick={() => onNav('app')}>Get the app {Icon.arrowUp(15)}</PrimaryBtn>
                <GhostBtn t={t} onClick={() => onNav('pricing')}>See the fees</GhostBtn>
              </div>
              <div style={{ marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: t.text3 }}>
                {Icon.lock(12)} Face ID + hardware key on every transfer
              </div>
            </div>

            {/* product visual */}
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: compact ? 0 : 540 }}>
              {compact ? (
                <HeroCardTeaser t={t} />
              ) : (
                <div style={{ transform: 'scale(0.82)', transformOrigin: 'center', position: 'relative' }}>
                  <VaultPhone t={t}><WalletHome t={t} /></VaultPhone>
                  {/* floating receipt chip */}
                  <div style={{ position: 'absolute', bottom: 90, left: -54, padding: '12px 16px', borderRadius: 16,
                    background: t.surface1, border: `1px solid ${t.hairlineStrong}`, boxShadow: '0 18px 40px oklch(0 0 0 / 0.35)',
                    display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 34, height: 34, borderRadius: 17, background: t.pos.replace(')', ' / 0.16)'), color: t.pos, display: 'grid', placeItems: 'center' }}>{Icon.check(16)}</div>
                    <div>
                      <div style={{ fontSize: 12, color: t.text1, fontWeight: 600 }}>Transfer settled</div>
                      <div style={{ fontSize: 11, color: t.text3, fontFamily: mono }}>−₦45,000 · 3.2s</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </Section>
      </div>

      {/* trust rail */}
      <Section t={t} pad={compact ? '8px 18px 28px' : '20px 50px 44px'}>
        <div style={{ fontSize: 11.5, color: t.text3, letterSpacing: 0.5, marginBottom: 16, textTransform: 'uppercase', fontFamily: mono }}>Built on trusted rails</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: compact ? '16px 24px' : 44, alignItems: 'center' }}>
          {['CBN', 'NIBSS', 'Paystack', 'Visa', 'Verve'].map(w => <Wordmark key={w} t={t}>{w}</Wordmark>)}
        </div>
      </Section>

      <StatBand t={t} device={device} />

      {/* feature grid */}
      <Section t={t} pad={compact ? '40px 18px' : '80px 50px'}>
        <Eyebrow t={t}>Everything money needs</Eyebrow>
        <h2 style={{ fontSize: compact ? 28 : 40, letterSpacing: -1, fontWeight: 600, margin: '14px 0 0', maxWidth: 620, lineHeight: 1.1 }}>
          A complete wallet, engineered around certainty.
        </h2>
        <div style={{ marginTop: compact ? 28 : 44, display: 'grid', gridTemplateColumns: compact ? '1fr' : 'repeat(3,1fr)', gap: 14 }}>
          {features.map(f => (
            <div key={f.h} className="vmk-card" style={{ padding: '22px 22px 24px', borderRadius: 18, background: t.surface1, border: `1px solid ${t.hairline}` }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: t.accentMuted, color: t.accent, display: 'grid', placeItems: 'center' }}>{f.i}</div>
              <div style={{ fontSize: 16.5, fontWeight: 600, color: t.text1, marginTop: 16 }}>{f.h}</div>
              <div style={{ fontSize: 13.5, color: t.text3, lineHeight: 1.5, marginTop: 8 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </Section>

      {/* security band */}
      <div style={{ background: t.surface1, borderTop: `1px solid ${t.hairline}`, borderBottom: `1px solid ${t.hairline}` }}>
        <Section t={t} pad={compact ? '40px 18px' : '72px 50px'}>
          <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '1fr 1fr', gap: compact ? 26 : 56, alignItems: 'center' }}>
            <div>
              <Eyebrow t={t}>Security</Eyebrow>
              <h2 style={{ fontSize: compact ? 28 : 38, letterSpacing: -1, fontWeight: 600, margin: '14px 0 0', lineHeight: 1.12 }}>
                Even if your phone is lost,<br/>your money isn't.
              </h2>
              <p style={{ fontSize: 15, color: t.text2, lineHeight: 1.55, marginTop: 16, maxWidth: 440 }}>
                Funds are custodied with a CBN-licensed partner. Every transfer is gated by Face ID and a hardware key, card numbers are tokenized, and a 5-minute lock signs you out automatically.
              </p>
              <div className="vmk-link" onClick={() => onNav('security')} style={{ marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600, color: t.accent }}>
                See how Vault protects you {Icon.arrowUp(14)}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {[
                ['Encrypted', 'at rest & in transit'],
                ['Tokenized', 'cards never stored'],
                ['Hardware key', 'on every send'],
                ['Audit log', 'you can read'],
              ].map(b => (
                <div key={b[0]} style={{ padding: '18px 16px', borderRadius: 14, background: t.bg, border: `1px solid ${t.hairline}` }}>
                  <div style={{ color: t.accent }}>{Icon.shield(18)}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: t.text1, marginTop: 12 }}>{b[0]}</div>
                  <div style={{ fontSize: 12, color: t.text3, marginTop: 3 }}>{b[1]}</div>
                </div>
              ))}
            </div>
          </div>
        </Section>
      </div>

      {/* CTA */}
      <Section t={t} pad={compact ? '44px 18px' : '84px 50px'}>
        <div style={{ borderRadius: 24, padding: compact ? '36px 24px' : '60px 56px', position: 'relative', overflow: 'hidden',
          background: `linear-gradient(135deg, ${t.cardA}, ${t.cardB})`, border: `1px solid ${t.cardEdge}`, color: 'oklch(0.96 0.005 80)' }}>
          <div style={{ position: 'absolute', top: -100, right: -60, width: 360, height: 360, borderRadius: 360, background: `radial-gradient(circle, ${t.accent.replace(')', ' / 0.22)')} 0%, transparent 65%)` }} />
          <div style={{ position: 'relative' }}>
            <h2 style={{ fontSize: compact ? 28 : 42, letterSpacing: -1.2, fontWeight: 600, margin: 0, lineHeight: 1.08 }}>Open your Vault in minutes.</h2>
            <p style={{ fontSize: 15.5, opacity: 0.75, marginTop: 14, maxWidth: 460, lineHeight: 1.5 }}>Verify with your NIN, set a 6-digit PIN, and make your first transfer today.</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 26 }}>
              <PrimaryBtn t={t} onClick={() => onNav('app')}>Get the app</PrimaryBtn>
              <div className="vmk-btn" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '13px 22px', borderRadius: 12, background: 'oklch(1 0 0 / 0.10)', border: '1px solid oklch(1 0 0 / 0.18)', color: '#fff', fontSize: 14, fontWeight: 500 }}>Talk to sales</div>
            </div>
          </div>
        </div>
      </Section>

      <Footer t={t} device={device} onNav={onNav} />
    </div>
  );
}

function HeroCardTeaser({ t }) {
  return (
    <div style={{ width: '100%', padding: '20px 22px', borderRadius: 22, background: `linear-gradient(135deg, ${t.cardA}, ${t.cardB})`, border: `1px solid ${t.cardEdge}`, color: 'oklch(0.95 0.005 80)', boxShadow: '0 20px 50px oklch(0 0 0 / 0.4)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: t.accent, color: t.accentInk, display: 'grid', placeItems: 'center', fontFamily: mono, fontWeight: 700, fontSize: 15 }}>V</div>
        <div style={{ fontSize: 10, letterSpacing: 1.4, opacity: 0.6, fontFamily: mono }}>VAULT BLACK</div>
      </div>
      <div style={{ marginTop: 22, fontSize: 11, opacity: 0.6, fontFamily: mono }}>Available · NGN</div>
      <div style={{ marginTop: 4, fontFamily: mono, fontSize: 30, fontWeight: 500, letterSpacing: -1, fontFeatureSettings: '"tnum" 1' }}>₦2,847,320<span style={{ fontSize: 18, opacity: 0.6 }}>.50</span></div>
      <div style={{ marginTop: 16, fontFamily: mono, fontSize: 12, opacity: 0.55, letterSpacing: 1.5 }}>4192  ••••  ••••  7042</div>
    </div>
  );
}

Object.assign(window, { Landing, MarketingNav, Footer, Eyebrow, PrimaryBtn, GhostBtn, Wordmark, StatBand });