// Vault marketing — Pricing (fees & limits) + Security
// All figures from brand.config / existing mockup. Loaded after vault-marketing.jsx.

(function () {
  const { Icon, mono, sans, MarketingNav, Footer, Eyebrow, PrimaryBtn, GhostBtn } = window;

  // FAQ accordion (stateful — enhanced interactivity)
  function FAQ({ t, items }) {
    const [open, setOpen] = React.useState(0);
    return (
      <div style={{ borderRadius: 18, background: t.surface1, border: `1px solid ${t.hairline}`, overflow: 'hidden' }}>
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className="vmk-faq" style={{ borderTop: i === 0 ? 'none' : `1px solid ${t.hairline}` }}>
              <div onClick={() => setOpen(isOpen ? -1 : i)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 20px', cursor: 'pointer' }}>
                <div style={{ fontSize: 15, fontWeight: 600, color: t.text1, paddingRight: 16 }}>{it.q}</div>
                <div style={{ color: t.text3, transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform .2s', flexShrink: 0 }}>{Icon.plus(18)}</div>
              </div>
              {isOpen && <div style={{ padding: '0 20px 20px', fontSize: 13.5, color: t.text3, lineHeight: 1.55, maxWidth: 720 }}>{it.a}</div>}
            </div>
          );
        })}
      </div>
    );
  }

  // ───────────────────────────────────────────────────────────
  // PRICING — fee transparency
  // ───────────────────────────────────────────────────────────
  function Pricing({ t, device, onNav }) {
    const compact = device === 'mobile';
    const fees = [
      ['Transfers', '₦0.00', 'Every NIP transfer, in and out'],
      ['Stamp duty', '₦50.00', 'Statutory federal levy, passed at cost'],
      ['Card maintenance', '₦0.00', 'Vault Black virtual card'],
      ['Account', '₦0.00', 'No monthly fee, no minimum balance'],
    ];
    const limits = [
      ['Daily transfer limit', '₦1,000,000'],
      ['Single transfer limit', '₦500,000'],
      ['KYC required above', '₦50,000'],
      ['Card daily spend', '₦200,000'],
    ];
    const plans = [
      { name: 'Personal', price: 'Free', desc: 'For everyday money movement.', feats: [['Vault Black virtual card', true], ['Receipts & PDF export', true], ['NIN + liveness KYC', true], ['Multi-currency wallets', false], ['Team approvals', false]], cta: 'Get the app', primary: true },
      { name: 'Business', price: 'Free', desc: 'For teams that move money together.', feats: [['Everything in Personal', true], ['Multi-currency wallets', true], ['Team approvals & thresholds', true], ['Audit log & exports', true], ['Dedicated support', true]], cta: 'Talk to sales', primary: false },
    ];

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

        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '36px 18px 8px' : '72px 50px 8px', textAlign: 'center' }}>
          <Eyebrow t={t}>Fees & limits</Eyebrow>
          <h1 style={{ fontSize: compact ? 34 : 52, letterSpacing: -1.6, fontWeight: 600, margin: '16px 0 0', lineHeight: 1.06 }}>
            Simple, radical<br/>fee transparency.
          </h1>
          <p style={{ fontSize: compact ? 15 : 17, color: t.text2, lineHeight: 1.5, margin: '16px auto 0', maxWidth: 480 }}>
            No tiers of hidden charges. You pay ₦0 to move money — the only line item is the statutory stamp duty, passed straight through.
          </p>
        </div>

        {/* fee cards */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '28px 18px 0' : '48px 50px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr 1fr' : 'repeat(4,1fr)', gap: 12 }}>
            {fees.map(f => (
              <div key={f[0]} className="vmk-card" style={{ padding: compact ? '18px 16px' : '24px 22px', borderRadius: 18, background: t.surface1, border: `1px solid ${t.hairline}` }}>
                <div style={{ fontSize: 12.5, color: t.text3 }}>{f[0]}</div>
                <div style={{ fontFamily: mono, fontSize: compact ? 26 : 34, fontWeight: 500, color: t.text1, letterSpacing: -0.8, marginTop: 8, fontFeatureSettings: '"tnum" 1' }}>{f[1]}</div>
                <div style={{ fontSize: 11.5, color: t.text3, marginTop: 8, lineHeight: 1.4 }}>{f[2]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* limits table */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '28px 18px 0' : '40px 50px 0' }}>
          <div style={{ borderRadius: 18, background: t.surface1, border: `1px solid ${t.hairline}`, overflow: 'hidden' }}>
            <div style={{ padding: '16px 22px', borderBottom: `1px solid ${t.hairline}`, fontSize: 13, fontWeight: 600, color: t.text2, letterSpacing: 0.2 }}>Limits</div>
            {limits.map((l, i) => (
              <div key={l[0]} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px 22px', borderTop: i === 0 ? 'none' : `1px solid ${t.hairline}` }}>
                <div style={{ fontSize: 14, color: t.text2 }}>{l[0]}</div>
                <div style={{ fontFamily: mono, fontSize: 15, fontWeight: 500, color: t.text1, fontFeatureSettings: '"tnum" 1' }}>{l[1]}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 10, fontSize: 12, color: t.text3, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
            {Icon.lock(12)} Limits raise automatically once your KYC tier is verified.
          </div>
        </div>

        {/* plans */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '40px 18px 0' : '72px 50px 0' }}>
          <div style={{ textAlign: 'center', marginBottom: compact ? 24 : 36 }}>
            <Eyebrow t={t}>Plans</Eyebrow>
            <h2 style={{ fontSize: compact ? 26 : 36, letterSpacing: -1, fontWeight: 600, margin: '12px 0 0' }}>Both plans are free.</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '1fr 1fr', gap: 16 }}>
            {plans.map(p => (
              <div key={p.name} style={{ borderRadius: 22, padding: compact ? '26px 22px' : '32px 30px',
                background: p.primary ? t.surface1 : t.surface1,
                border: `1px solid ${p.primary ? t.accent.replace(')', ' / 0.45)') : t.hairline}`,
                boxShadow: p.primary ? (t.name === 'dark' ? '0 0 0 1px oklch(0.82 0.07 82 / 0.12), 0 24px 60px oklch(0 0 0 / 0.4)' : '0 24px 60px oklch(0.50 0.06 200 / 0.10)') : 'none' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 18, fontWeight: 600, color: t.text1 }}>{p.name}</div>
                  {p.primary && <div style={{ padding: '4px 10px', borderRadius: 999, background: t.accentMuted, color: t.accent, fontSize: 10.5, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: mono }}>Popular</div>}
                </div>
                <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <div style={{ fontFamily: mono, fontSize: 38, fontWeight: 500, color: t.text1, letterSpacing: -1 }}>{p.price}</div>
                  <div style={{ fontSize: 13, color: t.text3 }}>/ forever</div>
                </div>
                <div style={{ fontSize: 13.5, color: t.text3, marginTop: 6 }}>{p.desc}</div>
                <div style={{ margin: '22px 0', height: 1, background: t.hairline }} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
                  {p.feats.map(([f, on]) => (
                    <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 11, fontSize: 13.5, color: on ? t.text1 : t.text3 }}>
                      <div style={{ width: 20, height: 20, borderRadius: 10, flexShrink: 0, display: 'grid', placeItems: 'center',
                        background: on ? t.accentMuted : 'transparent', color: on ? t.accent : t.text3, border: on ? 'none' : `1px solid ${t.hairline}` }}>
                        {on ? Icon.check(12) : <span style={{ fontSize: 12 }}>–</span>}
                      </div>
                      {f}
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 26 }}>
                  {p.primary ? <PrimaryBtn t={t} full onClick={() => onNav('app')}>{p.cta}</PrimaryBtn> : <GhostBtn t={t} full>{p.cta}</GhostBtn>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* FAQ */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '44px 18px 8px' : '80px 50px 8px' }}>
          <h2 style={{ fontSize: compact ? 26 : 34, letterSpacing: -1, fontWeight: 600, margin: '0 0 24px' }}>Questions about fees</h2>
          <FAQ t={t} items={[
            { q: 'Do you really charge ₦0 to transfer?', a: 'Yes. Sending and receiving over the NIP instant-pay rails costs ₦0 on Vault. The only line item you will ever see on a transfer is the ₦50 federal stamp duty, which we pass through at cost.' },
            { q: 'What is the ₦50 stamp duty?', a: 'It is a statutory levy collected on behalf of the Federal Government. Vault keeps none of it — it appears as a separate line on your confirmation and receipt so the total debit is never a surprise.' },
            { q: 'What are my transfer limits?', a: 'Daily transfers are capped at ₦1,000,000 and a single transfer at ₦500,000. Anything above ₦50,000 requires completed KYC. Verified accounts can request higher limits.' },
            { q: 'Will you support other currencies?', a: 'Multi-currency wallets are available on the Business plan. Personal accounts operate in NGN today, with USD, GBP, and EUR on the roadmap.' },
          ]} />
        </div>

        <div style={{ padding: compact ? '40px 0 0' : '64px 0 0' }}><Footer t={t} device={device} onNav={onNav} /></div>
      </div>
    );
  }

  // ───────────────────────────────────────────────────────────
  // SECURITY
  // ───────────────────────────────────────────────────────────
  function Security({ t, device, onNav }) {
    const compact = device === 'mobile';
    const pillars = [
      { i: Icon.lock(18), h: 'Encrypted end to end', d: 'Your data is encrypted at rest and in transit. KYC documents are encrypted the moment they leave your camera.' },
      { i: Icon.card(20), h: 'Cards are tokenized', d: 'Card numbers are never stored on our servers, and the CVV stays masked until you pass a biometric check.' },
      { i: Icon.shield(18), h: 'Hardware-key + Face ID', d: 'Every money movement is gated by Face ID and an optional hardware key. Authentication is required, not optional.' },
      { i: Icon.check(18), h: 'CBN-licensed custody', d: 'Funds are held with a partner licensed by the Central Bank of Nigeria, separate from operating accounts.' },
      { i: Icon.eye(18), h: 'Auto session lock', d: 'After 5 minutes of inactivity Vault signs you out automatically, so an unattended phone never exposes your balance.' },
      { i: Icon.copy(16), h: 'An audit log you control', d: 'Every money-moving action is logged with a timestamp and device. You can read your own audit trail, anytime.' },
    ];
    const never = [
      'Never logs card numbers, CVV, or PINs — even in development.',
      'Never stores sensitive data unencrypted.',
      'Never abbreviates an amount on a confirmation screen.',
      'Never lets colour alone signal a money state.',
    ];

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

        {/* hero */}
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -140, left: '50%', transform: 'translateX(-50%)', width: 560, height: 420, borderRadius: 560,
            background: `radial-gradient(circle, ${t.accent.replace(')', ' / 0.14)')} 0%, transparent 65%)`, pointerEvents: 'none' }} />
          <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '40px 18px 8px' : '76px 50px 8px', textAlign: 'center', position: 'relative' }}>
            <div style={{ width: 64, height: 64, borderRadius: 18, margin: '0 auto', background: t.accentMuted, color: t.accent, display: 'grid', placeItems: 'center', border: `1px solid ${t.accent.replace(')', ' / 0.25)')}` }}>{Icon.shield(30)}</div>
            <h1 style={{ fontSize: compact ? 34 : 52, letterSpacing: -1.6, fontWeight: 600, margin: '24px 0 0', lineHeight: 1.06 }}>
              Security isn't a feature.<br/>It's the foundation.
            </h1>
            <p style={{ fontSize: compact ? 15 : 17, color: t.text2, lineHeight: 1.5, margin: '16px auto 0', maxWidth: 500 }}>
              Vault is designed so that handling money safely is the default, not a setting you have to find. Here is exactly how your money and data are protected.
            </p>
          </div>
        </div>

        {/* pillars */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '34px 18px 0' : '56px 50px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : 'repeat(3,1fr)', gap: 14 }}>
            {pillars.map(p => (
              <div key={p.h} className="vmk-card" style={{ padding: '24px 22px', 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' }}>{p.i}</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: t.text1, marginTop: 16 }}>{p.h}</div>
                <div style={{ fontSize: 13, color: t.text3, lineHeight: 1.5, marginTop: 8 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>

        {/* what Vault never does */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '40px 18px 0' : '72px 50px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '0.85fr 1.15fr', gap: compact ? 24 : 48, alignItems: 'center' }}>
            <div>
              <Eyebrow t={t}>Hard rules</Eyebrow>
              <h2 style={{ fontSize: compact ? 26 : 36, letterSpacing: -1, fontWeight: 600, margin: '14px 0 0', lineHeight: 1.12 }}>What Vault never does.</h2>
              <p style={{ fontSize: 14.5, color: t.text2, lineHeight: 1.55, marginTop: 14, maxWidth: 360 }}>
                Some guarantees aren't toggles. These are enforced in the codebase itself, on every surface.
              </p>
            </div>
            <div style={{ borderRadius: 18, background: t.surface1, border: `1px solid ${t.hairline}`, overflow: 'hidden' }}>
              {never.map((n, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, padding: '18px 22px', borderTop: i === 0 ? 'none' : `1px solid ${t.hairline}` }}>
                  <div style={{ width: 24, height: 24, borderRadius: 12, flexShrink: 0, background: t.err.replace(')', ' / 0.14)'), color: t.err, display: 'grid', placeItems: 'center', marginTop: 1 }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/></svg>
                  </div>
                  <div style={{ fontSize: 14.5, color: t.text1, lineHeight: 1.45, fontWeight: 500 }}>{n}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* posture band */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '40px 18px 0' : '72px 50px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr 1fr' : 'repeat(4,1fr)', gap: 12 }}>
            {[['CBN', 'Licensed custody'], ['PCI-DSS', 'Card data posture'], ['SOC 2', 'Controls in progress'], ['NIBSS', 'Instant settlement']].map(p => (
              <div key={p[0]} style={{ padding: compact ? '18px 16px' : '26px 22px', borderRadius: 16, background: t.surface1, border: `1px solid ${t.hairline}`, textAlign: 'center' }}>
                <div style={{ fontFamily: mono, fontSize: compact ? 18 : 22, fontWeight: 600, color: t.text1, letterSpacing: 0.5 }}>{p[0]}</div>
                <div style={{ fontSize: 11.5, color: t.text3, marginTop: 6 }}>{p[1]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: compact ? '44px 18px' : '80px 50px' }}>
          <div style={{ borderRadius: 22, padding: compact ? '32px 24px' : '48px 50px', background: t.surface1, border: `1px solid ${t.hairline}`, textAlign: 'center' }}>
            <h2 style={{ fontSize: compact ? 26 : 36, letterSpacing: -1, fontWeight: 600, margin: 0 }}>Move money with certainty.</h2>
            <p style={{ fontSize: 15, color: t.text3, marginTop: 12, maxWidth: 420, marginLeft: 'auto', marginRight: 'auto' }}>See the security model in action across the full wallet flow.</p>
            <div style={{ marginTop: 24, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
              <PrimaryBtn t={t} onClick={() => onNav('app')}>Explore the app</PrimaryBtn>
              <GhostBtn t={t} onClick={() => onNav('pricing')}>See pricing</GhostBtn>
            </div>
          </div>
        </div>

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

  Object.assign(window, { Pricing, Security });
})();
