Sessions 5-7a: 955 tests, deployment ready

web/src/components/Features.tsx

@@ -1,47 +1,119 @@
-const features = [
+const FEATURES = [
   {
-    title: 'Prop Analysis',
-    description: '6-step grading pipeline. Season average, recent form, situational splits, cross-book lines, kill conditions.',
+    icon: '◆',
+    title: 'Multi-dimensional player archetypes',
+    body: 'Players aren\'t one thing. Our model scores every dimension — pitcher discipline, batter approach, NBA usage shape — and blends them per matchup.',
   },
   {
-    title: 'Correlation Detection',
-    description: 'Flags conflicting legs in your parlay. Same-game overlap, opposing players, contradictory props.',
+    icon: '↻',
+    title: 'Auto-calibrating engine',
+    body: 'Every resolved grade trains the next one. Point-biserial weight tuning, per-stat calibration, blind-spot detection. The model improves itself.',
   },
   {
-    title: 'Line Movement',
-    description: 'Tracks lines throughout the day. Alerts when movement hits 0.5+ points. Sharp money indicators.',
+    icon: '⚡',
+    title: 'Beat reporter intelligence',
+    body: 'Lineup intel from the people closest to the team — 30 minutes before tip. Trust-tiered, redistribution-aware, line-correlated.',
   },
   {
-    title: 'Kill Conditions',
-    description: '6 hard checks before you bet. Low minutes, small sample, back-to-back, blowout risk, split conflicts.',
+    icon: '⊘',
+    title: 'Kill conditions',
+    body: 'We don\'t just grade the prop. We tell you what kills it. Six hard checks per read: minutes, sample, fatigue, blowout risk, splits, line conflict.',
   },
   {
-    title: 'Bet Tracking',
-    description: 'Log every bet. Screenshot upload, quick slip, or manual entry. Track ROI and win rate over time.',
+    icon: '∿',
+    title: 'Parlay correlation math',
+    body: 'Phi-coefficient analysis catches the legs that secretly fight each other. The books love correlated unders. We surface them.',
   },
   {
-    title: 'Cascade Alerts',
-    description: 'Star player scratched? BetonBLK re-grades your affected parlays and alerts you instantly.',
+    icon: '⌧',
+    title: 'ABS intelligence (MLB)',
+    body: 'The automated strike zone changes everything. Per-pitcher, per-batter discipline scoring. Zone 14 framing loss. Challenge math.',
+  },
+  {
+    icon: '◯',
+    title: 'Three sports, one engine',
+    body: 'NBA. MLB. WNBA. Unified intelligence layer with sport-specific calibration. NFL coming September 2026.',
+  },
+  {
+    icon: '⌦',
+    title: 'The honest ledger',
+    body: 'Every grade. Every result. No hiding. No deletion. Brier score and CLV from day one. Public accuracy by tier.',
   },
 ];
 
 export default function Features() {
   return (
-    <section className="py-24 px-4 bg-[var(--card)]">
-      <div className="max-w-5xl mx-auto">
-        <h2 className="text-3xl font-bold text-center mb-4">Built for Serious Bettors</h2>
-        <p className="text-[var(--text-muted)] text-center mb-16 max-w-lg mx-auto">
-          Every feature exists because we needed it ourselves. No fluff.
-        </p>
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {features.map((f) => (
-            <div key={f.title} className="p-5 rounded-xl border border-[var(--border)] bg-[var(--bg)]">
-              <h3 className="font-semibold mb-2">{f.title}</h3>
-              <p className="text-sm text-[var(--text-muted)] leading-relaxed">{f.description}</p>
+    <section
+      style={{
+        padding: '96px 24px',
+        borderTop: '1px solid var(--border)',
+      }}
+    >
+      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
+        <header style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
+          <h2
+            className="text-balance"
+            style={{
+              fontSize: 'clamp(28px, 4vw, 44px)',
+              fontWeight: 700,
+              letterSpacing: '-0.02em',
+              marginBottom: 16,
+            }}
+          >
+            One platform. Everything connected.
+          </h2>
+          <p style={{ fontSize: 17, color: 'var(--text-secondary)' }}>
+            Built by bettors who got tired of switching between five tabs to grade one prop.
+          </p>
+        </header>
+
+        <div
+          style={{
+            display: 'grid',
+            gap: 16,
+          }}
+          className="features-grid"
+        >
+          {FEATURES.map((f, i) => (
+            <div
+              key={f.title}
+              className={`surface surface-hover diagonal-cut animate-fade-up stagger-${(i % 6) + 1}`}
+              style={{ padding: 24 }}
+            >
+              <div
+                className="mono"
+                style={{
+                  fontSize: 28,
+                  color: 'var(--grade-a)',
+                  marginBottom: 16,
+                  lineHeight: 1,
+                }}
+                aria-hidden
+              >
+                {f.icon}
+              </div>
+              <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>{f.title}</h3>
+              <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{f.body}</p>
             </div>
           ))}
         </div>
       </div>
+
+      <style jsx>{`
+        :global(.features-grid) {
+          grid-template-columns: 1fr;
+        }
+        @media (min-width: 640px) {
+          :global(.features-grid) {
+            grid-template-columns: repeat(2, 1fr);
+          }
+        }
+        @media (min-width: 1024px) {
+          :global(.features-grid) {
+            grid-template-columns: repeat(4, 1fr);
+          }
+        }
+      `}</style>
     </section>
   );
 }