import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { MapPin, Phone, Mail, Clock, Send, CheckCircle2 } from "lucide-react";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { KONTAK } from "@/lib/site-data";

export const Route = createFileRoute("/kontak")({
  head: () => ({
    meta: [
      { title: "Kontak — MTs Miftahul Ulum Anggana" },
      { name: "description", content: "Hubungi MTs Miftahul Ulum Anggana. Alamat, WhatsApp, email, jam operasional, dan lokasi peta." },
    ],
  }),
  component: Kontak,
});

const infoList = [
  { icon: MapPin, label: "Alamat", value: KONTAK.alamat },
  { icon: Phone, label: "WhatsApp", value: KONTAK.whatsapp },
  { icon: Mail, label: "Email", value: KONTAK.email },
  { icon: Clock, label: "Jam Operasional", value: KONTAK.jam },
];

function Kontak() {
  const [sent, setSent] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    (e.target as HTMLFormElement).reset();
  };

  return (
    <>
      <PageHero title="Kontak" subtitle="Kami siap membantu. Jangan ragu untuk menghubungi kami." />
      <section className="section-pad">
        <div className="container-x grid gap-8 lg:grid-cols-2">
          <Reveal>
            <div className="space-y-4">
              {infoList.map((item) => (
                <div key={item.label} className="neu neu-press flex items-start gap-4 p-6">
                  <span className="grid h-12 w-12 shrink-0 place-items-center rounded-xl text-primary-foreground" style={{ backgroundImage: "var(--gradient-primary)" }}>
                    <item.icon className="h-6 w-6" />
                  </span>
                  <div>
                    <p className="font-display font-semibold text-foreground">{item.label}</p>
                    <p className="text-sm text-muted-foreground">{item.value}</p>
                  </div>
                </div>
              ))}
              <div className="neu overflow-hidden p-2">
                <iframe
                  title="Lokasi Madrasah"
                  src={KONTAK.maps}
                  className="h-64 w-full rounded-[16px]"
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
            </div>
          </Reveal>

          <Reveal delay={0.15}>
            <div className="neu-lg p-8">
              <h2 className="text-2xl font-bold">Hubungi Kami</h2>
              <p className="mt-1 text-sm text-muted-foreground">Kirim pesan dan kami akan segera merespons.</p>
              <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
                <div>
                  <label className="mb-1.5 block text-sm font-medium">Nama</label>
                  <input required className="input-neu" placeholder="Nama lengkap" maxLength={100} />
                </div>
                <div>
                  <label className="mb-1.5 block text-sm font-medium">Email</label>
                  <input required type="email" className="input-neu" placeholder="email@contoh.com" maxLength={150} />
                </div>
                <div>
                  <label className="mb-1.5 block text-sm font-medium">Pesan</label>
                  <textarea required rows={5} className="input-neu resize-none" placeholder="Tulis pesan Anda..." maxLength={1000} />
                </div>
                <button type="submit" className="btn-neu btn-neu-primary w-full">
                  {sent ? <><CheckCircle2 className="h-5 w-5" /> Pesan Terkirim</> : <><Send className="h-5 w-5" /> Kirim Pesan</>}
                </button>
              </form>
            </div>
          </Reveal>
        </div>
      </section>
    </>
  );
}