import type { Metadata } from "next";
import { Mail, MapPin, MessageCircle, Phone } from "lucide-react";
import {
  contactAddress,
  contactEmail,
  contactEmailHref,
  contactPhoneDisplay,
  contactPhoneHref,
  getWhatsAppUrl,
} from "@/lib/contact";
import { ContactBreadcrumbSection } from "./ContactBreadcrumbSection";

export const metadata: Metadata = {
  title: "Contact Ride N Revive",
  description:
    "Contact Ride N Revive for doorstep car service, bike service, vehicle repairs, roadside support, and maintenance help by phone, WhatsApp, or email.",
  alternates: {
    canonical: "/contact",
  },
  openGraph: {
    title: "Contact Ride N Revive",
    description:
      "Call, WhatsApp, or email Ride N Revive for doorstep vehicle service and repair support.",
    url: "/contact",
  },
};

export default function ContactPage() {
  const contactActions = [
    {
      icon: Phone,
      label: "Call us",
      value: contactPhoneDisplay,
      href: contactPhoneHref,
      external: false,
    },
    {
      icon: MessageCircle,
      label: "WhatsApp",
      value: "Chat with Ride N Revive",
      href: getWhatsAppUrl(),
      external: true,
    },
    {
      icon: Mail,
      label: "Email",
      value: contactEmail,
      href: contactEmailHref,
      external: false,
    },
    {
      icon: MapPin,
      label: "Address",
      value: contactAddress,
      href: undefined,
      external: false,
    },
  ];

  return (
    <>
      <ContactBreadcrumbSection />

      <section className="mx-auto max-w-7xl px-4 py-14 font-['Space_Grotesk'] 2xl:py-24">
        <div className="grid gap-8 lg:grid-cols-12 2xl:gap-10">
          <div className="lg:col-span-4">
            <p className="text-xs font-bold uppercase tracking-[0.2em] text-primary">
              Direct support
            </p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              Reach us without filling a form.
            </h2>
            <p className="mt-4 text-base leading-relaxed text-muted-foreground">
              For service booking, roadside assistance, repair questions, or doorstep inspection,
              call us or send a WhatsApp message. Share your vehicle issue and location, and our
              team will respond with the next step.
            </p>
          </div>
          <div className="lg:col-span-8">
            <div className="grid gap-4 sm:grid-cols-2">
              {contactActions.map(({ icon: Icon, label, value, href, external }) => {
                const cardContent = (
                  <>
                    <span className="grid h-11 w-11 place-items-center rounded-lg bg-primary text-primary-foreground">
                      <Icon className="h-5 w-5" />
                    </span>
                    <p className="mt-4 text-xs font-bold uppercase tracking-[0.16em] text-muted-foreground">
                      {label}
                    </p>
                    <p className="mt-2 text-base font-semibold leading-relaxed text-foreground transition-colors group-hover:text-primary">
                      {value}
                    </p>
                  </>
                );

                return href ? (
                  <a
                    key={label}
                    href={href}
                    target={external ? "_blank" : undefined}
                    rel={external ? "noreferrer" : undefined}
                    className="group rounded-2xl border border-border bg-card p-6 shadow-[0_14px_40px_rgba(0,0,0,0.04)] transition-all hover:-translate-y-1 hover:border-primary/30 hover:shadow-[0_18px_42px_rgba(211,47,47,0.1)]"
                  >
                    {cardContent}
                  </a>
                ) : (
                  <div
                    key={label}
                    className="group rounded-2xl border border-border bg-card p-6 shadow-[0_14px_40px_rgba(0,0,0,0.04)]"
                  >
                    {cardContent}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}