import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { SubPageLayout } from "@/components/sub-page-layout";
import { Phone, Mail, MapPin, Printer, Smartphone, Send } from "lucide-react";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Promist — Dubai, UAE" },
      { name: "description", content: "Contact Promist for misting system enquiries, service and support in the UAE." },
      { property: "og:title", content: "Contact Promist" },
      { property: "og:description", content: "Reach the Promist team in Dubai, UAE." },
    ],
  }),
  component: Contact,
});

const CONTACTS = [
  { I: MapPin, t: "Address", l: ["P.O. Box 181926", "Dubai, United Arab Emirates"] },
  { I: Phone, t: "Phone", l: ["+971 4 251 5596", "+971 4 320 3552", "+971 55 209 8628"] },
  { I: Smartphone, t: "Mobile", l: ["+971 58 2055 252", "+971 50 9952 886"] },
  { I: Mail, t: "Email", l: ["info@promistcool.com", "sales@promistcool.com"] },
  { I: Printer, t: "Fax", l: ["+971 4 285 7894"] },
];

function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const subject = encodeURIComponent("Contact from " + name);
    const body = encodeURIComponent(message + "\n\nFrom: " + name + "\nEmail: " + email);
    window.location.href = "mailto:sales@promistcool.com?subject=" + subject + "&body=" + body;
    setName("");
    setEmail("");
    setMessage("");
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div>
        <label htmlFor="name" className="block text-sm font-medium text-foreground/80 mb-1.5">Name</label>
        <input id="name" type="text" placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} required className="border rounded-lg px-4 py-2.5 w-full" />
      </div>
      <div>
        <label htmlFor="email" className="block text-sm font-medium text-foreground/80 mb-1.5">Email</label>
        <input id="email" type="email" placeholder="Your email" value={email} onChange={(e) => setEmail(e.target.value)} required className="border rounded-lg px-4 py-2.5 w-full" />
      </div>
      <div>
        <label htmlFor="message" className="block text-sm font-medium text-foreground/80 mb-1.5">Message</label>
        <textarea id="message" placeholder="How can we help?" value={message} onChange={(e) => setMessage(e.target.value)} required rows={5} className="border rounded-lg px-4 py-2.5 w-full resize-none" />
      </div>
      <button type="submit" className="bg-brand-red text-white px-6 py-2.5 rounded-lg font-medium hover:opacity-90 inline-flex items-center gap-2">
        <Send className="h-4 w-4" />
        Send Message
      </button>
    </form>
  );
}

function Contact() {
  return (
    <SubPageLayout eyebrow="Contact" title="Get in touch." lede="Our team is available across office hours to answer questions and provide quotes.">
      <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
        {CONTACTS.map((c) => (
          <div key={c.t} className="border-t pt-6">
            <c.I className="h-6 w-6 text-brand-red" />
            <h3 className="mt-4 font-display text-2xl font-black">{c.t}</h3>
            <div className="mt-3 space-y-1 text-muted-foreground">
              {c.l.map((line) => <p key={line}>{line}</p>)}
            </div>
          </div>
        ))}
      </div>

      <div className="mt-20 grid md:grid-cols-2 gap-10">
        <div>
          <h2 className="font-display text-2xl font-black mb-6">Send us a message</h2>
          <ContactForm />
        </div>
        <div>
          <h2 className="font-display text-2xl font-black mb-6">Find us</h2>
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3612.0!2d55.27!3d25.2!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjXCsDEyJzAwLjAiTiA1NcKwMTYnMTIuMCJF!5e0!3m2!1sen!2sae!4v1"
            width="100%"
            height="400"
            style={{ border: 0 }}
            allowFullScreen
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="Promist location in Dubai"
            className="rounded-lg"
          />
        </div>
      </div>
    </SubPageLayout>
  );
}
