import { createFileRoute } from "@tanstack/react-router";
import { Mail, MapPin, MessageCircle, Phone } from "lucide-react";
import { LeadForm } from "@/components/lead-form";

export const Route = createFileRoute("/contact")({
  component: ContactPage,
  head: () => ({
    meta: [
      { title: "Contact Zamelect Properties — Dubai Real Estate Advisors" },
      {
        name: "description",
        content:
          "Speak with a senior Zamelect advisor about buying, selling or investing in Dubai real estate. Call, WhatsApp or send a message.",
      },
      { property: "og:title", content: "Contact Zamelect Properties" },
      { property: "og:description", content: "Book a private consultation with a Dubai real estate advisor." },
      { property: "og:url", content: "/contact" },
    ],
    links: [{ rel: "canonical", href: "/contact" }],
  }),
});

function ContactPage() {
  return (
    <div className="pt-32 pb-24">
      <div className="container-luxe grid gap-12 lg:grid-cols-[1fr_1.15fr]">
        <div>
          <p className="text-[0.7rem] uppercase tracking-[0.28em] text-gold">Contact</p>
          <h1 className="mt-3 font-display text-5xl font-semibold leading-tight sm:text-6xl">
            Let's find your Dubai address.
          </h1>
          <p className="mt-5 text-muted-foreground text-lg">
            A senior advisor will respond within one business hour with matching
            properties, availability and a private-viewing plan.
          </p>

          <div className="mt-10 space-y-6">
            <ContactRow
              icon={Phone}
              label="Call"
              value="+971 4 000 0000"
              href="tel:+97140000000"
            />
            <ContactRow
              icon={MessageCircle}
              label="WhatsApp"
              value="+971 50 000 0000"
              href="https://wa.me/971500000000"
            />
            <ContactRow
              icon={Mail}
              label="Email"
              value="hello@zamelectproperties.com"
              href="mailto:hello@zamelectproperties.com"
            />
            <ContactRow icon={MapPin} label="Office" value="Business Bay, Dubai — UAE" />
          </div>

          <div className="mt-10 rounded-2xl border border-border bg-secondary p-6">
            <p className="text-sm text-foreground/80">
              <strong className="font-display">Working hours</strong>
              <br />
              Sunday – Friday · 9:00 – 19:00 GST
              <br />
              Emergency support for existing clients 24/7.
            </p>
          </div>
        </div>

        <div className="rounded-3xl border border-border bg-card p-8 sm:p-10 shadow-luxe">
          <h2 className="font-display text-2xl font-semibold">Send a message</h2>
          <p className="mt-1 text-sm text-muted-foreground">
            Prefer to write? Fill in the form and we'll be in touch shortly.
          </p>
          <div className="mt-8">
            <LeadForm />
          </div>
        </div>
      </div>
    </div>
  );
}

function ContactRow({
  icon: Icon,
  label,
  value,
  href,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: string;
  href?: string;
}) {
  const Cmp: any = href ? "a" : "div";
  return (
    <Cmp href={href} className="flex items-center gap-4 group">
      <span className="flex h-12 w-12 items-center justify-center rounded-full bg-gold/15 text-gold">
        <Icon className="h-5 w-5" />
      </span>
      <div>
        <div className="text-[0.7rem] uppercase tracking-[0.2em] text-muted-foreground">{label}</div>
        <div className="mt-0.5 font-display text-lg font-semibold group-hover:text-gold transition">
          {value}
        </div>
      </div>
    </Cmp>
  );
}