export default function Formula1FanHub() {
  const drivers = [
    {
      name: 'Max Verstappen',
      team: 'Red Bull Racing',
      country: 'Netherlands',
      number: 1,
    },
    {
      name: 'Lewis Hamilton',
      team: 'Ferrari',
      country: 'United Kingdom',
      number: 44,
    },
    {
      name: 'Charles Leclerc',
      team: 'Ferrari',
      country: 'Monaco',
      number: 16,
    },
    {
      name: 'Lando Norris',
      team: 'McLaren',
      country: 'United Kingdom',
      number: 4,
    },
    {
      name: 'George Russell',
      team: 'Mercedes',
      country: 'United Kingdom',
      number: 63,
    },
    {
      name: 'Fernando Alonso',
      team: 'Aston Martin',
      country: 'Spain',
      number: 14,
    },
  ];

  const teams = [
    'Red Bull Racing',
    'Ferrari',
    'Mercedes',
    'McLaren',
    'Aston Martin',
    'Alpine',
    'Williams',
    'Kick Sauber',
    'Haas',
    'Racing Bulls',
  ];

  const races = [
    {
      grandPrix: 'Bahrain Grand Prix',
      location: 'Sakhir',
      date: 'March 2',
    },
    {
      grandPrix: 'Saudi Arabian Grand Prix',
      location: 'Jeddah',
      date: 'March 9',
    },
    {
      grandPrix: 'Australian Grand Prix',
      location: 'Melbourne',
      date: 'March 24',
    },
    {
      grandPrix: 'Monaco Grand Prix',
      location: 'Monte Carlo',
      date: 'May 25',
    },
    {
      grandPrix: 'British Grand Prix',
      location: 'Silverstone',
      date: 'July 6',
    },
    {
      grandPrix: 'Las Vegas Grand Prix',
      location: 'Las Vegas',
      date: 'November 22',
    },
  ];

  return (
    <div className="min-h-screen bg-black text-white font-sans">
      {/* HERO */}
      <section className="relative overflow-hidden border-b border-red-500/30 bg-gradient-to-br from-red-600 via-black to-zinc-900 px-6 py-20 text-center">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute -left-20 top-10 h-72 w-72 rounded-full bg-red-500 blur-3xl"></div>
          <div className="absolute bottom-0 right-0 h-72 w-72 rounded-full bg-yellow-500 blur-3xl"></div>
        </div>

        <div className="relative z-10 mx-auto max-w-5xl">
          <h1 className="mb-4 text-6xl font-black tracking-tight md:text-7xl">
            FORMULA 1
          </h1>
          <p className="mx-auto max-w-2xl text-lg text-zinc-200 md:text-xl">
            Todo sobre la máxima categoría del automovilismo: pilotos,
            escuderías, calendario y mucho más.
          </p>

          <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
            <button className="rounded-2xl bg-red-600 px-6 py-3 text-lg font-semibold shadow-lg transition hover:scale-105 hover:bg-red-500">
              Ver Pilotos
            </button>
            <button className="rounded-2xl border border-white/30 bg-white/10 px-6 py-3 text-lg font-semibold backdrop-blur transition hover:scale-105 hover:bg-white/20">
              Calendario 2026
            </button>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="grid gap-6 px-6 py-10 md:grid-cols-3">
        <div className="rounded-3xl border border-white/10 bg-zinc-900 p-6 shadow-2xl">
          <h2 className="text-4xl font-black text-red-500">20</h2>
          <p className="mt-2 text-zinc-300">Pilotos en la parrilla</p>
        </div>

        <div className="rounded-3xl border border-white/10 bg-zinc-900 p-6 shadow-2xl">
          <h2 className="text-4xl font-black text-yellow-400">10</h2>
          <p className="mt-2 text-zinc-300">Escuderías oficiales</p>
        </div>

        <div className="rounded-3xl border border-white/10 bg-zinc-900 p-6 shadow-2xl">
          <h2 className="text-4xl font-black text-blue-400">24</h2>
          <p className="mt-2 text-zinc-300">Carreras en la temporada</p>
        </div>
      </section>

      {/* DRIVERS */}
      <section className="px-6 py-14">
        <div className="mb-10 flex items-center justify-between">
          <div>
            <h2 className="text-4xl font-black">Pilotos</h2>
            <p className="mt-2 text-zinc-400">
              Los protagonistas de la temporada.
            </p>
          </div>
        </div>

        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
          {drivers.map((driver, index) => (
            <div
              key={index}
              className="group rounded-3xl border border-white/10 bg-zinc-900 p-6 transition hover:-translate-y-2 hover:border-red-500/40"
            >
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-2xl font-bold">{driver.name}</h3>
                  <p className="text-zinc-400">{driver.team}</p>
                </div>

                <div className="rounded-2xl bg-red-600 px-4 py-2 text-2xl font-black">
                  {driver.number}
                </div>
              </div>

              <div className="mt-6 space-y-2 text-zinc-300">
                <p>
                  <span className="font-semibold text-white">País:</span>{' '}
                  {driver.country}
                </p>
                <p>
                  <span className="font-semibold text-white">Equipo:</span>{' '}
                  {driver.team}
                </p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* TEAMS */}
      <section className="bg-zinc-950 px-6 py-14">
        <div className="mb-10">
          <h2 className="text-4xl font-black">Escuderías</h2>
          <p className="mt-2 text-zinc-400">
            Equipos que compiten en el campeonato.
          </p>
        </div>

        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
          {teams.map((team, index) => (
            <div
              key={index}
              className="rounded-3xl border border-white/10 bg-black p-6 text-center transition hover:scale-105 hover:border-red-500/40"
            >
              <div className="mb-4 text-5xl">🏎️</div>
              <h3 className="text-lg font-bold">{team}</h3>
            </div>
          ))}
        </div>
      </section>

      {/* CALENDAR */}
      <section className="px-6 py-14">
        <div className="mb-10">
          <h2 className="text-4xl font-black">Calendario</h2>
          <p className="mt-2 text-zinc-400">
            Algunas de las carreras más importantes del año.
          </p>
        </div>

        <div className="space-y-5">
          {races.map((race, index) => (
            <div
              key={index}
              className="flex flex-col items-start justify-between gap-4 rounded-3xl border border-white/10 bg-zinc-900 p-6 md:flex-row md:items-center"
            >
              <div>
                <h3 className="text-2xl font-bold">{race.grandPrix}</h3>
                <p className="text-zinc-400">{race.location}</p>
              </div>

              <div className="rounded-2xl bg-red-600 px-5 py-3 font-semibold">
                {race.date}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-white/10 bg-black px-6 py-10 text-center text-zinc-500">
        <p className="text-lg font-semibold text-white">
          Formula 1 Fan Hub
        </p>
        <p className="mt-2">
          Página creada para fans de la Fórmula 1.
        </p>
      </footer>
    </div>
  );
}