// Marketing / landing page for bankx.dev
(function() {
  function Landing() {
    return (
      <div style={{ overflow: 'auto', height: '100%' }}>
        {/* Hero */}
        <section style={{ padding: '60px 48px 40px', borderBottom: '1px solid var(--line)', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 40 }}>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg-2)', marginBottom: 14 }}>
                vol. i &nbsp;·&nbsp; no. 042 &nbsp;·&nbsp; april · 2026 &nbsp;·&nbsp; san francisco
              </div>
              <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 96, lineHeight: 1.04, letterSpacing: '-0.03em', fontWeight: 400, maxWidth: 1100, paddingBottom: 8 }}>
                A bank with a<br/>
                <em style={{ color: 'var(--accent)' }}>command line.</em>
              </h1>
              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--fg-1)', maxWidth: 680, marginTop: 32, lineHeight: 1.4 }}>
                bankx.dev is business banking for the people who already live in a terminal.
                Built on Stripe Treasury. Categorize, reconcile, budget, file taxes —
                all via API, CLI, TUI, MCP, or, if you must, a web app.
              </p>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.16em' }}>EDITION</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 28, color: 'var(--fg-0)' }}>The Ledger</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', marginTop: 4 }}>issue · 042</div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <button className="btn primary" style={{ padding: '10px 18px', fontSize: 12 }}>$ curl bankx.dev/install.sh | sh</button>
            <button className="btn" style={{ padding: '10px 18px', fontSize: 12 }}>Read the docs →</button>
            <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', marginLeft: 10 }}>FDIC-insured via partner bank · SOC 2 Type II · est. 2026</span>
          </div>
        </section>

        {/* Pillars */}
        <section style={{ padding: '40px 48px', borderBottom: '1px solid var(--line)' }}>
          <div className="sec-label">what you get</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderLeft: '1px solid var(--line)' }}>
            {[
              ['01', 'Accounts', 'FDIC-insured checking, tax reserves, virtual cards — through Stripe Treasury. ACH, wires, RTP, SWIFT.'],
              ['02', 'Transaction Hub', 'Syncs Stripe, Chase, Amex, Mercury, Wise, Coinbase, IB, Plaid, Gmail receipts, S3 statements, CSV, OFX, PDF.'],
              ['03', 'Smart Ledger', 'AI categorization, merchant renaming, anomaly detection, rule engine, scheduled transfers, journal entries.'],
              ['04', 'Tax, done', 'Live Schedule C, quarterly estimates via EFTPS, 1099 generation, W-9 collection, audit-ready export.'],
            ].map(p => (
              <div key={p[0]} style={{ padding: '24px 22px', borderRight: '1px solid var(--line)', borderTop: '1px solid var(--line)' }}>
                <div className="mono" style={{ color: 'var(--accent)', fontSize: 10, letterSpacing: '0.18em' }}>{p[0]}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, marginTop: 10, marginBottom: 10 }}>{p[1]}</div>
                <div style={{ color: 'var(--fg-1)', fontSize: 13, lineHeight: 1.5 }}>{p[2]}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Code + Quote */}
        <section style={{ padding: '40px 48px', borderBottom: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 40 }}>
          <div>
            <div className="sec-label">one ledger · many surfaces</div>
            <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', fontFamily: 'var(--font-mono)', fontSize: 13, padding: 18, lineHeight: 1.7, color: 'var(--fg-0)' }}>
              <div><span style={{ color: 'var(--fg-3)' }}># categorize every uncategorized transaction over $1,000</span></div>
              <div><span style={{ color: 'var(--cat-lime)' }}>$</span> bx txn ls --uncat --gte 1000 <span style={{ color: 'var(--fg-3)' }}>|</span> bx tag --auto --confirm</div>
              <div style={{ color: 'var(--fg-2)' }}>  ✓ 7 tagged · 2 flagged for review · rule r8 suggested</div>
              <div style={{ marginTop: 10 }}><span style={{ color: 'var(--fg-3)' }}># move 30% of April revenue to tax reserve</span></div>
              <div><span style={{ color: 'var(--cat-lime)' }}>$</span> bx transfer --from ops --to tax --amount "30%.rev.april"</div>
              <div style={{ color: 'var(--fg-2)' }}>  ✓ $72,564.00 settled · 127ms · pi_3NxK9d</div>
              <div style={{ marginTop: 10 }}><span style={{ color: 'var(--fg-3)' }}># give your LLM read access</span></div>
              <div><span style={{ color: 'var(--cat-lime)' }}>$</span> bx mcp install --target claude --scope read</div>
            </div>
          </div>
          <div style={{ borderLeft: '2px solid var(--accent)', paddingLeft: 22 }}>
            <div className="mono" style={{ color: 'var(--fg-3)', fontSize: 10, letterSpacing: '0.16em' }}>OPINION</div>
            <blockquote style={{ fontFamily: 'var(--font-serif)', fontSize: 28, lineHeight: 1.25, letterSpacing: '-0.01em', marginTop: 10, fontStyle: 'italic', color: 'var(--fg-0)' }}>
              "We closed the books for March in 12 minutes. My accountant cried. I cried. The rules engine cried too — but in a good way, like it had finally found its purpose."
            </blockquote>
            <div className="mono" style={{ color: 'var(--fg-2)', fontSize: 11, marginTop: 14, letterSpacing: '0.12em' }}>— M. HUANG · founder, darkmatter labs</div>
          </div>
        </section>

        {/* Sources strip */}
        <section style={{ padding: '30px 48px', borderBottom: '1px solid var(--line)' }}>
          <div className="sec-label">imports from</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18, alignItems: 'center', fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--fg-1)' }}>
            {['Stripe','Chase','Amex','Mercury','Wise','Coinbase','Interactive Brokers','Plaid','Gmail','S3','QuickBooks','Xero','Ramp','Brex','CSV','OFX','PDF','XLSX'].map((s,i) => (
              <React.Fragment key={s}>
                <span style={{ color: i % 3 === 0 ? 'var(--accent)' : 'var(--fg-1)', fontStyle: i % 4 === 0 ? 'italic' : 'normal' }}>{s}</span>
                {i < 17 && <span style={{ color: 'var(--fg-3)' }}>·</span>}
              </React.Fragment>
            ))}
          </div>
        </section>

        {/* Pricing */}
        <section style={{ padding: '40px 48px', borderBottom: '1px solid var(--line)' }}>
          <div className="sec-label">pricing</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--line)' }}>
            {[
              { tier: 'Hacker',  price: '$0',    sub: '/month', desc: 'personal projects, single-member LLCs', feats: ['1 treasury account','Unlimited imports','CLI + TUI + MCP','Community support'] },
              { tier: 'Studio', price: '$29',   sub: '/month', desc: 'small teams, agencies, design studios', feats: ['Multi-account','Rule engine','1099 filing','Priority support'], highlight: true },
              { tier: 'Company', price: '$199', sub: '/month', desc: 'funded startups, multi-entity', feats: ['Multi-entity ledger','SSO + audit log','White-label API','Dedicated solutions eng'] },
            ].map((p, i) => (
              <div key={p.tier} style={{
                padding: 24,
                borderRight: i < 2 ? '1px solid var(--line)' : 'none',
                background: p.highlight ? 'var(--accent-bg)' : 'transparent',
                position: 'relative',
              }}>
                {p.highlight && <div style={{ position: 'absolute', top: 10, right: 14, fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--accent)', letterSpacing: '0.14em' }}>★ MOST DEV-FLEX</div>}
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 24, color: 'var(--fg-0)' }}>{p.tier}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
                  <span style={{ fontFamily: 'var(--font-serif)', fontSize: 48, color: p.highlight ? 'var(--accent)' : 'var(--fg-0)' }}>{p.price}</span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)' }}>{p.sub}</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 6, marginBottom: 16 }}>{p.desc}</div>
                {p.feats.map(f => (
                  <div key={f} style={{ fontSize: 12, padding: '4px 0', color: 'var(--fg-1)', borderTop: '1px solid var(--line)' }}>
                    <span style={{ color: 'var(--accent)', marginRight: 8 }}>→</span>{f}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </section>

        {/* Footer */}
        <section style={{ padding: '36px 48px 80px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 44, letterSpacing: '-0.02em' }}>bank<span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>x</span><span className="mono" style={{ fontSize: 14, color: 'var(--fg-2)' }}>.dev</span></div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', marginTop: 6, letterSpacing: '0.14em' }}>© 2026 · banking services provided via stripe treasury partners · member FDIC</div>
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', display: 'flex', gap: 18, textTransform: 'uppercase', letterSpacing: '0.14em' }}>
              <span>docs</span><span>api</span><span>status</span><span>changelog</span><span>security</span><span>careers</span>
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.LandingView = Landing;
})();