import { createFileRoute } from "@tanstack/react-router";
import { Phone, Mail, MapPin, Clock, Send } from "lucide-react";
import { useState } from "react";
import { PHONE_DISPLAY, SITE_URL } from "@/lib/seo";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Devis gratuit & contact | Serrurier de Confiance" },
      {
        name: "description",
        content:
          "Obtenez votre devis serrurier en 2h. Formulaire de contact ou ligne directe au 09 70 51 92 53, 24h/24 et 7j/7 en Île-de-France.",
      },
      { property: "og:title", content: "Devis gratuit et contact — Serrurier de Confiance" },
      { property: "og:description", content: "Devis en 2h, contact 24h/24 partout en Île-de-France." },
      { property: "og:url", content: `${SITE_URL}/contact` },
    ],
    links: [{ rel: "canonical", href: `${SITE_URL}/contact` }],
  }),
  component: ContactPage,
});

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

  return (
    <section className="py-16 lg:py-20">
      <div className="container-page grid lg:grid-cols-5 gap-10">
        <div className="lg:col-span-2">
          <h1 className="text-4xl lg:text-5xl font-bold">Votre devis en 2 heures</h1>
          <p className="mt-4 text-muted-foreground">
            Besoin d'un devis ? Complétez le formulaire ou appelez-nous au {PHONE_DISPLAY}.
            Nous vous répondons dans les 30 minutes, 24h/24 et 7j/7.
          </p>

          <address className="not-italic mt-8 space-y-4 text-sm">
            <div className="flex items-start gap-3">
              <Phone className="h-5 w-5 text-primary mt-0.5" aria-hidden="true" />
              <div>
                <p className="font-semibold">Téléphone</p>
                <a href="tel:+33970519253" className="text-primary hover:underline">{PHONE_DISPLAY}</a>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Mail className="h-5 w-5 text-primary mt-0.5" aria-hidden="true" />
              <div>
                <p className="font-semibold">E-mail</p>
                <a href="mailto:cezame.artisan.produbat@gmail.com" className="text-primary hover:underline break-all">
                cezame.artisan.produbat@gmail.com
                </a>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <MapPin className="h-5 w-5 text-primary mt-0.5" aria-hidden="true" />
              <div>
                <p className="font-semibold">Adresse</p>
                <p>103 Allée de Rosny, 93190 Livry-Gargan</p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Clock className="h-5 w-5 text-primary mt-0.5" aria-hidden="true" />
              <div>
                <p className="font-semibold">Horaires</p>
                <p>24h/24 — 7j/7, toute l'année</p>
              </div>
            </div>
          </address>
        </div>

        <form
          onSubmit={(e) => { e.preventDefault(); setSent(true); }}
          className="lg:col-span-3 bg-card border border-border rounded-2xl p-6 lg:p-8 shadow-sm"
          aria-label="Formulaire de demande de devis"
        >
          {sent ? (
            <div className="text-center py-10">
              <h2 className="text-2xl font-bold text-success">Merci !</h2>
              <p className="mt-2 text-muted-foreground">
                Votre demande a bien été envoyée. Nous vous répondons sous 2 heures.
              </p>
            </div>
          ) : (
            <div className="grid sm:grid-cols-2 gap-4">
              <Field id="lastname" label="Nom" required />
              <Field id="firstname" label="Prénom" required />
              <Field id="email" type="email" label="Adresse e-mail" required className="sm:col-span-2" />
              <Field id="phone" type="tel" label="Numéro de téléphone" required className="sm:col-span-2" />
              <div className="sm:col-span-2">
                <label htmlFor="message" className="block text-sm font-medium mb-1.5">Message</label>
                <textarea
                  id="message"
                  name="message"
                  rows={5}
                  required
                  className="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                />
              </div>
              <button
                type="submit"
                className="sm:col-span-2 inline-flex items-center justify-center gap-2 rounded-full bg-primary px-6 py-3 font-semibold text-primary-foreground hover:opacity-95"
              >
                <Send className="h-4 w-4" aria-hidden="true" />
                Envoyer ma demande
              </button>
            </div>
          )}
        </form>
      </div>
    </section>
  );
}

function Field({
  id, label, type = "text", required, className = "",
}: { id: string; label: string; type?: string; required?: boolean; className?: string }) {
  return (
    <div className={className}>
      <label htmlFor={id} className="block text-sm font-medium mb-1.5">
        {label}{required && <span className="text-urgent ml-0.5">*</span>}
      </label>
      <input
        id={id}
        name={id}
        type={type}
        required={required}
        autoComplete={
          id === "email" ? "email" :
          id === "phone" ? "tel" :
          id === "lastname" ? "family-name" :
          id === "firstname" ? "given-name" : undefined
        }
        className="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
      />
    </div>
  );
}