import { CalendarCheck, ChevronRight, Scale } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { CompareBanner } from "@/components/scooters/CompareBanner";
import { FinancingBanner } from "@/components/scooters/FinancingBanner";
import { ScooterGrid } from "@/components/scooters/ScooterGrid";
import { Button } from "@/components/ui/button";
import {
  getCmsFinanceEnabled,
  getCmsImageControl,
  getCmsPageContent,
  getCmsPageHeroImage,
  getCmsPageSections,
  getScootersPageData,
} from "@/lib/db-data";
import { createPageMetadata } from "@/lib/seo";

export const metadata = createPageMetadata({
  title: "Electric Scooters",
  description:
    "Explore electric scooters, compare models, and book a test ride at Bashista Auto.",
  path: "/scooters",
});

export default async function ScootersPage() {
  const [{ brands, inventory, scooters }, heroBackgroundImage, financeEnabled, heroProductImage, pageContent, pageSections] = await Promise.all([
    getScootersPageData(),
    getCmsPageHeroImage("scooters", "/images/backgrounds/hero-bg-general.png"),
    getCmsFinanceEnabled(),
    getCmsImageControl("scooters_banner_product_image", "/images/scooters/hero-scooter.png"),
    getCmsPageContent("scooters", {
      heroTitle: "Explore Electric Scooters",
      heroSubtitle: "",
      heroDescription: "Discover the perfect electric scooter for your daily ride. Smart. Stylish. Sustainable. Ride better, ride electric.",
    }),
    getCmsPageSections("scooters", {
      section1: true, section2: true, section3: true, section4: true, section5: true, section6: true,
    }),
  ]);
  const heroScooter = scooters[0];

  return (
    <>
      {pageSections.section1 ? <section className="relative overflow-hidden bg-[radial-gradient(circle_at_75%_45%,rgba(23,105,255,0.16),transparent_32%),linear-gradient(105deg,#ffffff_0%,#f4f9ff_48%,#dcecff_100%)]">
        <Image
          src={heroBackgroundImage}
          alt=""
          fill
          sizes="100vw"
          className="pointer-events-none object-cover object-center opacity-55"
        />
        <div className="container-custom relative z-10 pb-10 pt-8 md:pb-12 md:pt-10">
          <div className="mb-8 flex items-center gap-2 text-sm font-semibold text-navy-muted">
            <Link href="/" className="hover:text-primary">
              Home
            </Link>
            <ChevronRight className="h-4 w-4" />
            <span className="text-primary">Scooters</span>
          </div>
          <div className="grid items-center gap-8 lg:grid-cols-[0.9fr_1.1fr]">
            <div>
              <h1 className="text-4xl font-black leading-tight text-navy-deep sm:text-5xl lg:text-6xl">
                {pageContent.heroTitle}
              </h1>
              <p className="mt-5 max-w-xl text-base leading-7 text-navy-muted">
                {pageContent.heroDescription}
              </p>
            </div>
            <div className="relative p-5">
              <img
                src={heroProductImage}
                alt={heroScooter?.name ?? "Hero scooter"}
                className="mx-auto aspect-[4/3] w-full max-w-2xl object-contain drop-shadow-2xl"
              />
            </div>
          </div>
        </div>
      </section> : null}

      {pageSections.section2 ? <div id="scooter-grid">
        <ScooterGrid brands={brands} scooters={scooters} inventory={inventory} />
      </div> : null}
      {pageSections.section3 ? <CompareBanner scooters={scooters} /> : null}
      {pageSections.section4 && financeEnabled ? <FinancingBanner scooters={scooters} /> : null}
      {pageSections.section5 ? <section className="bg-white py-3">
        <div className="container-custom grid gap-4 md:grid-cols-2">
          <div className="grid items-center gap-5 rounded-xl border border-border bg-white p-6 shadow-card sm:grid-cols-[1fr_9rem]">
            <div className="flex items-start gap-4">
              <span className="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-primary-soft text-primary">
                <Scale className="h-7 w-7" />
              </span>
              <div>
                <h2 className="text-xl font-bold text-navy-deep">Still browsing?</h2>
                <p className="mt-2 text-sm leading-6 text-navy-muted">
                  Compare models and find the perfect electric scooter.
                </p>
                <Button className="mt-5 rounded-lg" href="/scooters" variant="outline">
                  Compare Now
                </Button>
              </div>
            </div>
            <div className="hidden h-28 items-center justify-center rounded-2xl border border-border bg-primary-soft/40 text-primary sm:flex">
              <Scale className="h-16 w-16" />
            </div>
          </div>
          <div className="grid items-center gap-5 rounded-xl border border-border bg-white p-6 shadow-card sm:grid-cols-[1fr_9rem]">
            <div className="flex items-start gap-4">
              <span className="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-primary-soft text-primary">
                <CalendarCheck className="h-7 w-7" />
              </span>
              <div>
                <h2 className="text-xl font-bold text-navy-deep">
                  Experience before you decide.
                </h2>
                <p className="mt-2 text-sm leading-6 text-navy-muted">
                  Book a test ride at your nearest Bashista Auto showroom.
                </p>
                <Button className="mt-5 rounded-lg" href="/book-test-ride" variant="green">
                  Book Test Ride
                </Button>
              </div>
            </div>
            <div className="hidden h-28 items-center justify-center rounded-2xl border border-border bg-ev-soft/50 text-ev-deep sm:flex">
              <CalendarCheck className="h-16 w-16" />
            </div>
          </div>
        </div>
      </section> : null}
    </>
  );
}