import type { Metadata } from "next";
import Link from "next/link";
import { SITE } from "@/lib/seo";
import { getSiteSettings } from "@/lib/site-settings";

export const metadata: Metadata = {
  title: "Contact NCK Car Rental Dubai | WhatsApp & Phone | 24/7",
  description: "Contact NCK Car Rental Dubai. Available 24/7 via WhatsApp, phone or email. Free delivery across Dubai including Downtown, Marina, Palm Jumeirah and more.",
  alternates: { canonical: `${SITE.domain}/contact-us/` },
  openGraph: {
    title: "Contact NCK Car Rental Dubai",
    description: "Reach us 24/7 via WhatsApp or call. Free delivery across Dubai.",
    url: `${SITE.domain}/contact-us/`,
  },
};

export default async function ContactPage() {
  const s = await getSiteSettings()

  const contactJsonLd = {
    "@context": "https://schema.org",
    "@type": "AutoRental",
    name: s.businessName,
    url: SITE.domain,
    telephone: s.phone1,
    email: s.email,
    address: {
      "@type": "PostalAddress",
      streetAddress: s.streetAddress,
      addressLocality: s.addressLocality,
      addressRegion: s.addressRegion,
      addressCountry: "AE",
    },
    geo: {
      "@type": "GeoCoordinates",
      latitude: s.lat,
      longitude: s.lng,
    },
    openingHoursSpecification: {
      "@type": "OpeningHoursSpecification",
      dayOfWeek: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
      opens: "00:00",
      closes: "23:59",
    },
    sameAs: [s.googleMapsUrl],
  }

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(contactJsonLd) }} />
      {/* Hero */}
      <div className="bg-navy-900 text-white py-10">
        <div className="section-wrap">
          <nav className="flex items-center gap-1.5 text-xs text-navy-300 mb-3">
            <Link href="/" className="hover:text-white">Home</Link>
            <span>/</span>
            <span>Contact Us</span>
          </nav>
          <h1 className="text-3xl font-black mb-2">Contact Us</h1>
          <p className="text-navy-300 text-sm max-w-xl">
            Available 24/7. WhatsApp is the fastest way to get a quote or book a car.
          </p>
        </div>
      </div>

      <div className="section-wrap py-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">

          {/* Left - Contact details */}
          <div className="space-y-6">
            <h2 className="text-xl font-bold text-[#1a1f2e]">Get in Touch</h2>

            {/* Phone cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <a
                href={s.callUrl1}
                className="flex items-start gap-4 bg-white border border-[#e2e6ed] rounded-2xl p-5 hover:border-brand/30 hover:shadow-card transition-all group"
              >
                <div className="w-10 h-10 rounded-xl bg-brand/10 flex items-center justify-center flex-shrink-0">
                  <svg className="w-5 h-5 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.948V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                  </svg>
                </div>
                <div>
                  <p className="text-xs text-[#5c6472] mb-0.5">Primary Phone</p>
                  <p className="font-bold text-[#1a1f2e] group-hover:text-brand transition-colors">{s.phone1}</p>
                </div>
              </a>
              <a
                href={s.callUrl2}
                className="flex items-start gap-4 bg-white border border-[#e2e6ed] rounded-2xl p-5 hover:border-brand/30 hover:shadow-card transition-all group"
              >
                <div className="w-10 h-10 rounded-xl bg-brand/10 flex items-center justify-center flex-shrink-0">
                  <svg className="w-5 h-5 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.948V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                  </svg>
                </div>
                <div>
                  <p className="text-xs text-[#5c6472] mb-0.5">Secondary Phone</p>
                  <p className="font-bold text-[#1a1f2e] group-hover:text-brand transition-colors">{s.phone2}</p>
                </div>
              </a>
            </div>

            {/* Email */}
            <a
              href={`mailto:${s.email}`}
              className="flex items-start gap-4 bg-white border border-[#e2e6ed] rounded-2xl p-5 hover:border-brand/30 hover:shadow-card transition-all group"
            >
              <div className="w-10 h-10 rounded-xl bg-brand/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-5 h-5 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
              </div>
              <div>
                <p className="text-xs text-[#5c6472] mb-0.5">Email</p>
                <p className="font-bold text-[#1a1f2e] group-hover:text-brand transition-colors">{s.email}</p>
              </div>
            </a>

            {/* Address */}
            <div className="flex items-start gap-4 bg-white border border-[#e2e6ed] rounded-2xl p-5">
              <div className="w-10 h-10 rounded-xl bg-brand/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-5 h-5 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
              </div>
              <div>
                <p className="text-xs text-[#5c6472] mb-0.5">Address</p>
                <p className="font-bold text-[#1a1f2e] leading-snug">{s.address}</p>
              </div>
            </div>

            {/* Hours */}
            <div className="flex items-start gap-4 bg-white border border-[#e2e6ed] rounded-2xl p-5">
              <div className="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center flex-shrink-0">
                <svg className="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
              </div>
              <div>
                <p className="text-xs text-[#5c6472] mb-0.5">Business Hours</p>
                <p className="font-bold text-emerald-600">Open 24/7 · All week</p>
                <p className="text-xs text-[#5c6472] mt-0.5">Including weekends and public holidays</p>
              </div>
            </div>
          </div>

          {/* Right - CTAs */}
          <div className="space-y-6">
            <h2 className="text-xl font-bold text-[#1a1f2e]">Book a Car</h2>
            <p className="text-[#5c6472] text-sm leading-relaxed">
              The fastest way to get a quote or reserve a car is via WhatsApp. Send us the dates you need,
              the car you have in mind (or the budget), and we&apos;ll sort everything, delivery included.
            </p>

            <a
              href={`https://wa.me/${s.whatsapp1}`}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-2xl p-6 transition-all group"
            >
              <svg className="w-8 h-8 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
              </svg>
              <div>
                <p className="font-black text-lg leading-none mb-1">Chat on WhatsApp</p>
                <p className="text-white/80 text-sm">Fastest response · Usually within minutes</p>
              </div>
            </a>

            <a
              href={s.callUrl1}
              className="flex items-center gap-4 bg-white border border-[#e2e6ed] hover:border-brand/30 hover:shadow-card text-[#1a1f2e] rounded-2xl p-6 transition-all group"
            >
              <div className="w-10 h-10 rounded-xl bg-brand/10 flex items-center justify-center flex-shrink-0">
                <svg className="w-6 h-6 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.948V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                </svg>
              </div>
              <div>
                <p className="font-black text-lg leading-none mb-1">Call Us Now</p>
                <p className="text-[#5c6472] text-sm group-hover:text-brand transition-colors">{s.phone1}</p>
              </div>
            </a>

            {/* Delivery note */}
            <div className="bg-[#f8f9fc] rounded-2xl p-5 border border-[#e2e6ed]">
              <p className="font-bold text-[#1a1f2e] mb-2">Free Delivery Across Dubai</p>
              <p className="text-[#5c6472] text-sm leading-relaxed">
                We deliver to Downtown Dubai, Dubai Marina, Palm Jumeirah, Business Bay, Jumeirah,
                Al Barsha and Dubai International Airport, at no extra charge.
              </p>
              <Link href="/locations" className="text-brand text-sm font-semibold hover:underline mt-2 block">
                See all delivery locations →
              </Link>
            </div>
          </div>

        </div>
      </div>
    </>
  );
}