vyndr/web/src/app/pricing/DeskShowcase.tsx

import SectionHead from '@/components/vyndr/SectionHead';

/**
 * DeskShowcase (DS5 · DESIGN-SPEC Part 6, #8) — the Desk-as-hero story that
 * sits ABOVE the pricing grid. Its job is the founder's one line: make $44.99
 * feel impossibly low for a professional terminal ("how is this only $44.99"
 * IS the conversion event). Balanced two-column layout — the pitch on the left,
 * REAL feature visuals on the right (kills the dead right-half, audit #8). The
 * single primary CTA scrolls to the grid where the real Stripe checkout lives
 * (checkout wiring untouched).
 *
 * Server component — no interactivity here; the CTA is an in-page anchor and the
 * feature visuals are static, tokenized, mono-for-data mock readouts.
 */

// A real alt-line-ladder rung (the Desk exclusive) — line + locked grade + edge.
function Rung({ line, grade, edge, base }: { line: string; grade: string; edge: string; base?: boolean }) {
  const gradeCol = grade.startsWith('A') ? 'var(--g-a)' : grade.startsWith('B') ? 'var(--text-0)' : 'var(--amber)';
  const edgeCol = edge.startsWith('+') ? 'var(--g-a)' : edge.startsWith('-') ? 'var(--miss)' : 'var(--text-2)';
  return (
    <div style={{ flex: '1 1 0', minWidth: 58, textAlign: 'center', padding: '9px 6px', background: 'var(--bg-2)', border: `1px solid ${base ? 'var(--border-hi)' : 'var(--border)'}`, borderRadius: 6 }}>
      <div className="mono" style={{ fontSize: 11, color: base ? 'var(--text-0)' : 'var(--text-1)', marginBottom: 5 }}>{line}{base ? ' •' : ''}</div>
      <div className="mono" style={{ fontSize: 17, fontWeight: 800, color: gradeCol }}>{grade}</div>
      <div className="mono" style={{ fontSize: 10, color: edgeCol, marginTop: 3 }}>{edge}</div>
    </div>
  );
}

export default function DeskShowcase() {
  return (
    <section style={{ padding: '72px 24px 8px', borderTop: '1px solid var(--border)' }}>
      <div className="desk-showcase" style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gap: 40, alignItems: 'center' }}>
        {/* LEFT — the pitch */}
        <div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--g-a)', marginBottom: 14 }}>
            THE DESK · FLAGSHIP
          </div>
          <h2 className="text-balance" style={{ fontSize: 'clamp(30px, 4.4vw, 50px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0 }}>
            A $1M terminal.{' '}
            <span className="mono" style={{ color: 'var(--g-a)' }}>$44.99</span>
            <span style={{ color: 'var(--text-tertiary)' }}>/mo.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--text-secondary)', margin: '18px 0 0', maxWidth: 460, lineHeight: 1.55 }}>
            Every alt line graded, quarter-Kelly sizing on your bankroll, parlay
            correlation, and the model&rsquo;s real-time feed. The desk a trading
            floor pays five figures for — priced for one bettor.
          </p>

          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 28, flexWrap: 'wrap' }}>
            <a href="#pricing" className="btn-primary" style={{ padding: '13px 24px', fontSize: 15, textDecoration: 'none' }}>
              Claim a Founder Desk →
            </a>
            <span className="mono" style={{ fontSize: 12.5, color: 'var(--text-tertiary)' }}>
              <span style={{ color: 'var(--g-a)', fontWeight: 700 }}>$34.99</span> locked for the first 100 · then $44.99
            </span>
          </div>
        </div>

        {/* RIGHT — real feature visuals (no dead half) */}
        <div style={{ display: 'grid', gap: 14 }}>
          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border-hi)', borderRadius: 12, padding: 18 }}>
            <SectionHead style={{ marginBottom: 12 }}>
              ALT LINE LADDER <span style={{ color: 'var(--amber)', fontSize: 9, border: '1px solid rgba(255,179,71,.4)', borderRadius: 3, padding: '1px 5px', marginLeft: 4 }}>DESK</span>
            </SectionHead>
            <div style={{ display: 'flex', gap: 7 }}>
              <Rung line="1.5" grade="A" edge="+7.1%" />
              <Rung line="2.5" grade="A+" edge="+11.4%" base />
              <Rung line="3.5" grade="B" edge="+2.0%" />
              <Rung line="4.5" grade="C" edge="-3.8%" />
            </div>
          </div>

          <div style={{ display: 'grid', gap: 14, gridTemplateColumns: '1fr 1fr' }}>
            <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 12, padding: 16 }}>
              <SectionHead style={{ marginBottom: 10 }}>QUARTER-KELLY</SectionHead>
              <div className="mono" style={{ fontSize: 26, fontWeight: 800, color: 'var(--g-a)', fontVariantNumeric: 'tabular-nums' }}>2.4%</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>of bankroll · at -110</div>
            </div>
            <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 12, padding: 16 }}>
              <SectionHead style={{ marginBottom: 10 }}>PARLAY φ</SectionHead>
              <div className="mono" style={{ fontSize: 26, fontWeight: 800, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>0.34</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>correlation · same-team legs</div>
            </div>
          </div>

          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 12, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="live-dot" style={{ background: 'var(--g-a)' }} aria-hidden />
            <span className="mono" style={{ fontSize: 11.5, color: 'var(--text-1)', letterSpacing: '0.04em' }}>
              REAL-TIME FEED · <span style={{ color: 'var(--g-a)', fontWeight: 700 }}>consensus vs model</span>, live line moves
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}