import { GalleryCTA } from "@/components/gallery/GalleryCTA";
import { GalleryGrid } from "@/components/gallery/GalleryGrid";
import { GalleryHero } from "@/components/gallery/GalleryHero";
import { GalleryTestimonials } from "@/components/gallery/GalleryTestimonials";
import {
  getCmsImageControl,
  getCmsPageContent,
  getCmsPageHeroImage,
  getCmsPageSections,
  getGalleryPageData,
  getScootersPageData,
} from "@/lib/db-data";
import { createPageMetadata } from "@/lib/seo";

export const metadata = createPageMetadata({
  title: "Gallery",
  description:
    "Explore Bashista Auto showroom, products, service, deliveries, events, and branches.",
  path: "/gallery",
});

export default async function GalleryPage() {
  const [{ galleryImages }, { scooters }, heroBackgroundImage, galleryBannerImage, pageContent, pageSections] = await Promise.all([
    getGalleryPageData(),
    getScootersPageData(),
    getCmsPageHeroImage("gallery", "/images/backgrounds/hero-bg-gallery.png"),
    getCmsImageControl("gallery_banner_product_image", "/images/backgrounds/hero-bg-gallery.png"),
    getCmsPageContent("gallery", {
      heroTitle: "Explore Bashista Auto Gallery",
      heroSubtitle: "Gallery",
      heroDescription: "A glimpse of our showroom, premium electric scooters, happy customers, service care and our growing family.",
    }),
    getCmsPageSections("gallery", { section1: true, section2: true, section3: true, section4: true, section5: true, section6: true }),
  ]);

  return (
    <>
      {pageSections.section1 ? <GalleryHero images={galleryImages} heroBackgroundImage={heroBackgroundImage} heroProductImage={galleryBannerImage} heroTitle={pageContent.heroTitle} heroSubtitle={pageContent.heroSubtitle} heroDescription={pageContent.heroDescription} /> : null}
      {pageSections.section2 ? <GalleryGrid images={galleryImages} /> : null}
      {pageSections.section3 ? <GalleryTestimonials /> : null}
      {pageSections.section4 ? <GalleryCTA scooters={scooters} /> : null}
    </>
  );
}