import Link from "next/link";
import Image from "next/image";
import { getSiteStats } from "@/lib/stats";
import { getSiteSettings } from "@/lib/site-settings";
import { NCK_CARS } from "@/lib/cars-data";
import { NCK_LOCATIONS } from "@/lib/locations-data";

const RENT_LINKS = [
  ["All Cars Dubai",       "/all-cars"],
  ["Luxury Car Rental",    "/cartype/luxury-car-rental-dubai"],
  ["Sports Car Rental",    "/cartype/sports-car-rental-dubai"],
  ["SUV Rental Dubai",     "/cartype/rent-suv-cars-in-dubai"],
  ["Convertible Rental",   "/cartype/convertible-car-rent-in-dubai-uae"],
  ["Coupe Rental Dubai",   "/cartype/coupe-car-rental-in-dubai"],
  ["Sedan Rental Dubai",   "/cartype/sedan-car-rental-dubai"],
  ["Car Price List",       "/car-price-list"],
];

const BRAND_LINKS = [
  ["Mercedes Rental Dubai",  "/carbrand/mercedes-benz-rental-dubai"],
  ["BMW Rental Dubai",       "/carbrand/bmw-car-rental-dubai"],
  ["Lamborghini Dubai",      "/carbrand/lamborghini-rental-in-dubai"],
  ["Porsche Rental Dubai",   "/carbrand/rent-porsche-dubai"],
  ["Rolls Royce Dubai",      "/carbrand/rolls-royce-rental-in-dubai"],
  ["Range Rover Dubai",      "/carbrand/range-rover-rental-in-dubai"],
  ["Audi Rental Dubai",      "/carbrand/audi-car-rental-dubai"],
  ["Ferrari Rental Dubai",   "/carbrand/best-ferrari-rental-in-dubai-uae"],
];

export default async function Footer() {
  const [stats, s] = await Promise.all([getSiteStats(), getSiteSettings()])
  return (
    <footer className="bg-navy-900 text-white mt-20">

      {/* Top CTA strip */}
      <div className="bg-orange/90">
        <div className="section-wrap py-5 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div>
            <p className="font-bold text-white text-lg">Looking to rent a car in Dubai?</p>
            <p className="text-white/80 text-sm">{NCK_CARS.length}+ cars · Free delivery anywhere in Dubai</p>
          </div>
          <Link href="/all-cars" className="btn-primary bg-white text-navy-900 hover:bg-white/90 font-bold flex-shrink-0">
            Browse All Cars →
          </Link>
        </div>
      </div>

      <div className="section-wrap py-12">

        {/* Main grid */}
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-8 mb-10">

          {/* Brand col */}
          <div className="col-span-2 lg:col-span-1">
            <div className="flex items-center gap-1 mb-3">
              {s.logoUrl ? (
                <Image src={s.logoUrl} alt={s.businessName} width={120} height={40} className="h-10 w-auto object-contain" />
              ) : (
                <>
                  <span className="text-white font-black text-xl">NCK</span>
                  <span className="text-orange font-black text-xl">.</span>
                </>
              )}
            </div>
            <p className="text-white/60 text-xs leading-relaxed mb-4">
              {s.tagline ?? 'Car rental in Dubai. Sports cars, luxury, SUVs, convertibles, and sedans. Free delivery, no deposit on all cars.'}
            </p>
            <div className="flex items-center gap-1.5 mb-1">
              <span className="text-yellow-400 text-sm">★★★★★</span>
              <span className="text-white font-bold text-sm">{stats.rating}</span>
              <span className="text-white/50 text-xs">({stats.reviews.toLocaleString()} reviews)</span>
            </div>
            <p className="text-white/40 text-xs">Operating in Dubai since {s.foundingYear}</p>
          </div>

          {/* Rent a Car */}
          <div>
            <p className="text-white/40 text-xs font-bold uppercase tracking-widest mb-3">Rent a Car</p>
            <ul className="space-y-2">
              {RENT_LINKS.map(([label, href]) => (
                <li key={href}>
                  <Link href={href} className="text-white/70 text-xs hover:text-white transition-colors">{label}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Top Brands */}
          <div>
            <p className="text-white/40 text-xs font-bold uppercase tracking-widest mb-3">Top Brands</p>
            <ul className="space-y-2">
              {BRAND_LINKS.map(([label, href]) => (
                <li key={href}>
                  <Link href={href} className="text-white/70 text-xs hover:text-white transition-colors">{label}</Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Locations */}
          <div>
            <p className="text-white/40 text-xs font-bold uppercase tracking-widest mb-3">Locations</p>
            <ul className="space-y-2">
              {NCK_LOCATIONS.map(loc => (
                <li key={loc.slug}>
                  <Link href={`/locations/${loc.slug}`} className="text-white/70 text-xs hover:text-white transition-colors">
                    {loc.name}
                  </Link>
                </li>
              ))}
              <li>
                <Link href="/locations" className="text-brand text-xs hover:text-white transition-colors font-semibold">
                  All locations →
                </Link>
              </li>
            </ul>
          </div>

          {/* Quick links */}
          <div>
            <p className="text-white/40 text-xs font-bold uppercase tracking-widest mb-3">Quick Links</p>
            <ul className="space-y-2">
              {[
                ["All Cars",           "/all-cars"],
                ["Price List",         "/car-price-list"],
                ["Blog",               "/blog"],
                ["Locations",          "/locations"],
                ["About Us",           "/about-us"],
                ["Contact Us",         "/contact-us"],
                ["Privacy Policy",     "/privacy-policy"],
                ["Terms & Conditions", "/terms-and-conditions"],
              ].map(([label, href]) => (
                <li key={href}>
                  <Link href={href} className="text-white/70 text-xs hover:text-white transition-colors">{label}</Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Contact bar */}
        <div className="border-t border-white/10 pt-8 grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
          <div>
            <p className="text-white/40 text-xs font-bold uppercase tracking-widest mb-3">Contact</p>
            <a href={`mailto:${s.email}`} className="block text-white/70 text-xs mb-2 hover:text-white transition-colors">
              ✉ {s.email}
            </a>
            <a href={s.callUrl1} className="block text-white/70 text-xs mb-2 hover:text-white transition-colors">
              📞 {s.phone1}
            </a>
            <p className="text-white/40 text-xs">{s.address}</p>
          </div>
          <div className="flex gap-3 sm:justify-end items-start">
            <a
              href={`https://wa.me/${s.whatsapp1}`}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 bg-emerald-600/80 hover:bg-emerald-600 rounded-xl px-4 py-2.5 transition-all"
            >
              <svg className="w-4 h-4 text-white 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="text-xs text-white/60 leading-none">Chat on</p>
                <p className="text-xs text-white font-semibold">WhatsApp</p>
              </div>
            </a>
            <a
              href={s.callUrl1}
              className="flex items-center gap-2 bg-white/10 hover:bg-white/20 rounded-xl px-4 py-2.5 transition-all"
            >
              <svg className="w-4 h-4 text-white flex-shrink-0" 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>
                <p className="text-xs text-white/60 leading-none">Call us</p>
                <p className="text-xs text-white font-semibold">{s.phone1}</p>
              </div>
            </a>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="border-t border-white/10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
          <p className="text-white/40 text-xs">© {new Date().getFullYear()} {s.businessName} Dubai. All rights reserved.</p>
          <div className="flex items-center gap-3">
            {s.instagramUrl && (
              <a href={s.instagramUrl} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="text-white/40 hover:text-white transition-colors">
                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
              </a>
            )}
            {s.facebookUrl && (
              <a href={s.facebookUrl} target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="text-white/40 hover:text-white transition-colors">
                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
              </a>
            )}
            {s.tiktokUrl && (
              <a href={s.tiktokUrl} target="_blank" rel="noopener noreferrer" aria-label="TikTok" className="text-white/40 hover:text-white transition-colors">
                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z"/></svg>
              </a>
            )}
            <div className="flex items-center gap-1.5 ml-2">
              {["CASH", "VISA", "MC", "USDT", "BTC"].map(m => (
                <span key={m} className="bg-white/10 text-white/60 text-xs px-2 py-0.5 rounded font-medium">{m}</span>
              ))}
            </div>
          </div>
        </div>

      </div>
    </footer>
  );
}