import { motion } from "framer-motion";
import { MapPin, Mail, Phone, Send } from "lucide-react";
import { useState, type FormEvent } from "react";
import { useI18n } from "@/i18n/I18nContext";

export function Contact() {
  const { t } = useI18n();
  const [sent, setSent] = useState(false);

  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    (e.currentTarget as HTMLFormElement).reset();
  };

  const infos = [
    { icon: MapPin, label: t.contact.addressLabel, value: t.contact.addressValue },
    { icon: Mail, label: t.contact.emailLabel, value: "servicioalcliente@mc-eventos.es" },
    { icon: Phone, label: t.contact.phoneLabel, value: "+34 612 345 678" },
  ];

  return (
    <section id="contact" className="relative overflow-hidden bg-ink py-28 lg:py-40">
      <div className="absolute inset-0 grid-pattern" aria-hidden />
      <div
        className="absolute inset-0 bg-gradient-to-b from-ink via-transparent to-ink"
        aria-hidden
      />

      <div className="relative mx-auto max-w-7xl px-6 lg:px-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7 }}
          className="mx-auto max-w-3xl text-center"
        >
          <p className="mb-5 text-xs font-semibold uppercase tracking-[0.35em] text-gold">
            {t.contact.eyebrow}
          </p>
          <h2 className="font-serif text-4xl leading-tight text-cream md:text-5xl lg:text-6xl text-balance">
            {t.contact.titleStart}{" "}
            <span className="italic text-gradient-gold">{t.contact.titleHighlight}</span>
          </h2>
          <p className="mt-5 text-base text-cream/60">{t.contact.subtitle}</p>
        </motion.div>

        <div className="mt-20 grid grid-cols-1 gap-12 lg:grid-cols-5">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
            className="lg:col-span-2"
          >
            <ul className="space-y-8">
              {infos.map((info) => {
                const Icon = info.icon;
                return (
                  <li key={info.label} className="group flex items-start gap-5">
                    <div className="flex h-12 w-12 flex-none items-center justify-center rounded-full border border-gold/40 text-gold transition-all duration-300 group-hover:scale-110 group-hover:border-gold group-hover:bg-gold/10">
                      <Icon size={20} strokeWidth={1.5} />
                    </div>
                    <div>
                      <p className="text-[11px] uppercase tracking-[0.2em] text-cream/50">
                        {info.label}
                      </p>
                      <p className="mt-1 font-serif text-lg text-cream">{info.value}</p>
                    </div>
                  </li>
                );
              })}
            </ul>

            <div className="mt-10 overflow-hidden rounded-sm border border-gold/30">
              <iframe
                title={t.contact.mapTitle}
                src="https://www.openstreetmap.org/export/embed.html?bbox=2.820%2C41.980%2C2.850%2C41.995&layer=mapnik&marker=41.988%2C2.835"
                className="h-56 w-full grayscale"
                loading="lazy"
              />
            </div>
          </motion.div>

          <motion.form
            onSubmit={submit}
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
            className="rounded-sm border border-gold/30 bg-card/40 p-8 backdrop-blur lg:col-span-3 lg:p-12"
          >
            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
              <Field label={t.contact.formName} name="name" type="text" required />
              <Field label={t.contact.formEmail} name="email" type="email" required />
              <div className="md:col-span-2">
                <Field
                  label={t.contact.formType}
                  name="type"
                  type="text"
                  placeholder={t.contact.formTypePh}
                />
              </div>
              <div className="md:col-span-2">
                <label className="mb-2 block text-[11px] uppercase tracking-[0.2em] text-cream/60">
                  {t.contact.formMessage}
                </label>
                <textarea
                  name="message"
                  required
                  rows={5}
                  className="w-full resize-none rounded-sm border border-gold/20 bg-ink/60 px-4 py-3 text-cream placeholder:text-cream/30 transition-all duration-300 focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold/40"
                />
              </div>
            </div>

            <button
              type="submit"
              className="gradient-gold group mt-8 inline-flex items-center justify-center gap-3 rounded-sm px-8 py-4 text-sm font-semibold uppercase tracking-[0.2em] text-ink shadow-gold transition-all duration-300 hover:shadow-[0_0_40px_-5px_var(--gold)]"
            >
              {sent ? (
                t.contact.formSent
              ) : (
                <>
                  {t.contact.formSend}
                  <Send
                    size={16}
                    className="transition-transform duration-300 group-hover:translate-x-1"
                  />
                </>
              )}
            </button>
          </motion.form>
        </div>
      </div>
    </section>
  );
}

function Field({
  label,
  name,
  type,
  required,
  placeholder,
}: {
  label: string;
  name: string;
  type: string;
  required?: boolean;
  placeholder?: string;
}) {
  return (
    <div>
      <label
        htmlFor={name}
        className="mb-2 block text-[11px] uppercase tracking-[0.2em] text-cream/60"
      >
        {label}
      </label>
      <input
        id={name}
        name={name}
        type={type}
        required={required}
        placeholder={placeholder}
        className="w-full rounded-sm border border-gold/20 bg-ink/60 px-4 py-3 text-cream placeholder:text-cream/30 transition-all duration-300 focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold/40"
      />
    </div>
  );
}