import type { Metadata } from "next";
import { PageHero } from "@/components/site/page-hero";
import { Reveal } from "@/components/site/motion";
import { Card } from "@/components/ui/card";
import { ContactForm } from "@/components/site/contact-form";
import { getSettings } from "@/lib/queries";
import { Phone, Mail, MapPin, Clock, MessageCircle } from "lucide-react";

export const metadata: Metadata = {
  title: "Contact Us",
  description: "Contact AL-HASAN ENGINEERING SERVICE for industrial & commercial HVAC services in Karachi. Free site survey and quotation.",
  alternates: { canonical: "/contact" },
};

export const revalidate = 60;

export default async function ContactPage() {
  const settings = await getSettings();
  const phone = settings?.phone ?? "0301-2435144";
  const email = settings?.email ?? "alhasanengineeringservice@gmail.com";
  const address = settings?.address ?? "Shop # A-12, Jama Masjid Yaqoob, Al-Marooq Ayubi, SITE Area, Karachi";
  const hours = settings?.workingHours ?? "Mon - Sat: 9:00 AM - 8:00 PM";
  const whatsapp = settings?.whatsapp ?? "923012435144";

  const contactCards = [
    { icon: Phone, label: "Call Us", value: phone, href: `tel:${phone}` },
    { icon: MessageCircle, label: "WhatsApp", value: "Chat with us", href: `https://wa.me/${whatsapp.replace(/\D/g, "")}` },
    { icon: Mail, label: "Email", value: email, href: `mailto:${email}` },
    { icon: Clock, label: "Working Hours", value: hours },
  ];

  return (
    <>
      <PageHero
        eyebrow="Get in Touch"
        title={<>Let's Talk About Your <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Cooling Needs</span></>}
        subtitle="Request a free site survey, get a quotation, or simply ask a question. Our engineering team responds within one business day."
        breadcrumbs={[{ label: "Contact" }]}
      />

      <section className="py-16 lg:py-24">
        <div className="container-mx">
          {/* Contact cards */}
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
            {contactCards.map((c, i) => {
              const inner = (
                <Card className="p-6 rounded-2xl h-full hover:shadow-brand transition-shadow">
                  <div className="grid place-items-center size-12 rounded-xl bg-[var(--brand-royal)]/10 text-[var(--brand-royal)] mb-4">
                    <c.icon className="size-6" />
                  </div>
                  <div className="text-xs text-muted-foreground uppercase tracking-wide">{c.label}</div>
                  <div className="mt-1 font-bold text-foreground break-words">{c.value}</div>
                </Card>
              );
              return (
                <Reveal key={c.label} delay={i * 0.05}>
                  {c.href ? <a href={c.href} className="block h-full">{inner}</a> : inner}
                </Reveal>
              );
            })}
          </div>

          <div className="grid lg:grid-cols-5 gap-8">
            {/* Form */}
            <Reveal className="lg:col-span-3">
              <Card className="p-6 sm:p-8 rounded-3xl">
                <h2 className="text-2xl font-extrabold mb-1">Send Us a Message</h2>
                <p className="text-muted-foreground text-sm mb-6">Fill out the form and our team will get back to you shortly.</p>
                <ContactForm type="CONTACT" />
              </Card>
            </Reveal>

            {/* Info + map */}
            <Reveal delay={0.1} className="lg:col-span-2">
              <div className="space-y-5">
                <Card className="p-6 rounded-2xl">
                  <div className="flex items-start gap-4">
                    <div className="grid place-items-center size-11 rounded-xl brand-gradient text-white shrink-0">
                      <MapPin className="size-5" />
                    </div>
                    <div>
                      <h3 className="font-bold">Visit Our Office</h3>
                      <p className="mt-1 text-sm text-muted-foreground leading-relaxed">{address}</p>
                    </div>
                  </div>
                </Card>
                <Card className="p-6 rounded-2xl bg-[var(--brand-royal)]/5 border-[var(--brand-royal)]/20">
                  <h3 className="font-bold flex items-center gap-2"><MessageCircle className="size-5 text-[var(--brand-royal)]" /> Emergency Service</h3>
                  <p className="mt-1.5 text-sm text-muted-foreground">AC breakdown affecting your operations? AMC clients get 24/7 priority emergency response.</p>
                  <a href={`tel:${phone}`} className="mt-3 inline-flex items-center gap-2 px-4 py-2.5 rounded-lg brand-gradient text-white text-sm font-semibold">
                    <Phone className="size-4" /> {phone}
                  </a>
                </Card>
                <Card className="p-0 rounded-2xl overflow-hidden">
                  <iframe
                    title="AHE Services Location"
                    src="https://www.openstreetmap.org/export/embed.html?bbox=66.97%2C24.86%2C67.05%2C24.91&layer=mapnik&marker=24.886%2C67.011"
                    className="w-full h-64 border-0"
                    loading="lazy"
                  />
                </Card>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </>
  );
}