'use client';

// Session 16 — the floating card on the right side of the hero is driven by
// /api/hero-prop: the live daily hero prop (largest model-vs-market
// disagreement, A/B only). Truth-Everywhere Part 2 (item 5) removed the static
// Jokic fallback — the card renders a real graded read or hides.
import LiveHeroProp from './LiveHeroProp';

export default function Hero() {
  return (
    <section className="radial-glow diagonal-cut" style={{ position: 'relative', overflow: 'hidden' }}>
      <div
        style={{
          maxWidth: 1200,
          margin: '0 auto',
          padding: '96px 24px 64px',
          display: 'grid',
          gap: 48,
          alignItems: 'center',
        }}
        className="hero-grid"
      >
        <div className="animate-fade-up" style={{ maxWidth: 800 }}>
          {/* Bundle-migrated eyebrow. Mono, wide-tracked, signal green. */}
          <div
            className="mono"
            style={{
              fontSize: 10.5,
              fontWeight: 700,
              letterSpacing: '0.3em',
              color: 'var(--g-a, #00D4A0)',
              marginBottom: 20,
            }}
          >
            SPORTS INTELLIGENCE TERMINAL
          </div>
          <h1
            className="text-balance"
            style={{
              fontSize: 'clamp(36px, 6vw, 56px)',
              fontWeight: 800,
              letterSpacing: '-0.025em',
              lineHeight: 1.02,
              marginBottom: 18,
            }}
          >
            Every line, graded before you bet it.
          </h1>
          {/* CLAIMS-FILTERED subcopy: dropped the fabricated "312 props / 47
              games" count (absent, not faked) and "verified against closing
              lines" (CLV is held). What remains is earned: pre-graded, edge-
              ranked, settled in public, misses included. */}
          <p
            className="text-pretty"
            style={{
              fontSize: 16,
              color: 'var(--text-secondary)',
              lineHeight: 1.55,
              marginBottom: 30,
              maxWidth: 460,
            }}
          >
            Every prop graded and ranked by edge before the game starts — then settled in public.
            Misses included.
          </p>
          <SportBadgeStrip />

          {/* Bundle dual mono CTAs. */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginTop: 24 }}>
            <a
              href="/dashboard"
              className="mono"
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                height: 48,
                padding: '0 26px',
                borderRadius: 11,
                background: 'var(--g-a, #00D4A0)',
                color: 'var(--void, #06060B)',
                fontWeight: 800,
                fontSize: 12,
                letterSpacing: '0.1em',
                textDecoration: 'none',
              }}
            >
              OPEN THE TERMINAL
            </a>
            <a
              href="/ledger"
              className="mono"
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                height: 48,
                padding: '0 22px',
                borderRadius: 11,
                background: 'transparent',
                border: '1px solid var(--border)',
                color: 'var(--text-secondary)',
                fontWeight: 700,
                fontSize: 11,
                letterSpacing: '0.1em',
                textDecoration: 'none',
              }}
            >
              SEE THE PUBLIC RECORD
            </a>
          </div>

          {/* Proof chips — CLV-VERIFIED intentionally NOT migrated (held). Only
              earned trust signals: the ledger is public and shows misses. */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 26, flexWrap: 'wrap' }}>
            <span
              className="mono"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 9.5, letterSpacing: '0.12em', color: 'var(--g-a, #00D4A0)' }}
            >
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--g-a, #00D4A0)' }} />
              PUBLIC LEDGER
            </span>
            <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.12em', color: 'var(--text-tertiary)' }}>
              MISSES INCLUDED
            </span>
            <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.12em', color: 'var(--text-tertiary)' }}>
              5 FREE READS / MO
            </span>
          </div>
        </div>

        <LiveHeroProp />
      </div>
      <p
        style={{
          textAlign: 'center',
          fontSize: 12,
          color: 'var(--text-tertiary)',
          padding: '0 24px 32px',
          maxWidth: 600,
          margin: '0 auto',
        }}
      >
        VYNDR is an analytics tool, not a sportsbook. Gamble responsibly. 1-800-522-4700.
      </p>

      <style jsx>{`
        @media (min-width: 960px) {
          :global(.hero-grid) {
            grid-template-columns: 1.4fr 1fr;
          }
        }
      `}</style>
    </section>
  );
}

const SPORTS_DISPLAY = [
  { label: 'NBA',    active: true,  color: '#E94B3C' },
  { label: 'MLB',    active: true,  color: '#1E90FF' },
  { label: 'WNBA',   active: true,  color: '#F7944A' },
  { label: 'NFL',    active: false, color: '#013369' },
  { label: 'NHL',    active: false, color: '#A0A0B0' },
  { label: 'TENNIS', active: false, color: '#C5B358' },
  { label: 'MMA',    active: false, color: '#D4AF37' },
  { label: 'BOXING', active: false, color: '#8B0000' },
  { label: 'GOLF',   active: false, color: '#2E7D32' },
];

function SportBadgeStrip() {
  return (
    <div
      role="list"
      aria-label="Supported sports"
      style={{
        display: 'flex',
        gap: 8,
        flexWrap: 'wrap',
        marginTop: 16,
        marginBottom: 8,
        maxWidth: 640,
      }}
    >
      {SPORTS_DISPLAY.map((s) => {
        const base: React.CSSProperties = {
          fontFamily: 'var(--ibm-mono)',
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: '0.08em',
          padding: '5px 11px',
          borderRadius: 999,
          textTransform: 'uppercase',
          whiteSpace: 'nowrap',
        };
        return s.active ? (
          <span
            key={s.label}
            role="listitem"
            style={{
              ...base,
              color: s.color,
              background: `${s.color}1A`,
              border: `1px solid ${s.color}66`,
              boxShadow: `0 0 12px ${s.color}33`,
            }}
          >
            {s.label}
          </span>
        ) : (
          <span
            key={s.label}
            role="listitem"
            title="COMING THIS SUMMER"
            aria-label={`${s.label} — coming this summer`}
            style={{
              ...base,
              color: 'var(--text-2)',
              background: 'transparent',
              border: '1px solid var(--border)',
            }}
          >
            {s.label}
          </span>
        );
      })}
    </div>
  );
}

// Session 16 — FloatingDemoCard / Stat / row removed. The hero card
// is now a live, graded prop fetched on mount; see LiveHeroProp.tsx.
// It has NO static fallback (item 5) — a real read or nothing.
//
// GradePill (re-exported by GradeCard) is still imported at the top
// of this file because the section header uses it elsewhere; if a
// future cleanup confirms no other usage, that import can drop too.
