// XPHR marketing + docs blocks, adapted from the XPHR design-review canvas.
// Implementation target: sciphr-site static React/Babel surface.

const XPHR_ACCENT = SP_COL.accent;

const XPHR_MARQUEE = [
  'TESTNET PREVIEW', 'FREE IDENTITY', 'NON-CUSTODIAL', 'NO SPREAD MARKUP', 'DOMAIN-SCOPED',
  'XLS-70 CREDENTIALS', 'XLS-80 DOMAINS', 'XLS-81 DEX', 'CLIENT-SIDE SIGNING', 'AUDIT-READY',
];

const XPHR_FEE_ROWS = [
  { item: 'Network status', price: 'TESTNET', note: 'mainnet preparation in progress', accent: true },
  { item: 'Credential · issue', price: 'FREE', note: 'forever', accent: true },
  { item: 'Credential · renew', price: 'FREE', note: 'forever', accent: true },
  { item: 'Trading fee', price: '0.20%', note: 'flat, per trade, shown in both assets' },
  { item: 'Trading fee · XRMZ tier', price: '0.10%', note: 'discount tier or founder access' },
  { item: 'Spread markup', price: 'NONE', note: 'quote route = execution route', accent: true },
  { item: 'Market data · basic', price: 'FREE', note: 'delayed, summary level', accent: true },
  { item: 'Market data · real-time', price: '$7.99/mo', note: '25% off paid in XRMZ' },
  { item: 'Market data · API', price: '$49/mo', note: 'programmatic access' },
  { item: 'Pro · AI features', price: '$24/mo', note: 'bundles real-time data' },
  { item: 'Issuer API · B2B', price: 'from $99/mo', note: 'verify + issuance endpoints' },
  { item: 'Agent attestation', price: '$0.002/call', note: 'billed over x402' },
];

const XPHR_QUOTE = {
  sell: '500.00 XRP',
  rate: '1 XRP = 2.1842 RLUSD',
  route: 'DOMAIN BOOK 100%',
  fee: '1.00 XRP (2.18 RLUSD)',
  network: '0.000012 XRP',
  receive: '1,089.92 RLUSD',
  hash: 'A3C81F…E29D04',
};

function XphrButton({ label, href = '#', as = 'a', onClick, disabled = false, secondary = false }) {
  const [hover, setHover] = React.useState(false);
  const external = window.SP_isExternal && window.SP_isExternal(href);
  const style = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '12px 22px',
    borderRadius: 4,
    border: `1px solid ${secondary ? SP_COL.grayDark : XPHR_ACCENT}`,
    background: secondary ? SP_COL.black : XPHR_ACCENT,
    color: secondary ? SP_COL.white : SP_COL.black,
    boxShadow: secondary ? `3px 3px 0 ${SP_COL.grayDarker}` : `3px 3px 0 ${SP_COL.grayDarker}`,
    fontFamily: SP_MONO_W,
    fontSize: 12,
    fontWeight: 700,
    letterSpacing: '0.25em',
    textTransform: 'uppercase',
    textDecoration: 'none',
    cursor: disabled ? 'not-allowed' : 'pointer',
    opacity: disabled ? 0.55 : 1,
    transform: hover && !disabled ? 'translateY(-2px)' : 'none',
    transition: 'transform 150ms ease, background 150ms ease, color 150ms ease',
  };
  const handlers = {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
    onClick: disabled ? undefined : onClick,
  };
  if (as === 'button') return <button style={style} type="submit" disabled={disabled} {...handlers}>{label}</button>;
  return <a href={href} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} style={style} {...handlers}>{label}</a>;
}

function XphrRow({ k, v, accent = false }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', gap: 10,
      fontFamily: SP_MONO_W, fontSize: 12, lineHeight: 1.55,
    }}>
      <span style={{
        color: SP_COL.grayDark, textTransform: 'uppercase', letterSpacing: '0.14em',
        fontSize: 10, fontWeight: 700, whiteSpace: 'nowrap',
      }}>{k}</span>
      <span aria-hidden="true" style={{
        flex: 1, borderBottom: `1px dotted ${SP_COL.grayDarker}`,
        transform: 'translateY(-3px)', minWidth: 16,
      }} />
      <span style={{ color: accent ? XPHR_ACCENT : SP_COL.white, fontWeight: 600, whiteSpace: 'nowrap', textAlign: 'right' }}>{v}</span>
    </div>
  );
}

function XphrMarquee() {
  return <MarqueeStrip items={XPHR_MARQUEE} />;
}

function XphrTeaser() {
  return (
    <section id="xphr" data-screen-label="04 XPHR teaser"
             style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={4} label="XPHR" />
      <div className="sp-xphr-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <p style={{
            margin: 0, fontFamily: SP_MONO_W, fontSize: 11, fontWeight: 700,
            letterSpacing: '0.4em', textTransform: 'uppercase', color: XPHR_ACCENT,
          }}>Testnet preview · XPHR</p>
          <h2 style={{
            margin: 0, fontFamily: SP_MONO_W, fontSize: 'clamp(26px, 3vw, 36px)',
            lineHeight: 1.15, fontWeight: 600, color: SP_COL.white, textWrap: 'balance',
          }}>A permissioned DEX, built on your free credential.</h2>
          <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 14, lineHeight: 1.65, color: SP_COL.grayLight }}>
            Your SciPHR credential opens a domain-scoped order book in the XPHR testnet preview.
            Identity stays free. Fees stay published. Keys stay yours.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <XphrButton label="Explore XPHR" href={SP_LINKS.pageXphr} />
            <XphrButton label="Fee schedule" href={`${SP_LINKS.pageXphr}#fees`} secondary />
          </div>
        </div>
        <TerminalCard title="XPHR · STATUS" footer="XLS-70 · XLS-80 · XLS-81">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontFamily: SP_MONO_W, fontSize: 13, color: SP_COL.grayLight, lineHeight: 1.7 }}>
            <p style={{ margin: 0 }}>&gt; credential check ......... PASS</p>
            <p style={{ margin: 0 }}>&gt; domain access ............ GRANTED</p>
            <p style={{ margin: 0 }}>&gt; network .................. TESTNET PREVIEW</p>
            <p style={{ margin: 0 }}>&gt; pairs .................... XRP/RLUSD · XRP/XRMZ</p>
            <p style={{ margin: 0, color: XPHR_ACCENT }}>&gt; identity cost ............ $0.00 · FOREVER</p>
          </div>
        </TerminalCard>
      </div>
    </section>
  );
}

function XphrHero() {
  return (
    <header id="top" data-screen-label="XPHR Hero"
            style={{ display: 'flex', flexDirection: 'column', gap: 34 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <p style={{
          margin: 0, fontFamily: SP_MONO_W, fontSize: 11, fontWeight: 700,
          letterSpacing: '0.4em', textTransform: 'uppercase', color: SP_COL.grayLight,
        }}>XRP Ledger · Permissioned DEX · XLS-70 / 80 / 81</p>
        <h1 style={{
          margin: 0, fontFamily: SP_MONO_W, fontSize: 'clamp(36px, 5.4vw, 64px)',
          lineHeight: 1.08, fontWeight: 600, color: SP_COL.white, textWrap: 'balance',
        }}>
          Identity is free. <span style={{ color: XPHR_ACCENT }}>Fees are published.</span>
        </h1>
        <p style={{ margin: 0, maxWidth: 720, fontFamily: SP_MONO_W, fontSize: 16, lineHeight: 1.65, color: SP_COL.grayLight }}>
          XPHR is a testnet preview for a permissioned DEX built on SciPHR credentials.
          Verification, the on-chain credential, and every renewal cost nothing,
          permanently. Fees begin at the trading platform, and each one is visible before you sign.
        </p>
        <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 13, color: XPHR_ACCENT }}>
          &gt; status: testnet only · mainnet preparation active <Caret color={XPHR_ACCENT} />
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <XphrButton label="Request early access" href="#access" />
          <XphrButton label="Read fee schedule" href="#fees" secondary />
        </div>
      </div>
      <XphrMarquee />
    </header>
  );
}

function XphrHeroTerminal() {
  return (
    <section data-screen-label="XPHR fee overview"
             className="sp-xphr-grid-2"
             style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'center' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <SectionEyebrow index={1} label="The contract" />
        <h2 style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 'clamp(26px, 3vw, 40px)', lineHeight: 1.15, color: SP_COL.white }}>
          Fees are visible before signing.
        </h2>
        <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 14, lineHeight: 1.65, color: SP_COL.grayLight }}>
          XPHR shows the trading fee in XRP and the received asset before a
          signature request. The route is visible, spread markup is none, and
          the signed route must match the quoted route.
        </p>
      </div>
      <TerminalCard title="XPHR · FEES" footer="QUOTE ROUTE = EXECUTION ROUTE">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          <XphrRow k="Issue credential" v="FREE" accent />
          <XphrRow k="Renew credential" v="FREE" accent />
          <XphrRow k="Trading fee" v="0.20%" />
          <XphrRow k="XRMZ tier" v="0.10%" />
          <XphrRow k="Spread markup" v="NONE" accent />
          <XphrRow k="Hidden fees" v="NONE" accent />
        </div>
      </TerminalCard>
    </section>
  );
}

function XphrLeadForm() {
  const [persona, setPersona] = React.useState('trader');
  const [values, setValues] = React.useState({});
  const [state, setState] = React.useState({ status: 'idle', message: '' });
  const personas = [
    ['trader', 'Trader'],
    ['operator', 'Platform operator'],
    ['agent', 'Agent dev'],
  ];
  function set(name, value) { setValues(prev => ({ ...prev, [name]: value })); }
  async function submit(e) {
    e.preventDefault();
    setState({ status: 'loading', message: 'Logging…' });
    const payload = {
      ...values,
      persona,
      intent: 'xphr-early-access',
      _subject: `XPHR early access, ${values.email || ''}`,
    };
    const endpoint = window.SP_FORM_ENDPOINT;
    if (!endpoint) {
      const body = encodeURIComponent(
        Object.entries(payload)
          .filter(([k]) => !k.startsWith('_'))
          .map(([k, v]) => `${k}: ${v || ''}`)
          .join('\n')
      );
      window.location.href = `mailto:hello@sciphr.io?subject=${encodeURIComponent('XPHR early access')}&body=${body}`;
      setState({ status: 'success', message: 'Opened your mail client.' });
      return;
    }
    try {
      const res = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setValues({});
      setPersona('trader');
      setState({ status: 'success', message: 'Request logged. Watch your inbox.' });
    } catch (err) {
      setState({ status: 'error', message: 'Send failed. Email hello@sciphr.io.' });
    }
  }
  const fieldStyle = {
    height: 44, width: '100%', background: 'transparent', color: SP_COL.white,
    border: `1px solid ${SP_COL.grayDark}`, borderRadius: 4, padding: '0 12px',
    fontFamily: SP_MONO_W, fontSize: 13, boxSizing: 'border-box', outline: 'none',
  };
  const label = {
    fontFamily: SP_MONO_W, fontSize: 11, color: SP_COL.grayLight,
    letterSpacing: '0.3em', textTransform: 'uppercase',
    display: 'flex', flexDirection: 'column', gap: 8,
  };
  return (
    <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <p style={{ ...label, margin: 0 }}>I am a</p>
        <div className="sp-xphr-persona" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', border: `1px solid ${SP_COL.grayDark}`, borderRadius: 4, overflow: 'hidden' }}>
          {personas.map(([id, text], i) => (
            <button key={id} type="button" onClick={() => setPersona(id)} style={{
              padding: '11px 8px',
              background: persona === id ? SP_COL.white : SP_COL.black,
              color: persona === id ? SP_COL.black : SP_COL.grayLight,
              border: 'none',
              borderLeft: i > 0 ? `1px solid ${SP_COL.grayDark}` : 'none',
              fontFamily: SP_MONO_W,
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: '0.15em',
              textTransform: 'uppercase',
              cursor: 'pointer',
            }}>{text}</button>
          ))}
        </div>
      </div>
      <label style={label}>
        Email
        <input style={fieldStyle} type="email" required placeholder="you@example.com" value={values.email || ''} onChange={e => set('email', e.target.value)} />
      </label>
      <label style={label}>
        XRPL address · optional
        <input style={fieldStyle} type="text" placeholder="r..." spellCheck="false" value={values.xrplAddress || ''} onChange={e => set('xrplAddress', e.target.value)} />
        <span style={{ fontSize: 10, lineHeight: 1.5, color: SP_COL.grayDark, letterSpacing: '0.12em', textTransform: 'none' }}>
          Used once, for the early adopter trustline snapshot. Never custody, never a signature request.
        </span>
      </label>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <XphrButton as="button" label={state.status === 'loading' ? 'Logging' : 'Request early access'} disabled={state.status === 'loading'} />
        <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.25em', textTransform: 'uppercase', color: SP_COL.grayLight }}>{state.message}</p>
      </div>
    </form>
  );
}

function XphrAccess() {
  return (
    <section id="access" data-screen-label="XPHR access" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={2} label="Early access" />
      <div className="sp-xphr-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }}>
        <OutlineCard title="Early access">
          <XphrLeadForm />
        </OutlineCard>
        <OutlineCard title="Early adopter rewards">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.65, color: SP_COL.grayLight }}>
              Hold the XRMZ trustline at snapshot and the platform starts on its founder terms.
              Rewards are discounts. Nothing is gated behind them.
            </p>
            <XphrRow k="Market data · paid tier" v="12 months free" accent />
            <XphrRow k="Trading fee tier" v="0.10% founder" accent />
            <XphrRow k="Snapshot" v="announced ahead" />
            <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 11, lineHeight: 1.6, color: SP_COL.grayDark }}>
              &gt; functionality is identical for non-holders at list price.
            </p>
          </div>
        </OutlineCard>
      </div>
    </section>
  );
}

function XphrHowItWorks() {
  const steps = [
    ['01', 'Verify', 'Face ID and liveness on your device. No documents for the base tier.', 'FREE'],
    ['02', 'Issue', 'SciPHR writes an XLS-70 credential to the ledger, bound to your account.', 'FREE'],
    ['03', 'Accept', 'You countersign acceptance from your wallet. The credential is now live.', 'FREE'],
    ['04', 'Trade', 'The credential opens the XPHR testnet order book. Fees start here.', '0.20%'],
  ];
  return (
    <section id="how" data-screen-label="XPHR how it works" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={3} label="How it works" />
      <div>
        <h2 style={{ margin: '0 0 12px 0', fontFamily: SP_MONO_W, fontSize: 'clamp(26px, 3vw, 38px)', lineHeight: 1.15, color: SP_COL.white }}>
          Verify, issue, accept, then trade.
        </h2>
        <p style={{ margin: 0, maxWidth: 720, fontFamily: SP_MONO_W, fontSize: 14, lineHeight: 1.65, color: SP_COL.grayLight }}>
          Verification, issuance, and renewal stay free. Trading fees begin
          only when a user enters the XPHR testnet order book.
        </p>
      </div>
      <div className="sp-xphr-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
        {steps.map(([n, title, body, tag]) => (
          <OutlineCard key={n}>
            <div style={{ minHeight: 170, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: SP_MONO_W, fontSize: 22, fontWeight: 700, color: SP_COL.grayDark }}>{n}</span>
                <span style={{ fontFamily: SP_MONO_W, fontSize: 10, fontWeight: 700, letterSpacing: '0.25em', color: tag === 'FREE' ? XPHR_ACCENT : SP_COL.grayLight }}>{tag}</span>
              </div>
              <h3 style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 13, letterSpacing: '0.25em', textTransform: 'uppercase', color: SP_COL.white }}>{title}</h3>
              <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 12, lineHeight: 1.55, color: SP_COL.grayLight }}>{body}</p>
            </div>
          </OutlineCard>
        ))}
      </div>
    </section>
  );
}

function XphrFeeModule({ state = 'confirmed' }) {
  const post = state === 'executed';
  return (
    <div style={{ border: `1px solid ${SP_COL.grayDark}`, borderRadius: 4, background: SP_COL.black }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '11px 14px', borderBottom: `1px solid ${SP_COL.grayDarker}` }}>
        <span style={{ fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: SP_COL.grayLight }}>Fee · before you sign</span>
        <span style={{ fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: state === 'quoting' ? SP_COL.grayLight : XPHR_ACCENT }}>
          {state === 'quoting' ? 'QUOTING' : post ? 'VALIDATED' : 'QUOTE LOCKED · 12S'}
        </span>
      </div>
      <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <XphrRow k="Sell" v={XPHR_QUOTE.sell} />
        <XphrRow k="Rate" v={state === 'quoting' ? '···' : XPHR_QUOTE.rate} />
        <XphrRow k="Route" v={state === 'quoting' ? 'resolving' : XPHR_QUOTE.route} />
        <XphrRow k="XPHR fee 0.20%" v={state === 'quoting' ? '···' : XPHR_QUOTE.fee} />
        <XphrRow k="Network" v={state === 'quoting' ? '···' : XPHR_QUOTE.network} />
        <XphrRow k="Spread markup" v="NONE" accent />
      </div>
      <div style={{ margin: '0 14px 14px', padding: 12, border: `1px solid ${post ? XPHR_ACCENT : SP_COL.grayDark}` }}>
        <XphrRow k={post ? 'Received' : 'You receive'} v={state === 'quoting' ? '···' : XPHR_QUOTE.receive} accent={state !== 'quoting'} />
      </div>
      {post ? (
        <div style={{ padding: '0 14px 14px', display: 'flex', flexDirection: 'column', gap: 7 }}>
          <XphrRow k="Tx hash" v={XPHR_QUOTE.hash} />
          <XphrRow k="Ledger" v="94,118,267" />
        </div>
      ) : null}
      <div style={{ borderTop: `1px solid ${SP_COL.grayDarker}`, padding: '10px 14px', fontFamily: SP_MONO_W, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: SP_COL.grayDark }}>
        {state === 'quoting' ? '> quoting domain book' : post ? '> executed on quoted route. no slippage captured.' : '> quote route equals execution route.'}
      </div>
    </div>
  );
}

function XphrFeeTransparency() {
  return (
    <section id="fees" data-screen-label="XPHR fees" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={4} label="Fee transparency" />
      <div className="sp-xphr-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <h2 style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 'clamp(26px, 3vw, 38px)', lineHeight: 1.15, color: SP_COL.white }}>
            Fees are shown before signing.
          </h2>
          <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 14, lineHeight: 1.65, color: SP_COL.grayLight }}>
            XPHR renders the route, fee, and received amount before Face ID or
            wallet signing. No sign action is available while a quote is resolving.
            XRMZ can lower the fee; it does not unlock or hide functionality.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            <XphrRow k="Quoting" v="sign disabled" />
            <XphrRow k="Confirmed" v="quote locked" />
            <XphrRow k="Executed" v="validated" accent />
            <XphrRow k="Receipt" v="csv / json export" />
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <XphrFeeModule state="quoting" />
          <XphrFeeModule state="confirmed" />
          <XphrFeeModule state="executed" />
        </div>
      </div>
    </section>
  );
}

function XphrPricing() {
  return (
    <section data-screen-label="XPHR pricing" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={5} label="Pricing surfaces" />
      <div>
        <h2 style={{ margin: '0 0 12px 0', fontFamily: SP_MONO_W, fontSize: 'clamp(26px, 3vw, 38px)', lineHeight: 1.15, color: SP_COL.white }}>
          Every fee, in one table.
        </h2>
        <p style={{ margin: 0, maxWidth: 760, fontFamily: SP_MONO_W, fontSize: 14, lineHeight: 1.65, color: SP_COL.grayLight }}>
          These figures are v0.1 testnet assumptions. Confirm the mainnet schedule before treating it as binding.
        </p>
      </div>
      <OutlineCard>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {XPHR_FEE_ROWS.map((row, i) => (
            <div key={row.item} className="sp-xphr-fee-row" style={{
              display: 'grid', gridTemplateColumns: '260px 160px 1fr',
              gap: 18, alignItems: 'baseline',
              padding: '13px 0',
              borderTop: i > 0 ? `1px solid ${SP_COL.grayDarker}` : 'none',
              fontFamily: SP_MONO_W,
            }}>
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: SP_COL.grayLight }}>{row.item}</span>
              <span style={{ fontSize: 14, fontWeight: 700, color: row.accent ? XPHR_ACCENT : SP_COL.white, textTransform: 'uppercase' }}>{row.price}</span>
              <span style={{ fontSize: 12, lineHeight: 1.5, color: SP_COL.grayDark }}>{row.note}</span>
            </div>
          ))}
        </div>
      </OutlineCard>
    </section>
  );
}

function XphrTiers() {
  const cards = [
    ['Basic data', 'FREE', [['Ledger data', 'Delayed 15 min'], ['Depth + volume', 'Summary'], ['Dashboards', 'Daily snapshot']]],
    ['Real-time data', '$7.99/mo', [['Ledger data', 'Real-time'], ['Depth + volume', 'Full book + AMM'], ['Alerts', 'Whale flow + risk']]],
    ['Issuer API', 'from $99/mo', [['Attestations', '1K+ / month'], ['Endpoints', 'Verify + issuance'], ['End-user cost', '$0']]],
    ['XRMZ tier', '0.10%', [['Trading fee', 'Founder'], ['Functionality', 'Everything'], ['Type', 'Discount, never gate']]],
  ];
  return (
    <section data-screen-label="XPHR tiers" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={6} label="Data, API, XRMZ" />
      <div className="sp-xphr-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
        {cards.map(([title, price, rows]) => (
          <OutlineCard key={title} title={title}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <span style={{ fontFamily: SP_MONO_W, fontSize: 28, fontWeight: 700, color: price === 'FREE' || price === '0.10%' ? XPHR_ACCENT : SP_COL.white, lineHeight: 1 }}>
                {price}
              </span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {rows.map(([k, v]) => <XphrRow key={k} k={k} v={v} accent={v === '$0'} />)}
              </div>
            </div>
          </OutlineCard>
        ))}
      </div>
    </section>
  );
}

function XphrProductSurfaces() {
  return (
    <section data-screen-label="XPHR app surfaces" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={7} label="App surfaces" />
      <div className="sp-xphr-grid-2" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 24, alignItems: 'start' }}>
        <div style={{ border: `2px solid ${SP_COL.white}`, borderRightWidth: 3, borderBottomWidth: 3, boxShadow: `4px 4px 0 ${SP_COL.grayDark}`, background: SP_COL.white, color: SP_COL.black, padding: 18 }}>
          <div style={{ background: SP_COL.black, color: SP_COL.white, padding: 12, marginBottom: 14, fontFamily: SP_MONO_W, fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase' }}>
            XPHR · VERIFY
          </div>
          <h3 style={{ margin: '0 0 14px 0', fontFamily: SP_MONO_W, fontSize: 20, lineHeight: 1.25 }}>Verify once. Free forever.</h3>
          {['01 biometric capture', '02 liveness check', '03 issue on-chain'].map((line, i) => (
            <div key={line} style={{ display: 'flex', gap: 10, fontFamily: SP_MONO_W, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.12em', padding: '8px 0', borderTop: i > 0 ? '1px solid #C0C0C0' : 'none' }}>
              <span style={{ color: i === 0 ? XPHR_ACCENT : SP_COL.grayDark }}>{i === 0 ? '▸' : '·'}</span>
              <span>{line}</span>
            </div>
          ))}
          <div style={{ marginTop: 16, border: '2px solid #000', padding: 10, textAlign: 'center', fontFamily: SP_MONO_W, fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            Cost: $0.00 · forever
          </div>
        </div>
        <TerminalCard title="XPHR · TRADE" footer="DOMAIN: XPHR.SCIPHR.IO · FEES PUBLISHED">
          <div className="sp-xphr-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 0.9fr', gap: 16 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <XphrRow k="Pair" v="XRP / RLUSD" />
              <XphrRow k="Route" v={XPHR_QUOTE.route} />
              <XphrRow k="Order book" v="Domain scoped" accent />
              <div style={{ border: `1px solid ${SP_COL.grayDarker}`, borderRadius: 4, padding: 14 }}>
                <p style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 12, color: SP_COL.grayLight, lineHeight: 1.8 }}>
                  $ swap 500 xrp to rlusd<br />
                  <span style={{ color: SP_COL.grayDark }}>parsed: SELL 500.00 XRP · BUY RLUSD</span><br />
                  <span style={{ color: XPHR_ACCENT }}>receive {XPHR_QUOTE.receive} · fee {XPHR_QUOTE.fee}</span>
                </p>
              </div>
            </div>
            <XphrFeeModule state="confirmed" />
          </div>
        </TerminalCard>
      </div>
    </section>
  );
}

function FlowBox({ title, tag, lines, accent = false }) {
  return (
    <div style={{
      border: `1px solid ${accent ? XPHR_ACCENT : SP_COL.grayDark}`,
      borderRadius: 4,
      background: SP_COL.black,
      padding: '14px 16px',
      display: 'flex',
      flexDirection: 'column',
      gap: 8,
      minHeight: 118,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10 }}>
        <span style={{ fontFamily: SP_MONO_W, fontSize: 12, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: SP_COL.white }}>{title}</span>
        <span style={{ fontFamily: SP_MONO_W, fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: accent ? XPHR_ACCENT : SP_COL.grayLight }}>{tag}</span>
      </div>
      {lines.map(line => (
        <p key={line} style={{ margin: 0, fontFamily: SP_MONO_W, fontSize: 11, lineHeight: 1.45, color: SP_COL.grayLight }}>{line}</p>
      ))}
    </div>
  );
}

function XphrFlows() {
  const identity = [
    ['Verify', 'FREE', ['Face ID + liveness on device', 'biometrics never leave'], false],
    ['Issue', 'FREE', ['SciPHR signs XLS-70 credential', 'CredentialCreate on ledger'], false],
    ['Accept', 'FREE', ['user countersigns', 'CredentialAccept live'], false],
    ['Trade', '0.20%', ['XLS-80 domain admits holder', 'XLS-81 domain offers'], true],
  ];
  const trade = [
    ['Quoting', 'state 1', ['route resolves', 'sign disabled'], false],
    ['Confirmed', 'state 2', ['fee in both assets', 'validity window visible'], false],
    ['Executed', 'state 3', ['validated on quoted route', 'no slippage captured'], true],
    ['Receipt', 'state 4', ['close time + hash', 'export csv / json'], false],
  ];
  const render = (rows) => (
    <div className="sp-xphr-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {rows.map(([title, tag, lines, accent]) => <FlowBox key={title} title={title} tag={tag} lines={lines} accent={accent} />)}
    </div>
  );
  return (
    <section data-screen-label="XPHR flows" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={8} label="Flows" />
      <OutlineCard title="Free identity to testnet trade">
        {render(identity)}
        <p style={{ margin: '16px 0 0 0', fontFamily: SP_MONO_W, fontSize: 11, color: SP_COL.grayDark, lineHeight: 1.6 }}>
          &gt; the first three boxes can never cost money. revenue exists only inside the fourth.
        </p>
      </OutlineCard>
      <OutlineCard title="Trade lifecycle">
        {render(trade)}
        <p style={{ margin: '16px 0 0 0', fontFamily: SP_MONO_W, fontSize: 11, color: SP_COL.grayDark, lineHeight: 1.6 }}>
          &gt; backend prepares unsigned tx and broadcasts the signed blob. it never holds keys or funds.
        </p>
      </OutlineCard>
    </section>
  );
}

function XphrGuardrails() {
  const rules = [
    'Identity is never paywalled. Creating, holding, and renewing a credential is free, permanently.',
    'The full fee schedule is published here and referenced in-app.',
    'No spread markup. Every testnet trade shows the fee, route, and received amount before signing.',
    'XRMZ benefits are discounts, never paywalls.',
    'A free market data tier always exists.',
  ];
  return (
    <section data-screen-label="XPHR guardrails" style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      <SectionEyebrow index={9} label="Guardrails" />
      <OutlineCard title="XPHR operating rules">
        {rules.map((rule, i) => (
          <div key={rule} style={{
            display: 'flex', gap: 16, padding: '13px 0',
            borderTop: i > 0 ? `1px solid ${SP_COL.grayDarker}` : 'none',
            fontFamily: SP_MONO_W, fontSize: 13, lineHeight: 1.55, color: SP_COL.grayLight,
          }}>
            <span style={{ color: XPHR_ACCENT, fontWeight: 700 }}>{String(i + 1).padStart(2, '0')}</span>
            <span>{rule}</span>
          </div>
        ))}
      </OutlineCard>
    </section>
  );
}

function XphrPage() {
  return (
    <SiteShell current="xphr">
      <XphrHero />
      <XphrHeroTerminal />
      <XphrAccess />
      <XphrHowItWorks />
      <XphrFeeTransparency />
      <XphrPricing />
      <XphrTiers />
      <XphrProductSurfaces />
      <XphrFlows />
      <XphrGuardrails />
    </SiteShell>
  );
}

Object.assign(window, {
  XphrButton, XphrRow, XphrMarquee, XphrTeaser, XphrHero, XphrHeroTerminal,
  XphrLeadForm, XphrAccess, XphrHowItWorks, XphrFeeModule,
  XphrFeeTransparency, XphrPricing, XphrTiers, XphrProductSurfaces,
  XphrFlows, XphrGuardrails, XphrPage,
});