import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Mail, Phone, MapPin, Send, Facebook, Instagram, Twitter, Youtube } from "lucide-react";
import { PageHero } from "@/components/PageHero";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact CWF — Get In Touch" },
      { name: "description", content: "Contact Central Wrestling Federation. Booking inquiries, media requests, sponsorships, and fan mail." },
      { property: "og:title", content: "Contact CWF" },
      { property: "og:description", content: "Get in touch with Central Wrestling Federation." },
    ],
  }),
  component: ContactPage,
});

function ContactPage() {
  const [sent, setSent] = useState(false);
  return (
    <>
      <PageHero kicker="Get In Touch" title="CONTACT" subtitle="Booking, sponsorships, press, or fan mail — we want to hear from you." />

      <section className="py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 grid lg:grid-cols-[1fr_400px] gap-12">
          <div className="bg-card border border-border p-8 lg:p-10">
            <h2 className="font-display text-4xl mb-2">SEND A MESSAGE</h2>
            <p className="text-muted-foreground mb-8">We respond to every message within 48 hours.</p>
            <form
              className="space-y-5"
              onSubmit={(e) => {
                e.preventDefault();
                setSent(true);
              }}
            >
              <div className="grid sm:grid-cols-2 gap-5">
                <Field label="Name" name="name" required />
                <Field label="Email" name="email" type="email" required />
              </div>
              <Field label="Subject" name="subject" required />
              <div>
                <label className="block font-display tracking-widest text-xs text-primary mb-2">INQUIRY TYPE</label>
                <select className="w-full bg-background border border-border px-4 py-3 text-foreground focus:border-primary outline-none">
                  <option>General Question</option>
                  <option>Booking</option>
                  <option>Press / Media</option>
                  <option>Sponsorship</option>
                  <option>Wrestler Tryout</option>
                </select>
              </div>
              <div>
                <label className="block font-display tracking-widest text-xs text-primary mb-2">MESSAGE</label>
                <textarea rows={6} required className="w-full bg-background border border-border px-4 py-3 text-foreground focus:border-primary outline-none resize-none" />
              </div>
              <button type="submit" className="btn-hero w-full sm:w-auto">
                {sent ? "Message Sent" : <>Send Message <Send size={16} /></>}
              </button>
            </form>
          </div>

          <aside className="space-y-6">
            <InfoCard icon={Mail} title="Email" lines={["info@cwfwrestling.com", "bookings@cwfwrestling.com"]} />
            <InfoCard icon={Phone} title="Phone" lines={["(903) 555-0142"]} />
            <InfoCard icon={MapPin} title="Headquarters" lines={["1247 Pinewood Blvd", "Tyler, TX 75701"]} />
            <div className="bg-card border border-border p-6">
              <h3 className="font-display text-2xl mb-4">FOLLOW</h3>
              <div className="flex gap-3">
                {[Facebook, Instagram, Twitter, Youtube].map((Icon, i) => (
                  <a key={i} href="#" className="grid h-11 w-11 place-items-center bg-background border border-border hover:bg-primary hover:text-primary-foreground transition-colors" aria-label="social">
                    <Icon size={18} />
                  </a>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </section>

      <section className="py-20 bg-charcoal">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 className="font-display text-4xl mb-8">PRIMARY VENUES</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { name: "Maude Cobb Convention Center", city: "Longview, TX", cap: "2,400" },
              { name: "Oil Palace", city: "Tyler, TX", cap: "8,500" },
              { name: "Banita Creek Hall", city: "Nacogdoches, TX", cap: "1,800" },
            ].map((v) => (
              <div key={v.name} className="bg-background border border-border p-6">
                <p className="font-display text-primary text-xs tracking-widest">VENUE</p>
                <h3 className="font-display text-2xl mt-1">{v.name}</h3>
                <p className="text-sm text-muted-foreground mt-1">{v.city}</p>
                <p className="text-xs text-muted-foreground mt-3">Capacity: {v.cap}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function Field({ label, name, type = "text", required }: { label: string; name: string; type?: string; required?: boolean }) {
  return (
    <div>
      <label className="block font-display tracking-widest text-xs text-primary mb-2">{label.toUpperCase()}</label>
      <input name={name} type={type} required={required} className="w-full bg-background border border-border px-4 py-3 text-foreground focus:border-primary outline-none" />
    </div>
  );
}

function InfoCard({ icon: Icon, title, lines }: { icon: React.ComponentType<{ size?: number }>; title: string; lines: string[] }) {
  return (
    <div className="bg-card border border-border p-6 flex gap-4">
      <div className="grid h-12 w-12 place-items-center bg-primary text-primary-foreground shrink-0">
        <Icon size={20} />
      </div>
      <div className="min-w-0">
        <p className="font-display tracking-widest text-xs text-muted-foreground">{title.toUpperCase()}</p>
        {lines.map((l) => (
          <p key={l} className="font-display text-lg leading-snug">{l}</p>
        ))}
      </div>
    </div>
  );
}