import { ArrowRight, CalendarCheck } from "lucide-react";
import { AuthorizedDealerBenefits } from "@/components/brands/AuthorizedDealerBenefits";
import { BrandCompareTeaser } from "@/components/brands/BrandCompareTeaser";
import { BrandGrid } from "@/components/brands/BrandGrid";
import { BrandsHero } from "@/components/brands/BrandsHero";
import { FeaturedModelsByBrand } from "@/components/brands/FeaturedModelsByBrand";
import { BranchesPreview } from "@/components/home/BranchesPreview";
import { Button } from "@/components/ui/button";
import { getBrandsPageData, getCmsImageControl, getCmsPageContent, getCmsPageHeroImage, getCmsPageSections } from "@/lib/db-data";
import { createPageMetadata } from "@/lib/seo";

export const metadata = createPageMetadata({
  title: "Brands",
  description:
    "Explore electric scooter brands available at Bashista Auto in Bharatpur and Kawasoti.",
  path: "/brands",
});

export default async function BrandsPage() {
  const [{ brands, scooters, branches }, heroBackgroundImage, bannerImage, ctaImage, pageContent, pageSections] = await Promise.all([
    getBrandsPageData(),
    getCmsPageHeroImage("brands", "/images/backgrounds/hero-bg-general.png"),
    getCmsImageControl("brands_banner_product_image", "/images/scooters/hero-scooter-v2.png"),
    getCmsImageControl("brands_cta_product_image", "/images/scooters/hero-scooter-v2.png"),
    getCmsPageContent("brands", {
      heroTitle: "Brands We Offer",
      heroSubtitle: "",
      heroDescription: "At Bashista Auto, we partner with trusted names in electric mobility to bring you the best in performance, reliability, and innovation. Explore our top electric scooter brands and find the perfect ride for your journey.",
    }),
    getCmsPageSections("brands", { section1: true, section2: true, section3: true, section4: true, section5: true, section6: true }),
  ]);
  const ctaScooter = scooters[0];

  return (
    <>
      {pageSections.section1 ? <BrandsHero
        brands={brands}
        scooters={scooters}
        heroBackgroundImage={heroBackgroundImage}
        heroProductImage={bannerImage}
        heroTitle={pageContent.heroTitle}
        heroDescription={pageContent.heroDescription}
      /> : null}
      {pageSections.section2 ? <BrandGrid brands={brands} /> : null}
      {pageSections.section3 ? <FeaturedModelsByBrand brands={brands} scooters={scooters} /> : null}
      {pageSections.section4 ? <AuthorizedDealerBenefits /> : null}
      {pageSections.section5 ? <BrandCompareTeaser brands={brands} scooters={scooters} /> : null}
      {pageSections.section6 ? <section className="bg-white py-10">
        <div className="container-custom">
          <div className="overflow-hidden rounded-[1.5rem] bg-gradient-to-r from-primary-deep via-cyan-600 to-ev p-6 text-white shadow-soft md:p-8">
            <div className="grid items-center gap-6 md:grid-cols-[0.8fr_1.2fr_auto]">
              {ctaScooter ? (
                <img
                  src={ctaImage || ctaScooter.heroImage}
                  alt={ctaScooter.name}
                  className="mx-auto aspect-[4/3] w-full max-w-sm rounded-2xl object-contain"
                />
              ) : null}
              <div>
                <h2 className="text-2xl font-bold md:text-3xl">
                  Ready to Find Your Perfect Ride?
                </h2>
                <p className="mt-3 max-w-xl text-sm leading-6 text-blue-50">
                  Explore our wide range of electric scooters from trusted brands
                  and book a showroom test ride with Bashista Auto.
                </p>
              </div>
              <div className="flex flex-col gap-3 sm:flex-row md:flex-col">
                <Button href="/scooters" variant="secondary">
                  Explore Scooters <ArrowRight className="h-4 w-4" />
                </Button>
                <Button href="/book-test-ride" variant="green">
                  <CalendarCheck className="h-4 w-4" />
                  Book a Test Ride
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section> : null}
      {pageSections.section6 ? <BranchesPreview branches={branches} /> : null}
    </>
  );
}