"use client";

import { useState } from "react";
import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Mail, MapPin, Clock, Send, CheckCircle } from "lucide-react";

export function Contact() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    message: "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    // Simular envío
    await new Promise((resolve) => setTimeout(resolve, 1500));

    setIsSubmitting(false);
    setIsSubmitted(true);

    // Reset form after 3 seconds
    setTimeout(() => {
      setIsSubmitted(false);
      setFormData({ name: "", phone: "", message: "" });
    }, 3000);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    <section id="contacto" className="bg-white py-20 sm:py-32" ref={ref}>
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Title */}
        <motion.div
          className="mb-12 text-center sm:mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
        >
          <h2 className="mb-4 font-serif text-3xl font-bold text-primary sm:text-4xl lg:text-5xl">
            Contáctame
          </h2>
          <p className="mb-6 text-lg text-secondary">
            ¿Tienes alguna duda? Escríbeme y te responderé lo antes posible
          </p>
          <motion.div
            className="mx-auto h-1 w-24 bg-accent"
            initial={{ width: 0 }}
            animate={isInView ? { width: 96 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
          />
        </motion.div>

        <div className="grid gap-12 lg:grid-cols-2 lg:gap-20">
          {/* Contact Form */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <Card className="shadow-xl">
              <CardContent className="p-8">
                {isSubmitted ? (
                  <motion.div
                    className="py-12 text-center"
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.4 }}
                  >
                    <motion.div
                      className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100"
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
                    >
                      <CheckCircle className="h-10 w-10 text-green-600" />
                    </motion.div>
                    <h3 className="mb-2 font-serif text-2xl font-semibold text-primary">
                      ¡Mensaje Enviado!
                    </h3>
                    <p className="text-secondary">Te responderé lo antes posible</p>
                  </motion.div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="space-y-2">
                      <label htmlFor="name" className="text-sm font-medium text-primary">
                        Nombre
                      </label>
                      <Input
                        id="name"
                        name="name"
                        type="text"
                        placeholder="Tu nombre"
                        value={formData.name}
                        onChange={handleChange}
                        required
                        className="border-secondary/30 focus:border-accent"
                      />
                    </div>

                    <div className="space-y-2">
                      <label htmlFor="phone" className="text-sm font-medium text-primary">
                        Teléfono / WhatsApp
                      </label>
                      <Input
                        id="phone"
                        name="phone"
                        type="tel"
                        placeholder="Tu número de contacto"
                        value={formData.phone}
                        onChange={handleChange}
                        required
                        className="border-secondary/30 focus:border-accent"
                      />
                    </div>

                    <div className="space-y-2">
                      <label htmlFor="message" className="text-sm font-medium text-primary">
                        Mensaje
                      </label>
                      <textarea
                        id="message"
                        name="message"
                        rows={4}
                        placeholder="¿En qué puedo ayudarte?"
                        value={formData.message}
                        onChange={handleChange}
                        required
                        className="flex min-h-[80px] w-full resize-none rounded-md border border-secondary/30 bg-transparent px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
                      />
                    </div>

                    <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                      <Button
                        type="submit"
                        disabled={isSubmitting}
                        className="w-full bg-accent py-6 text-base text-primary hover:bg-accent/90"
                      >
                        {isSubmitting ? (
                          <span className="flex items-center">
                            <motion.div
                              className="mr-2 h-5 w-5 rounded-full border-2 border-white border-t-transparent"
                              animate={{ rotate: 360 }}
                              transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                            />
                            Enviando...
                          </span>
                        ) : (
                          <span className="flex items-center">
                            <Send className="mr-2 h-5 w-5" />
                            Enviar Mensaje
                          </span>
                        )}
                      </Button>
                    </motion.div>
                  </form>
                )}
              </CardContent>
            </Card>
          </motion.div>

          {/* Contact Info */}
          <div className="space-y-6">
            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={isInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              <Card className="border-l-4 border-l-accent shadow-lg">
                <CardContent className="p-8">
                  <div className="flex items-start space-x-4">
                    <motion.div
                      className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-accent/20"
                      whileHover={{ scale: 1.1, rotate: 5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 17 }}
                    >
                      <MapPin className="h-6 w-6 text-accent" />
                    </motion.div>
                    <div>
                      <h3 className="mb-2 font-serif text-xl font-semibold text-primary">
                        Ubicación
                      </h3>
                      <p className="leading-relaxed text-secondary">
                        Consultorio Virtual & Presencial
                        <br />
                        Ciudad de México
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={isInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.5 }}
            >
              <Card className="border-l-4 border-l-accent shadow-lg">
                <CardContent className="p-8">
                  <div className="flex items-start space-x-4">
                    <motion.div
                      className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-accent/20"
                      whileHover={{ scale: 1.1, rotate: 5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 17 }}
                    >
                      <Clock className="h-6 w-6 text-accent" />
                    </motion.div>
                    <div>
                      <h3 className="mb-2 font-serif text-xl font-semibold text-primary">
                        Horarios
                      </h3>
                      <p className="leading-relaxed text-secondary">
                        Lunes a Viernes
                        <br />
                        9:00 AM - 7:00 PM
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={isInView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              <Card className="border-l-4 border-l-accent shadow-lg">
                <CardContent className="p-8">
                  <div className="flex items-start space-x-4">
                    <motion.div
                      className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-accent/20"
                      whileHover={{ scale: 1.1, rotate: 5 }}
                      transition={{ type: "spring", stiffness: 400, damping: 17 }}
                    >
                      <Mail className="h-6 w-6 text-accent" />
                    </motion.div>
                    <div>
                      <h3 className="mb-2 font-serif text-xl font-semibold text-primary">Email</h3>
                      <p className="leading-relaxed text-secondary">contacto@glorianino.com</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            {/* WhatsApp CTA */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.8, delay: 0.7 }}
            >
              <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                <a
                  href="https://wa.me/525512345678"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="block rounded-lg bg-green-500 py-4 text-center font-semibold text-white transition-colors hover:bg-green-600"
                >
                  Contactar por WhatsApp
                </a>
              </motion.div>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
}
