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

export default function DentalClinicWebsite() {
  const [formData, setFormData] = useState({ name: "", email: "", message: "" });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Aquí iría el envío a backend o servicio de email
    alert("Formulario enviado");
  };

  return (
    <div className="min-h-screen bg-blue-50 p-6 font-sans">
      <header className="text-center py-10">
        <h1 className="text-4xl font-bold text-blue-800">Clínica Dental Sonrisa Perfecta</h1>
        <p className="text-lg text-blue-600 mt-2">Cuidamos tu sonrisa como si fuera nuestra</p>
      </header>

      <section className="grid md:grid-cols-3 gap-6 mb-12">
        <Card className="bg-white shadow-xl rounded-2xl p-6">
          <CardContent>
            <h2 className="text-xl font-semibold text-blue-700 mb-2">Odontología General</h2>
            <p>Servicios de limpieza, empastes, extracciones y más, con tecnología de punta.</p>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-xl rounded-2xl p-6">
          <CardContent>
            <h2 className="text-xl font-semibold text-blue-700 mb-2">Ortodoncia</h2>
            <p>Brackets tradicionales y alineadores invisibles para mejorar tu sonrisa.</p>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-xl rounded-2xl p-6">
          <CardContent>
            <h2 className="text-xl font-semibold text-blue-700 mb-2">Estética Dental</h2>
            <p>Blanqueamiento, carillas de porcelana y diseño de sonrisa personalizado.</p>
          </CardContent>
        </Card>
      </section>

      <motion.section 
        className="bg-white shadow-xl rounded-2xl p-8 max-w-2xl mx-auto mb-12"
        initial={{ opacity: 0, y: 50 }} 
        animate={{ opacity: 1, y: 0 }} 
        transition={{ duration: 0.8 }}
      >
        <h3 className="text-2xl font-bold text-blue-800 mb-4">Agenda tu cita</h3>
        <form onSubmit={handleSubmit} className="grid gap-4">
          <Input name="name" placeholder="Nombre completo" value={formData.name} onChange={handleChange} required />
          <Input name="email" type="email" placeholder="Correo electrónico" value={formData.email} onChange={handleChange} required />
          <Input name="message" placeholder="Mensaje o motivo de consulta" value={formData.message} onChange={handleChange} required />
          <Button type="submit" className="bg-blue-700 hover:bg-blue-800 text-white">Enviar</Button>
        </form>
      </motion.section>

      <footer className="text-center text-blue-600 mt-12">
        <p>&copy; 2025 Clínica Dental Sonrisa Perfecta. Todos los derechos reservados.</p>
      </footer>
    </div>
  );
}