import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Mail, Phone, MapPin, Send, CheckCircle2 } from "lucide-react";
import { SiteNav } from "@/components/site-nav";
import { SiteFooter } from "@/components/site-footer";
import { services } from "@/lib/services-data";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Hazem — Book a Free Site Survey" },
      {
        name: "description",
        content:
          "Tell us about your site and we'll come back within 48 hours with a free survey booking and initial design guidance.",
      },
      { property: "og:title", content: "Contact Hazem" },
      { property: "og:description", content: "Book a free site survey for CCTV, access control, fire alarm and more." },
      { property: "og:url", content: "/contact" },
    ],
    links: [{ rel: "canonical", href: "/contact" }],
  }),
  component: ContactPage,
});

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

  return (
    <div className="min-h-screen">
      <SiteNav />

      <section className="container-page pt-20 pb-20">
        <div className="grid gap-14 lg:grid-cols-[1fr_1.2fr]">
          <div>
            <span className="text-xs font-medium uppercase tracking-widest text-primary">Contact</span>
            <h1 className="mt-3 font-display text-5xl font-semibold sm:text-6xl">Let's plan your system.</h1>
            <p className="mt-5 max-w-md text-muted-foreground">
              Share a few details about the site and the systems you're considering. We'll reply within
              48 hours to schedule a free on-site survey.
            </p>

            <div className="mt-10 space-y-4">
              <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-[var(--surface)] p-4">
                <div className="grid h-10 w-10 place-items-center rounded-md bg-primary/10 text-primary">
                  <Phone className="h-5 w-5" />
                </div>
                <div>
                  <div className="text-xs uppercase tracking-widest text-muted-foreground">Call</div>
                  <div className="font-medium">+20 000 000 0000</div>
                </div>
              </div>
              <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-[var(--surface)] p-4">
                <div className="grid h-10 w-10 place-items-center rounded-md bg-primary/10 text-primary">
                  <Mail className="h-5 w-5" />
                </div>
                <div>
                  <div className="text-xs uppercase tracking-widest text-muted-foreground">Email</div>
                  <div className="font-medium">hello@hazem-systems.com</div>
                </div>
              </div>
              <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-[var(--surface)] p-4">
                <div className="grid h-10 w-10 place-items-center rounded-md bg-primary/10 text-primary">
                  <MapPin className="h-5 w-5" />
                </div>
                <div>
                  <div className="text-xs uppercase tracking-widest text-muted-foreground">Office</div>
                  <div className="font-medium">Cairo, Egypt</div>
                </div>
              </div>
            </div>
          </div>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              setSent(true);
            }}
            className="rounded-2xl border border-border/70 bg-[var(--surface)] p-6 sm:p-8"
          >
            {sent ? (
              <div className="flex flex-col items-center justify-center py-16 text-center">
                <div className="grid h-14 w-14 place-items-center rounded-full bg-primary/15 text-primary">
                  <CheckCircle2 className="h-7 w-7" />
                </div>
                <h2 className="mt-5 font-display text-2xl font-semibold">Request received</h2>
                <p className="mt-2 max-w-sm text-sm text-muted-foreground">
                  Thanks — a Hazem engineer will be in touch within 48 hours to schedule your site survey.
                </p>
              </div>
            ) : (
              <div className="grid gap-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <Field label="Full name" name="name" required />
                  <Field label="Company" name="company" />
                </div>
                <div className="grid gap-4 sm:grid-cols-2">
                  <Field label="Email" name="email" type="email" required />
                  <Field label="Phone" name="phone" type="tel" />
                </div>
                <Field label="Site address" name="site" />

                <div>
                  <label className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
                    Systems of interest
                  </label>
                  <div className="mt-2 flex flex-wrap gap-2">
                    {services.map((s) => (
                      <label
                        key={s.slug}
                        className="cursor-pointer rounded-full border border-border/70 bg-background px-3 py-1.5 text-sm text-muted-foreground transition-colors has-[input:checked]:border-primary has-[input:checked]:bg-primary has-[input:checked]:text-primary-foreground"
                      >
                        <input type="checkbox" name="systems" value={s.slug} className="sr-only" />
                        {s.name}
                      </label>
                    ))}
                  </div>
                </div>

                <div>
                  <label className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
                    Project details
                  </label>
                  <textarea
                    name="message"
                    rows={4}
                    placeholder="Tell us a bit about the site — size, use, timeline…"
                    className="mt-2 w-full rounded-lg border border-border/70 bg-background px-3 py-2 text-sm outline-none focus:border-primary"
                  />
                </div>

                <button
                  type="submit"
                  className="mt-2 inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-semibold text-primary-foreground shadow-[var(--shadow-glow)] transition-transform hover:scale-[1.01]"
                >
                  Send request <Send className="h-4 w-4" />
                </button>
              </div>
            )}
          </form>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}

function Field({
  label,
  name,
  type = "text",
  required,
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
}) {
  return (
    <label className="block">
      <span className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
        {label}
        {required && <span className="text-primary"> *</span>}
      </span>
      <input
        name={name}
        type={type}
        required={required}
        className="mt-2 w-full rounded-lg border border-border/70 bg-background px-3 py-2 text-sm outline-none focus:border-primary"
      />
    </label>
  );
}