import { useState } from "react";
import { motion } from "framer-motion";
{
  /**modal de contacto */
}
const Contact = ({ onClose }) => {
  const [formData, setFormData] = useState({
    nombre: "",
    email: "",
    mensaje: "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [status, setStatus] = useState(""); // 'success' | 'error' | ''

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setStatus("");

    try {
      const response = await fetch("https://api.tesscorp.com.mx/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        setStatus("success");
        setFormData({ nombre: "", email: "", mensaje: "" });
      } else {
        setStatus("error");
      }
    } catch (error) {
      console.error("Error enviando el formulario:", error);
      setStatus("error");
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onClose}
        className="absolute inset-0 bg-black/10 backdrop-blur-sm"
      />

      {/*  El Contenedor del Formulario (Modal) */}
      <motion.div
        initial={{ opacity: 0, scale: 0.9, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.9, y: 20 }}
        className="relative w-full max-w-2xl bg-white/5 backdrop-blur-2xl p-8 md:p-12 rounded-[2rem] border border-white/20 shadow-2xl z-10 overflow-y-auto max-h-[90vh]"
      >
        {/* Botón para cerrar (X) */}
        <button
          onClick={onClose}
          className="absolute top-6 right-6 text-white/50 hover:text-[#0cc0df] transition-colors"
        >
          <span className="material-symbols-outlined text-3xl">close</span>
        </button>

        <div className="text-center mb-10">
          <h2 className="text-white text-2xl md:text-3xl font-bold mb-2">
            Ponte en contacto
          </h2>
          <p className="text-white/80 text-sm md:text-base font-light">
            ¿Tienes un proyecto en mente? Hagámoslo realidad juntos.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Campo Nombre */}
          <div>
            <label
              htmlFor="nombre"
              className="block text-sm font-medium text-white mb-2"
            >
              Nombre Completo
            </label>
            <input
              type="text"
              id="nombre"
              name="nombre"
              required
              value={formData.nombre}
              onChange={handleChange}
              className="w-full bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-emerald-400/50 focus:border-emerald-400 transition-all duration-300"
              placeholder="Tu nombre..."
            />
          </div>

          {/* Campo Email */}
          <div>
            <label
              htmlFor="email"
              className="flex items-center gap-2 text-sm font-medium text-white mb-2"
            >
              <span className="material-symbols-outlined text-base">mail</span>
              Correo Electrónico
            </label>
            <input
              type="email"
              id="email"
              name="email"
              required
              value={formData.email}
              onChange={handleChange}
              className="w-full bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-emerald-400/50 focus:border-emerald-400 transition-all duration-300"
              placeholder="tu@email.com"
            />
          </div>

          {/* Campo Mensaje */}
          <div>
            <label
              htmlFor="mensaje"
              className="flex items-center gap-2 text-sm font-medium text-white mb-2"
            >
              <span className="material-symbols-outlined text-base">chat</span>
              Mensaje
            </label>
            <textarea
              id="mensaje"
              name="mensaje"
              rows="4"
              required
              value={formData.mensaje}
              onChange={handleChange}
              className="w-full bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-3 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-emerald-400/50 focus:border-emerald-400 transition-all duration-300 resize-none"
              placeholder="¿En qué podemos ayudarte?"
            ></textarea>
          </div>
          {/* Mensajes de estado */}
          <div aria-live="polite" className="contents">
            {status === "success" && (
              <div className="p-4 bg-green-500/20 border border-green-500/50 rounded-xl text-green-200 text-center">
                ¡Mensaje enviado con éxito! Nos pondremos en contacto contigo
                pronto.
              </div>
            )}
            {status === "error" && (
              <div className="p-4 bg-red-500/20 border border-red-500/50 rounded-xl text-red-200 text-center">
                Hubo un error al enviar el mensaje. Por favor, inténtalo de
                nuevo más tarde o contáctanos por WhatsApp.
              </div>
            )}
          </div>

          <button
            type="submit"
            disabled={isSubmitting}
            className={`w-full text-white font-bold py-4 rounded-xl transition-all transform hover:scale-[1.01] active:scale-[0.98] shadow-lg shadow-cyan-500/25 ${
              isSubmitting
                ? "opacity-70 cursor-not-allowed bg-gradient-to-r from-emerald-400 to-cyan-500"
                : "bg-gradient-to-r from-emerald-400 to-cyan-500 hover:from-emerald-500 hover:to-cyan-600"
            }`}
          >
            {isSubmitting ? "Enviando..." : "Enviar Mensaje"}
          </button>

          {/* Opción de WhatsApp */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-6 border-t border-white/10">
            <span className="text-white/80 text-sm">O comunícate de forma directa vía</span>
            <a
              href="https://wa.me/522292565108"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 text-white bg-[#25D366] hover:bg-[#1da851] px-6 py-2.5 rounded-xl transition-all transform hover:scale-105 shadow-lg shadow-[#25D366]/30 font-bold text-sm"
            >
              <i className="fa-brands fa-whatsapp text-xl"></i>
              WhatsApp
            </a>
          </div>
        </form>
      </motion.div>
    </div>
  );
};

export default Contact;
