'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/contexts/AuthContext';
import Hero from '@/components/Hero';
// Session 17 — game-count strip mounted between the hero and the
// existing LivePropsStrip. Shows "X NBA · Y WNBA · Z MLB games
// being graded right now" with a signup CTA. Hides itself when
// every sport returns zero (off-hours / upstream outages).
import TonightsSlate from '@/components/TonightsSlate';
import LivePropsStrip from '@/components/LivePropsStrip';
// Session 23 — all-day intelligence teasers. Free/cheap content that
// keeps the landing page alive even when odds-api props are empty.
// Both self-hide when there's nothing to show.
import StreaksPanel from '@/components/StreaksPanel';
import HotListPanel from '@/components/HotListPanel';
import Features from '@/components/Features';
import HowItWorks from '@/components/HowItWorks';
import Pricing from '@/components/Pricing';
import FAQ from '@/components/FAQ';
// Footer is mounted globally in the root layout (Session 34) — no per-page import.

export default function Home() {
  const { user, loading } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!loading && user) router.replace('/dashboard');
  }, [user, loading, router]);

  // While we know the user is signed in we suppress the marketing
  // render to avoid a flicker before the redirect lands.
  if (loading || user) {
    return (
      <section style={{ minHeight: '80vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <p className="mono" style={{ color: 'var(--text-tertiary)', fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          Loading the slate
        </p>
      </section>
    );
  }

  return (
    <>
      <Hero />
      <TonightsSlate />
      <LivePropsStrip />
      <div style={{ maxWidth: 960, margin: '0 auto', padding: '0 16px' }}>
        <StreaksPanel sport="nba" tier="free" limit={3} />
        <HotListPanel sport="mlb" tier="free" limit={3} />
      </div>
      <Features />
      <HowItWorks />
      <Pricing />
      <FAQ />
    </>
  );
}