import SectionHead from '@/components/vyndr/SectionHead';
import { Wordmark } from '@/components/vyndr';

export const metadata = {
  title: 'About',
  description:
    'VYNDR is a sports data intelligence platform built in Detroit. The Ledger is the public record — misses included.',
};

// Brand page in system voice (§3). Server component.
// Session 2 (A1 board) — audited against NORTH STAR v1.1: data intelligence
// platform, the Ledger as public proof, built in Detroit. VOICE v1.1 —
// deadpan, numbers first, no exclamation points.
export default function AboutPage() {
  return (
    <section style={{ maxWidth: 680, margin: '0 auto', padding: '40px 16px 96px' }}>
      <div style={{ marginBottom: 28 }}>
        <Wordmark size="lg" cursor beta />
      </div>

      <h1 style={{ fontSize: 'clamp(28px, 6vw, 40px)', fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.1, marginBottom: 20, color: 'var(--text-0)' }}>
        The books have every advantage. We built this to give it back.
      </h1>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <p className="mono" style={{ fontSize: 14.5, color: 'var(--text-1)', lineHeight: 1.7 }}>
          VYNDR is a sports data intelligence platform. The free layer is the complete picture —
          schedule, stats, game logs, streaks with the context they were built against, line
          comparison across books — always populated, always interpreted. The paid layer is the
          read: a letter grade earned across the model&apos;s full feature pipeline, archetypes,
          correlation-aware parlays, and closing-line intelligence.
        </p>
        <p className="mono" style={{ fontSize: 14.5, color: 'var(--text-1)', lineHeight: 1.7 }}>
          We are an analytics tool, not a sportsbook. We take no wagers and hold no funds. We hand
          you the read and let you decide.
        </p>

        <div>
          <SectionHead style={{ marginBottom: 12 }}>THE PROOF</SectionHead>
          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, padding: 18 }}>
            <p className="mono" style={{ fontSize: 13.5, color: 'var(--text-1)', lineHeight: 1.65, margin: 0 }}>
              Every grade the model produces is locked at grade time — line, odds, timestamp — and
              settled against the real box score on{' '}
              <a href="/ledger" style={{ color: 'var(--text-0)' }}>the Ledger</a>, misses included,
              in the same format as the wins. No percentage renders until at least 20 grades have
              settled. When the model has no projection, it refuses to grade rather than guess.
              How all of it works is written down, in plain language, on{' '}
              <a href="/methodology" style={{ color: 'var(--text-0)' }}>the methodology page</a>.
            </p>
          </div>
        </div>

        <div>
          <SectionHead style={{ marginBottom: 12 }}>BUILT BY</SectionHead>
          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 10, padding: 18 }}>
            <div style={{ fontSize: 17, fontWeight: 800 }}>Kevon Butler</div>
            <div className="mono" style={{ fontSize: 12.5, color: 'var(--text-1)', marginTop: 4 }}>Founder · Detroit</div>
            <p className="mono" style={{ fontSize: 13.5, color: 'var(--text-1)', lineHeight: 1.65, marginTop: 12 }}>
              The books employ floors full of quants. This is one terminal, built in Detroit, for
              everyone the books count on staying in the dark. Seems fair.
            </p>
          </div>
        </div>

        <div className="mono" style={{ fontSize: 11.5, color: 'var(--text-2)', letterSpacing: '0.08em' }}>
          BUILT BY KEVON BUTLER · DETROIT · © 2026 VYNDR
        </div>
      </div>
    </section>
  );
}
