import { useState, FormEvent } from "react";
import { motion } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { Phone, Mail, MapPin, Send, CheckCircle, AlertCircle } from "lucide-react";

const ContactSection = () => {
  const { t } = useLanguage();
  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);

    const form = e.currentTarget;
    const data = new FormData(form);

    try {
      const res = await fetch("https://formsubmit.co/ajax/iloveprintingny@gmail.com", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: data.get("name"),
          email: data.get("email"),
          phone: data.get("phone"),
          message: data.get("message"),
          _subject: "New Lead from I Love Printing Website",
        }),
      });

      if (res.ok) {
        setStatus("success");
        form.reset();
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    } finally {
      setLoading(false);
      setTimeout(() => setStatus("idle"), 5000);
    }
  };

  return (
    <section id="contact" className="relative py-28 md:py-36 section-elevated">
      {/* Ambient glow */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[300px] pointer-events-none" style={{
        background: "radial-gradient(ellipse, hsl(0 100% 50% / 0.02) 0%, transparent 70%)",
      }} />

      <div className="container mx-auto px-6 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8 }}
          className="text-center mb-20"
        >
          <span className="eyebrow-label mb-4 block">Contact</span>
          <h2 className="section-heading">
            {t("contact.title")}
          </h2>
          <p className="section-subheading">
            {t("contact.subtitle")}
          </p>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl mx-auto">
          {/* Form */}
          <motion.form
            onSubmit={handleSubmit}
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="glass-panel-elevated rounded-xl p-8 space-y-5"
          >
            <input type="text" name="_honey" className="hidden" />
            <input type="hidden" name="_captcha" value="false" />

            <div>
              <label className="block font-body text-xs text-muted-foreground mb-2 tracking-wider uppercase">{t("contact.name")}</label>
              <input
                required
                name="name"
                maxLength={100}
                className="premium-input"
                placeholder="John Doe"
              />
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label className="block font-body text-xs text-muted-foreground mb-2 tracking-wider uppercase">{t("contact.email")}</label>
                <input
                  required
                  type="email"
                  name="email"
                  maxLength={255}
                  className="premium-input"
                  placeholder="email@example.com"
                />
              </div>
              <div>
                <label className="block font-body text-xs text-muted-foreground mb-2 tracking-wider uppercase">{t("contact.phone")}</label>
                <input
                  required
                  type="tel"
                  name="phone"
                  maxLength={20}
                  className="premium-input"
                  placeholder="+1 (555) 000-0000"
                />
              </div>
            </div>
            <div>
              <label className="block font-body text-xs text-muted-foreground mb-2 tracking-wider uppercase">{t("contact.message")}</label>
              <textarea
                name="message"
                maxLength={1000}
                rows={3}
                className="premium-input resize-none"
              />
            </div>

            <button
              type="submit"
              disabled={loading}
              className="cta-button-primary w-full flex items-center justify-center gap-2 disabled:opacity-50"
            >
              <Send className="w-4 h-4" />
              {loading ? "..." : t("contact.submit")}
            </button>

            {status === "success" && (
              <motion.div
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                className="flex items-center gap-2 text-foreground font-body text-sm"
              >
                <CheckCircle className="w-4 h-4 text-green-400" />
                {t("contact.success")}
              </motion.div>
            )}
            {status === "error" && (
              <motion.div
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                className="flex items-center gap-2 text-primary font-body text-sm"
              >
                <AlertCircle className="w-4 h-4" />
                {t("contact.error")}
              </motion.div>
            )}
          </motion.form>

          {/* Contact Info */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="flex flex-col justify-center gap-8"
          >
            <h3 className="font-display text-2xl text-foreground tracking-wide">{t("contact.callUs")}</h3>

            {[
              { href: "tel:+15162721560", icon: Phone, label: "Phone", value: "+1 (516) 272-1560" },
              { href: "mailto:iloveprintingny@gmail.com", icon: Mail, label: "Email", value: "iloveprintingny@gmail.com" },
            ].map((c) => (
              <a key={c.label} href={c.href} className="flex items-center gap-5 group">
                <div className="icon-container w-14 h-14 rounded-xl group-hover:animate-pulse-glow transition-all duration-500">
                  <c.icon className="w-5 h-5 text-primary-foreground relative z-10" strokeWidth={1.8} />
                </div>
                <div>
                  <p className="font-body text-xs text-muted-foreground uppercase tracking-wider mb-1">{c.label}</p>
                  <p className="font-body text-foreground text-base group-hover:text-primary transition-colors">{c.value}</p>
                </div>
              </a>
            ))}

            <div className="flex items-center gap-5">
              <div className="icon-container w-14 h-14 rounded-xl">
                <MapPin className="w-5 h-5 text-primary-foreground relative z-10" strokeWidth={1.8} />
              </div>
              <div>
                <p className="font-body text-xs text-muted-foreground uppercase tracking-wider mb-1">Location</p>
                <p className="font-body text-foreground text-base">New York, NY</p>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;
