import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { Clock, Mail, MapPin, Phone } from "lucide-react";
import { EMAIL, HOURS, LOCATION, PHONE, SITE_URL, services } from "@/lib/site";
import { btn, PageHero } from "@/components/ui-bits";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Us | Fantasol Engineering" },
      { name: "description", content: "Talk to Fantasol Engineering about your electrical, solar or ICT project in Kenya. Call, WhatsApp or send a message." },
      { property: "og:title", content: "Contact Us | Fantasol Engineering" },
      { property: "og:description", content: "Get practical guidance for electrical engineering, solar energy, ICT and ELV systems in Kenya." },
      { property: "og:url", content: `${SITE_URL}/contact` },
    ],
    links: [{ rel: "canonical", href: `${SITE_URL}/contact` }],
  }),
  component: Contact,
});

const input = "w-full rounded-md border border-input bg-background px-4 py-3 text-sm outline-none focus:border-primary";

function Contact() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", service: "", message: "" });

  const send = (e: React.FormEvent) => {
    e.preventDefault();
    const body = `Name: ${form.name}\nEmail: ${form.email}\nPhone: ${form.phone}\nService: ${form.service}\n\n${form.message}`;
    window.location.href = `mailto:${EMAIL}?subject=${encodeURIComponent("Project enquiry")}&body=${encodeURIComponent(body)}`;
  };

  return (
    <div>
      <PageHero eyebrow="Contact us" title="Tell Fantasol Engineering about your project" desc="Share a few details and the message will open through your email app, addressed to the Fantasol Engineering team." />

      <section className="mx-auto max-w-6xl px-4 py-24">
        <div className="grid gap-10 lg:grid-cols-5">
          <div className="space-y-4 lg:col-span-2">
            {[
              [Phone, "Call or WhatsApp", PHONE, `tel:${PHONE}`],
              [Mail, "Email", EMAIL, `mailto:${EMAIL}`],
              [MapPin, "Location", LOCATION, null],
              [Clock, "Working Hours", HOURS, null],
            ].map(([I, label, value, href]) => {
              const Icon = I as typeof Phone;
              return (
                <div key={label as string} className="flex items-center gap-4 rounded-xl border border-border bg-background p-5">
                  <span className="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-secondary">
                    <Icon className="h-5 w-5 text-accent" />
                  </span>
                  <div>
                    <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">{label as string}</p>
                    {href ? (
                      <a href={href as string} className="font-semibold text-primary transition hover:text-accent">
                        {value as string}
                      </a>
                    ) : (
                      <p className="font-semibold text-primary">{value as string}</p>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          <form onSubmit={send} className="shadow-soft grid gap-4 rounded-2xl border border-border bg-background p-8 md:grid-cols-2 lg:col-span-3">
            <input required placeholder="Name" className={input} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
            <input required type="email" placeholder="Email" className={input} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
            <input placeholder="Phone Number" className={input} value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
            <select className={input} value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })}>
              <option value="">Select a service</option>
              {services.map((s) => (
                <option key={s.slug}>{s.title}</option>
              ))}
            </select>
            <textarea required rows={6} placeholder="Message" className={`${input} md:col-span-2`} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} />
            <button className={`${btn} justify-center bg-primary text-primary-foreground hover:opacity-90 md:col-span-2`}>Send Message</button>
          </form>
        </div>
      </section>
    </div>
  );
}