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

export async function generateMetadata(): Promise<Metadata> {
  const [{ carsCount }, s] = await Promise.all([getSiteStats(), getSiteSettings()])
  return {
    title: `About ${s.businessName} Dubai | Fleet, Delivery & How We Work`,
    description: `${s.businessName} has operated in Dubai since ${s.foundingYear}. Over ${carsCount} cars including Ferrari, Lamborghini, Rolls Royce, Mercedes and BMW. Free delivery, 24/7 support.`,
    alternates: { canonical: `${SITE.domain}/about-us/` },
    openGraph: {
      title: `About ${s.businessName} Dubai`,
      description: `${s.businessName}, Dubai. Over ${carsCount} cars with free delivery and 24/7 support. Operating since ${s.foundingYear}.`,
      url: `${SITE.domain}/about-us/`,
    },
  }
}

const FLEET_TYPES = [
  { icon: "🏎️", label: "Sports Cars",    desc: "Ferrari, Lamborghini, Porsche 911 GT3 RS" },
  { icon: "💎", label: "Luxury Cars",    desc: "Rolls Royce, Bentley, Mercedes S-Class" },
  { icon: "🚙", label: "SUVs",           desc: "Range Rover, GMC Yukon, Cadillac Escalade" },
  { icon: "🌅", label: "Convertibles",   desc: "Porsche Boxster, AMG SL55, BMW 430i" },
  { icon: "🎨", label: "Coupes",         desc: "Mercedes AMG GT, BMW 840i, Audi TT" },
  { icon: "🚗", label: "Sedans",         desc: "Mercedes E-Class, BMW 7 Series, Audi A8" },
];

const BRANDS = ["Mercedes-Benz", "BMW", "Ferrari", "Lamborghini", "Porsche", "Rolls Royce", "Range Rover", "Audi", "Bentley", "Cadillac", "GMC"];



export default async function AboutPage() {
  const [{ carsCount, reviews, rating }, s] = await Promise.all([getSiteStats(), getSiteSettings()])

  const organizationLd = {
    "@context": "https://schema.org",
    "@type": "AutoRental",
    "@id": `${SITE.domain}/about-us/`,
    name: s.businessName,
    url: SITE.domain,
    logo: s.logoUrl ?? `${SITE.domain}/logo.png`,
    foundingDate: String(s.foundingYear),
    description: `${s.businessName} has operated in Dubai since ${s.foundingYear}. Over ${carsCount} cars including Ferrari, Lamborghini, Rolls Royce, Mercedes and BMW. Free delivery, 24/7 support.`,
    address: {
      "@type": "PostalAddress",
      streetAddress: s.streetAddress,
      addressLocality: s.addressLocality,
      addressRegion: "Dubai",
      addressCountry: "AE",
    },
    geo: { "@type": "GeoCoordinates", latitude: s.lat, longitude: s.lng },
    telephone: s.phone1,
    email: s.email,
    openingHoursSpecification: {
      "@type": "OpeningHoursSpecification",
      dayOfWeek: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
      opens: "00:00",
      closes: "23:59",
    },
    founder: { "@type": "Person", name: s.founderName, jobTitle: s.founderTitle },
    ...(reviews > 0 ? {
      aggregateRating: {
        "@type": "AggregateRating",
        ratingValue: rating,
        reviewCount: reviews,
        bestRating: 5,
        worstRating: 1,
      },
    } : {}),
    sameAs: [
      `https://wa.me/${s.whatsapp1}`,
      s.googleMapsUrl,
    ],
  }

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationLd) }} />
      {/* Hero */}
      <div className="bg-navy-900 text-white py-14">
        <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>About Us</span>
          </nav>
          <h1 className="text-4xl font-black mb-4">About NCK Car Rental</h1>
          <p className="text-navy-300 text-base max-w-2xl leading-relaxed">
            Car rental in Dubai with {carsCount}+ models, free delivery across the city, and a team reachable 24/7.
          </p>
          <div className="flex items-center gap-6 mt-6">
            <div>
              <p className="text-3xl font-black text-white">{carsCount}+</p>
              <p className="text-navy-300 text-xs">Cars available</p>
            </div>
            <div className="w-px h-10 bg-white/10" />
            <div>
              <p className="text-3xl font-black text-white">{reviews.toLocaleString()}</p>
              <p className="text-navy-300 text-xs">Customer reviews</p>
            </div>
            <div className="w-px h-10 bg-white/10" />
            <div>
              <p className="text-3xl font-black text-white">{rating}</p>
              <p className="text-navy-300 text-xs">Average rating</p>
            </div>
          </div>
        </div>
      </div>

      {/* Who We Are */}
      <div className="section-wrap py-14">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="text-brand text-xs font-bold uppercase tracking-widest mb-2">Who We Are</p>
            <h2 className="text-3xl font-black text-[#1a1f2e] mb-5">Car Rental in Dubai Since {s.foundingYear}</h2>
            <div className="space-y-4 text-[#5c6472] text-sm leading-relaxed">
              <p>
                {s.businessName} has been operating in Dubai since {s.foundingYear}. The fleet currently covers more than {carsCount} models:
                sports cars, luxury saloons, SUVs, convertibles, and coupes from brands including BMW, Mercedes-Benz,
                Ferrari, Lamborghini, Porsche, and Rolls Royce.
              </p>
              <p>
                We deliver to hotels, apartments, villas, and offices anywhere in Dubai, usually within two hours of
                booking. There is no counter to queue at. You book on WhatsApp, confirm the dates, and the car
                arrives clean, fuelled, and covered by basic insurance.
              </p>
              <p>
                Rentals run from a single day to a full month. Daily and weekly rates are both available, and longer
                rentals typically work out cheaper per day than the standard daily rate.
              </p>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            {[
              { icon: "🚗", label: "Free Delivery", desc: "To any location in Dubai at no extra cost" },
              { icon: "💳", label: "No Deposit", desc: "On all cars, no exceptions" },
              { icon: "🕐", label: "24/7 Support", desc: "Available all week including weekends" },
              { icon: "📋", label: "Transparent Pricing", desc: "No hidden fees, clear daily rates" },
            ].map(item => (
              <div key={item.label} className="bg-white border border-[#e2e6ed] rounded-2xl p-5">
                <p className="text-2xl mb-2">{item.icon}</p>
                <p className="font-bold text-[#1a1f2e] text-sm mb-1">{item.label}</p>
                <p className="text-[#5c6472] text-xs leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Fleet types */}
      <div className="bg-[#f8f9fc] py-14">
        <div className="section-wrap">
          <p className="text-brand text-xs font-bold uppercase tracking-widest mb-2">Our Fleet</p>
          <h2 className="text-3xl font-black text-[#1a1f2e] mb-8">The Fleet</h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
            {FLEET_TYPES.map(t => (
              <div key={t.label} className="bg-white border border-[#e2e6ed] rounded-2xl p-5 hover:border-brand/30 hover:shadow-card transition-all">
                <p className="text-2xl mb-2">{t.icon}</p>
                <p className="font-bold text-[#1a1f2e] mb-1">{t.label}</p>
                <p className="text-[#5c6472] text-xs">{t.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Brands */}
      <div className="section-wrap py-14">
        <p className="text-brand text-xs font-bold uppercase tracking-widest mb-2">Brands We Carry</p>
        <h2 className="text-3xl font-black text-[#1a1f2e] mb-6">Brands in the Fleet</h2>
        <div className="flex flex-wrap gap-2">
          {BRANDS.map(b => (
            <span key={b} className="bg-white border border-[#e2e6ed] text-[#1a1f2e] text-sm font-medium px-4 py-2 rounded-full">
              {b}
            </span>
          ))}
        </div>
      </div>

      {/* Founder */}
      <div className="bg-[#f8f9fc] py-14">
        <div className="section-wrap max-w-2xl">
          <p className="text-brand text-xs font-bold uppercase tracking-widest mb-2">Leadership</p>
          <h2 className="text-3xl font-black text-[#1a1f2e] mb-8">Meet the Team</h2>
          <div className="bg-white border border-[#e2e6ed] rounded-2xl p-8">
            <div className="flex items-center gap-4 mb-4">
              <div className="w-14 h-14 rounded-full bg-navy-900 flex items-center justify-center text-white font-black text-xl">
                {s.founderName.charAt(0).toUpperCase()}
              </div>
              <div>
                <p className="font-black text-[#1a1f2e] text-lg">{s.founderName}</p>
                <p className="text-[#5c6472] text-sm">{s.founderTitle}</p>
              </div>
            </div>
            <p className="text-[#5c6472] text-sm leading-relaxed">
              {s.founderName} founded {s.businessName} in Dubai in {s.foundingYear}. He manages the fleet selection, pricing, and
              day-to-day operations. Most of the team has been with the company for over three years.
            </p>
          </div>
        </div>
      </div>

      {/* CTA */}
      <div className="section-wrap py-14 text-center">
        <h2 className="text-3xl font-black text-[#1a1f2e] mb-3">Looking for a car?</h2>
        <p className="text-[#5c6472] mb-6 max-w-md mx-auto">
          Browse the full fleet of {carsCount}+ models, or message us on WhatsApp if you have a specific car or budget in mind.
        </p>
        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <Link href="/all-cars" className="btn-primary">Browse All Cars</Link>
          <a
            href={`https://wa.me/${s.whatsapp1}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-3 rounded-xl transition-all"
          >
            <svg className="w-5 h-5" 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>
            WhatsApp Us
          </a>
        </div>
      </div>
    </>
  );
}