// ============================================================================
// Principia White Paper — Document shell (cover, abstract, TOC, closing, footer)
// ============================================================================

function FoundationMark({ size = 24, color }) {
  return (
    <svg viewBox="0 0 100 112" width={size} height={size * 1.12} aria-hidden="true" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      <text x="50" y="78" textAnchor="middle" fontFamily="Georgia,serif" fontWeight="500" fontSize="96" fill={color || 'currentColor'} letterSpacing="-2">P</text>
      <rect x="6" y="96" width="88" height="4.2" rx="1" fill={color || 'currentColor'}/>
      <rect x="6" y="105" width="50" height="3" rx="1" fill={color || 'currentColor'} opacity=".4"/>
    </svg>
  );
}
function Wordmark({ light, height = 26 }) {
  const c = light ? '#fff' : C_INK;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <FoundationMark size={Math.round(height * 0.9)} color={c} />
      <span style={{
        fontFamily: FONT_DISP, fontWeight: 600, fontSize: Math.round(height * 0.94),
        letterSpacing: '-0.015em', lineHeight: 1, whiteSpace: 'nowrap', color: c,
      }}>Principia</span>
    </span>
  );
}

// ───── Reading progress bar ─────
function ProgressBar() {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const on = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? (h.scrollTop || document.body.scrollTop) / max : 0);
    };
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <div className="wp-chrome" style={{ position: 'fixed', top: 0, left: 0, right: 0, height: 3, background: 'transparent', zIndex: 100 }}>
      <div style={{ height: '100%', width: `${p * 100}%`, background: C_ACCENT, transition: 'width 80ms linear' }} />
    </div>
  );
}

// ───── Sticky mini-header (appears after cover) ─────
function MiniHeader() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const on = () => setShow((document.documentElement.scrollTop || document.body.scrollTop) > window.innerHeight * 0.85);
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className="wp-chrome" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 90,
      background: 'rgba(244,246,251,0.88)', backdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${C_RULE}`,
      transform: show ? 'translateY(0)' : 'translateY(-100%)',
      transition: `transform .35s ${EASE}`,
      padding: '13px clamp(16px, 4vw, 40px)', display: 'flex', alignItems: 'center', gap: 'clamp(10px, 2vw, 18px)',
    }}>
      <Wordmark height={20} />
      <div style={{ width: 1, height: 18, background: C_RULE }} />
      <span style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: C_MUTED, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>Payment Infrastructure White Paper</span>
      <div style={{ flex: 1 }} />
      <span style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: C_MUTED }}>MMXXVI</span>
    </header>
  );
}

// ───── Cover ─────
function Cover() {
  const [ref, seen] = useReveal(0.3);
  const big = useCountUp(3300, seen, { duration: 1400 });
  const bigStr = Number(big).toLocaleString('en-US');
  return (
    <section id="cover" data-screen-label="Cover" style={{ background: C_INK, color: '#fff', position: 'relative', overflow: 'hidden', minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      {/* compass watermark */}
      <div aria-hidden style={{
        position: 'absolute', top: '8%', right: '-6%', width: 'min(620px, 80vw)', height: 'min(620px, 80vw)',
        backgroundImage: 'url(assets/principia-compass.png)', backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat', backgroundPosition: 'center',
        opacity: 0.06, filter: 'invert(1)', pointerEvents: 'none',
      }} />
      {/* top bar */}
      <div style={{ position: 'relative', maxWidth: WP_MAXW, margin: '0 auto', width: '100%', padding: 'clamp(20px, 4vw, 34px) clamp(16px, 4vw, 40px)', display: 'flex', alignItems: 'center', gap: 18 }}>
        <Wordmark light height={24} />
        <div style={{ flex: 1 }} />
        <span style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>MMXXVI · Digital Bank · Volume 01 · Edition 01</span>
      </div>

      {/* hero copy */}
      <div ref={ref} style={{ position: 'relative', maxWidth: WP_MAXW, margin: '0 auto', width: '100%', padding: '0 clamp(16px, 4vw, 40px)', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ maxWidth: 880 }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: C_ACCENT2, fontWeight: 500 }}>Product White Paper · B2B Digital Bank Platform</div>
          <h1 style={{ fontFamily: FONT_DISP, fontWeight: 400, fontSize: 'clamp(44px, 7.2vw, 94px)', lineHeight: 1.0, letterSpacing: '-0.025em', margin: '26px 0 0' }}>
            Payment infrastructure<br />for the firms <em style={{ fontStyle: 'italic', color: C_ACCENT2 }}>banks refuse to serve.</em>
          </h1>
          <p style={{ fontFamily: FONT_SANS, fontSize: 'clamp(17px,2vw,21px)', lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', maxWidth: 660, marginTop: 30 }}>
            A purpose-built EU credit institution with direct central-bank access, Mastercard / Visa principal membership, and its own acquiring stack — for licensed payment firms the existing system has left behind.
          </p>
        </div>

        {/* hero stat */}
        <div style={{ marginTop: 'clamp(36px, 6vh, 72px)', display: 'flex', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: FONT_DISP, fontWeight: 400, fontSize: 'clamp(96px, 15vw, 200px)', lineHeight: 0.82, letterSpacing: '-0.04em', color: '#fff' }}>{bigStr}</div>
          <div style={{ maxWidth: 340, paddingBottom: 14 }}>
            <div style={{ fontFamily: FONT_SANS, fontSize: 18, fontWeight: 600, color: '#fff', lineHeight: 1.35 }}>licensed payment firms cannot get a bank account.</div>
            <div style={{ fontFamily: FONT_SANS, fontSize: 13.5, color: 'rgba(255,255,255,0.6)', lineHeight: 1.5, marginTop: 8 }}>EU + UK payment and e-money institutions requiring segregated safeguarding. Most banks refuse; the ones that don’t can exit in 30 days.</div>
          </div>
        </div>
      </div>

      {/* KPI strip */}
      <div style={{ position: 'relative', maxWidth: WP_MAXW, margin: '0 auto', width: '100%', padding: '0 clamp(16px, 4vw, 40px) clamp(24px, 4vw, 40px)', marginTop: 44 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(160px, 100%), 1fr))', gap: 1, background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 12, overflow: 'hidden' }}>
          {[
            { v: '48hrs', l: 'Partner go-live' },
            { v: '0.75%', l: 'Settlement rate' },
            { v: '5', l: 'Central banks direct' },
            { v: '0', l: 'Debanking risk' },
          ].map((k, i) => (
            <div key={i} style={{ background: C_INK, padding: '22px 22px' }}>
              <div style={{ fontFamily: FONT_DISP, fontSize: 'clamp(26px,3vw,38px)', lineHeight: 1, letterSpacing: '-0.02em', color: i === 3 ? C_ACCENT2 : '#fff' }}>{k.v}</div>
              <div style={{ fontFamily: FONT_SANS, fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 9, lineHeight: 1.35 }}>{k.l}</div>
            </div>
          ))}
        </div>
        <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginTop: 16 }}>
          Sources · BIS CPMI 2025 · FCA CP24/20 &amp; PS25/12 · EBA EUCLID Register 2024 · World Bank RPW Q1 2025
        </div>
      </div>
    </section>
  );
}

// ───── Abstract + Table of contents ─────
function Abstract() {
  const toc = [
    ['01', 'The Debanking Crisis'], ['02', 'The Merchant Desert'], ['03', 'The Multi-Currency Gap'],
    ['04', 'What Changed'], ['05', 'From Five Intermediaries to Zero'], ['06', 'How the Model Works'],
    ['07', 'Platform: Six Service Lines'], ['08', 'Settlement Rails'], ['09', 'Competitive Position'],
    ['10', 'Partner Economics'], ['11', 'Pricing'], ['12', 'Partner Onboarding'], ['13', 'Platform Architecture'],
  ];
  return (
    <Section id="abstract" pad="96px 0 72px">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(360px, 100%), 1fr))', gap: 'clamp(32px, 6vw, 72px)', alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C_ACCENT, fontWeight: 600 }}>Abstract</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 3, width: 64, margin: '16px 0 22px' }}>
            <div style={{ height: 1, background: C_RULE }} /><div style={{ height: 1, background: C_RULE }} />
          </div>
          <p style={{ fontFamily: FONT_DISP, fontWeight: 400, fontSize: 'clamp(22px,2.6vw,28px)', lineHeight: 1.4, letterSpacing: '-0.01em', color: C_INK, margin: 0 }}>
            This paper describes why existing payment infrastructure is structurally broken for licensed financial institutions — and what a purpose-built EU credit institution with direct central-bank access can do about it.
          </p>
          <P style={{ marginTop: 26 }}>The licensed payment sector is caught in a paradox: regulation requires it to safeguard customer funds at a credit institution, yet credit institutions are exiting the corridors these firms serve. The result is a shrinking pool of willing banks, escalating counterparty risk, and remittance costs that fail the world’s development targets.</P>
          <P>Three regulatory shifts in 2025 changed the picture. We set out the model that follows from them — direct settlement across five central banks, principal card membership, and an own acquiring stack — and the economics it creates for partner firms.</P>
          <div style={{ marginTop: 30, display: 'flex', gap: 36, flexWrap: 'wrap' }}>
            <div><div style={{ fontFamily: FONT_MONO, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: C_MUTED, marginBottom: 6 }}>Written for</div><div style={{ fontFamily: FONT_SANS, fontSize: 14.5, color: C_INK, lineHeight: 1.5, maxWidth: 320 }}>Compliance officers, CTOs and operations heads at licensed payment institutions, MTOs, fintechs and mobile-money operators.</div></div>
            <div><div style={{ fontFamily: FONT_MONO, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: C_MUTED, marginBottom: 6 }}>Edition</div><div style={{ fontFamily: FONT_SANS, fontSize: 14.5, color: C_INK, lineHeight: 1.5 }}>June 2026 · Vol. 01</div></div>
          </div>
        </div>
        <div className="wp-toc-col" style={{ borderLeft: `1px solid ${C_RULE}`, paddingLeft: 40 }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C_MUTED, fontWeight: 500, marginBottom: 20 }}>Contents</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {toc.map(([n, t]) => (
              <a key={n} href={`#${n}`} style={{ display: 'flex', alignItems: 'baseline', gap: 14, padding: '11px 0', borderBottom: `1px solid ${C_RULE}`, textDecoration: 'none' }}>
                <span style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.12em', color: C_ACCENT, fontWeight: 600, minWidth: 22 }}>{n}</span>
                <span style={{ fontFamily: FONT_SANS, fontSize: 15, color: C_INK, fontWeight: 500 }}>{t}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

// ───── Closing ─────
function Closing() {
  return (
    <section id="closing" data-screen-label="Closing" style={{ background: C_INK, color: '#fff', position: 'relative', overflow: 'hidden', padding: '120px 0' }}>
      <div aria-hidden style={{ position: 'absolute', bottom: '-12%', left: '-6%', width: 'min(540px, 70vw)', height: 'min(540px, 70vw)', backgroundImage: 'url(assets/principia-compass.png)', backgroundSize: 'contain', backgroundRepeat: 'no-repeat', opacity: 0.05, filter: 'invert(1)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: WP_MAXW, margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)' }}>
        <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C_ACCENT2, fontWeight: 500, marginBottom: 28 }}>The proposition</div>
        <h2 style={{ fontFamily: FONT_DISP, fontWeight: 400, fontSize: 'clamp(40px, 6.4vw, 84px)', lineHeight: 1.02, letterSpacing: '-0.025em', margin: 0, maxWidth: 980 }}>
          Stable account. Stable channels.<br /><em style={{ fontStyle: 'italic', color: C_ACCENT2 }}>Prosperous business.</em>
        </h2>
        <p style={{ fontFamily: FONT_SANS, fontSize: 18.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.74)', maxWidth: 640, marginTop: 30 }}>
          Own licence. Own clearing. Own acquiring. We cannot be de-risked, cannot be exited, and hold your funds at the central bank.
        </p>
        <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(160px, 100%), 1fr))', gap: 1, background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 12, overflow: 'hidden' }}>
          {[['48 hrs', 'Partner onboarding'], ['5', 'Central banks, direct'], ['7 / 7', 'Capability coverage']].map(([v, l]) => (
            <div key={l} style={{ background: C_INK, padding: '20px 30px' }}>
              <div style={{ fontFamily: FONT_DISP, fontSize: 34, letterSpacing: '-0.02em', lineHeight: 1 }}>{v}</div>
              <div style={{ fontFamily: FONT_SANS, fontSize: 12.5, color: 'rgba(255,255,255,0.6)', marginTop: 7 }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ fontFamily: FONT_MONO, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', marginTop: 40 }}>June · MMXXVI</div>
      </div>
    </section>
  );
}

// ───── Footer ─────
function Footer() {
  return (
    <footer style={{ background: C_NAVY_DEEP, color: 'rgba(255,255,255,0.7)', padding: '56px 0 48px' }}>
      <div style={{ maxWidth: WP_MAXW, margin: '0 auto', padding: '0 clamp(16px, 4vw, 40px)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'clamp(24px, 4vw, 40px)', flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 320 }}>
          <Wordmark light height={22} />
          <div style={{ fontFamily: FONT_SANS, fontSize: 13, color: 'rgba(255,255,255,0.5)', marginTop: 14, lineHeight: 1.6 }}>
            Wholesale B2B payment infrastructure. We provide the regulated rails; your customers remain yours.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 56, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 12 }}>Document</div>
            {[['Abstract', '#abstract'], ['The crisis', '#01'], ['The model', '#06'], ['Pricing', '#11']].map(([l, h]) => (
              <a key={l} href={h} style={{ display: 'block', fontFamily: FONT_SANS, fontSize: 13.5, color: 'rgba(255,255,255,0.7)', textDecoration: 'none', padding: '4px 0' }}>{l}</a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: FONT_MONO, fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 12 }}>Regulatory</div>
            {['Lithuanian specialised bank', 'PRA branch · Year 2', 'MC / Visa principal', 'EEA passporting · 29 countries'].map((l) => (
              <div key={l} style={{ fontFamily: FONT_SANS, fontSize: 13.5, color: 'rgba(255,255,255,0.7)', padding: '4px 0' }}>{l}</div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ maxWidth: WP_MAXW, margin: '0 auto', padding: '28px clamp(16px, 4vw, 40px) 0', marginTop: 36, borderTop: '1px solid rgba(255,255,255,0.12)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <span style={{ fontFamily: FONT_MONO, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)' }}>© MMXXVI · Confidential · For evaluation by licensed institutions</span>
        <span style={{ fontFamily: FONT_MONO, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)' }}>Product White Paper · Vol. 01 · Edition 01</span>
      </div>
    </footer>
  );
}

const C_NAVY_DEEP = '#061529';

// ───── Assemble ─────
function WhitePaper() {
  return (
    <React.Fragment>
      <ProgressBar />
      <MiniHeader />
      <Cover />
      <Abstract />
      <Sec01 /><Sec02 /><Sec03 /><Sec04 /><Sec05 /><Sec06 /><Sec07 />
      <Sec08 /><Sec09 /><Sec10 /><Sec11 /><Sec12 /><Sec13 />
      <Closing />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<WhitePaper />);
