import { createFileRoute } from "@tanstack/react-router";
import { Mail, MessageCircle, Clock, ShieldCheck } from "lucide-react";
import { SiteLayout } from "@/components/site/Layout";
import { PageHero } from "@/components/site/PageHero";
import { Section } from "@/components/site/Section";
import { ContactForm } from "@/components/site/ContactForm";
import { SITE, WHATSAPP_LINK } from "@/lib/site";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact a WordPress Expert — Reply in 30 Minutes | FixWP Pro" },
      { name: "description", content: "Get help with your WordPress site now. WhatsApp, email or contact form — we reply within 30 minutes, 24/7. Free diagnosis for emergencies." },
      { property: "og:title", content: "Contact FixWP Pro — WordPress Expert Help" },
      { property: "og:description", content: "Reply within 30 minutes. WhatsApp, email or form. Free diagnosis." },
    ],
  }),
  component: ContactPage,
});

function ContactPage() {
  return (
    <SiteLayout>
      <PageHero
        eyebrow="Contact"
        title="Tell us what's broken."
        subtitle="WhatsApp, email, or use the form — whichever you prefer. We reply within 30 minutes, including weekends."
      />
      <Section>
        <div className="grid gap-12 lg:grid-cols-2 items-start">
          <div className="space-y-5">
            <ContactCard
              icon={<MessageCircle className="h-6 w-6" />}
              title="WhatsApp (fastest)"
              text={SITE.phone}
              link={WHATSAPP_LINK}
              cta="Open WhatsApp"
            />
            <ContactCard
              icon={<Mail className="h-6 w-6" />}
              title="Email"
              text={SITE.email}
              link={`mailto:${SITE.email}`}
              cta="Send email"
            />
            <ContactCard
              icon={<Clock className="h-6 w-6" />}
              title="Hours"
              text="24 / 7 — including nights and weekends"
            />
            <ContactCard
              icon={<ShieldCheck className="h-6 w-6" />}
              title="Guarantee"
              text="Money-back if we can't fix it. 30-day guarantee on malware jobs."
            />
          </div>
          <ContactForm />
        </div>
      </Section>
    </SiteLayout>
  );
}

function ContactCard({
  icon,
  title,
  text,
  link,
  cta,
}: {
  icon: React.ReactNode;
  title: string;
  text: string;
  link?: string;
  cta?: string;
}) {
  return (
    <div className="flex gap-4 rounded-2xl border border-border bg-card p-6 shadow-soft">
      <span className="grid place-items-center h-12 w-12 rounded-xl bg-gradient-emerald shadow-emerald flex-shrink-0">
        <span className="text-navy-deep">{icon}</span>
      </span>
      <div className="flex-1">
        <h3 className="font-display font-semibold text-lg">{title}</h3>
        <p className="text-muted-foreground">{text}</p>
        {link && cta && (
          <a
            href={link}
            target={link.startsWith("http") ? "_blank" : undefined}
            rel="noopener noreferrer"
            className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-emerald hover:gap-2 transition-all"
          >
            {cta} →
          </a>
        )}
      </div>
    </div>
  );
}