import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { useState } from "react";

export default function FreewheelLanding() {
  const [email, setEmail] = useState("");

  return (
    <div className="min-h-screen bg-black text-white px-6 py-12 font-sans">
      <header className="flex flex-col items-center text-center space-y-4">
        <h1 className="text-5xl font-bold tracking-tight text-blue-500">Freewheel</h1>
        <p className="text-xl max-w-2xl">
          Alquila tu libertad. Disfruta de motos potentes cuando quieras y donde quieras.
        </p>
        <Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full mt-4">
          Reserva ahora
        </Button>
      </header>

      <section className="mt-20 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
        <img
          src="/moto-gsx-s1000f.jpg"
          alt="Suzuki GSX-S1000F"
          className="rounded-2xl shadow-lg"
        />
        <div className="space-y-6">
          <h2 className="text-3xl font-semibold text-white">La máquina perfecta</h2>
          <p className="text-lg text-gray-300">
            Suzuki GSX-S1000F blanca, lista para rodar por Madrid o donde tú quieras. 150 CV,
            estilo deportivo, equipada con frenos Brembo. Desde solo 50 €/día.
          </p>
          <ul className="list-disc list-inside text-gray-300">
            <li>Seguro incluido</li>
            <li>Contrato digital rápido</li>
            <li>Idiomas: Español / Inglés</li>
            <li>Casco opcional</li>
          </ul>
        </div>
      </section>

      <section className="mt-24 bg-gray-900 p-10 rounded-2xl shadow-inner text-center">
        <h3 className="text-2xl font-semibold text-blue-400">¿Listo para la libertad?</h3>
        <p className="text-gray-300 mt-2">
          Deja tu correo y sé el primero en acceder a ofertas, rutas y nuevas motos.
        </p>
        <div className="mt-4 flex flex-col md:flex-row justify-center gap-4">
          <Input
            type="email"
            placeholder="Tu email..."
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full md:w-1/3 text-black"
          />
          <Button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full">
            Notificarme
          </Button>
        </div>
      </section>

      <footer className="mt-20 text-center text-gray-600 text-sm">
        &copy; 2025 Freewheel. Todos los derechos reservados.
      </footer>
    </div>
  );
}