"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function GalleryPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Gallery", id: "gallery" },
    { name: "Packages", id: "packages" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Gallery",      items: [
        { label: "Kids Designs", href: "#gallery" },
        { label: "Festival Art", href: "#gallery" },
        { label: "Body Painting", href: "#gallery" },
        { label: "Custom Designs", href: "#gallery" },
      ],
    },
    {
      title: "Services",      items: [
        { label: "All Services", href: "/services" },
        { label: "Packages", href: "/packages" },
        { label: "Pricing", href: "/packages" },
        { label: "About", href: "/about" },
      ],
    },
    {
      title: "Social Media",      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "TikTok", href: "https://tiktok.com" },
        { label: "Email", href: "mailto:paintasy@events.com" },
      ],
    },
    {
      title: "Book Now",      items: [
        { label: "View Packages", href: "/packages" },
        { label: "Request Quote", href: "/contact" },
        { label: "Contact Us", href: "/contact" },
        { label: "FAQ", href: "#faq" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="large"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Paintasy"
          navItems={navItems}
          bottomLeftText="Creative Face & Body Art"
          bottomRightText="paintasy@events.com"
        />
      </div>

      <div id="gallery-page-hero" data-section="gallery-page-hero">
        <HeroBillboardGallery
          title="Event Photo Gallery"
          description="Real photos from real events. Browse our portfolio of professional face painting and body art work."
          background={{ variant: "radial-gradient" }}
          buttons={[{ text: "Book Your Event", href: "/packages" }]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc:
                "http://img.b2bpic.net/free-photo/three-beautiful-smiling-girls-posing-holi-party_158538-16632.jpg?_wi=2",              imageAlt: "Festival face art gallery"},
          ]}
          mediaAnimation="opacity"
          titleClassName="text-5xl font-extrabold"
          descriptionClassName="text-lg opacity-90"
        />
      </div>

      <div id="gallery-showcase" data-section="gallery-showcase">
        <ProductCardFour
          title="Complete Portfolio"
          description="Browse our complete collection of face painting and body art from events throughout the year."
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground={true}
          gridVariant="bento-grid"
          carouselMode="buttons"
          products={[
            {
              id: "gallery-kids-1",              name: "Kids Face Painting",              price: "Colorful Designs",              variant: "Birthday Parties",              imageSrc:
                "http://img.b2bpic.net/free-photo/beautiful-lgtbiq-plus-portraits_23-2149165929.jpg?_wi=2",              imageAlt: "Kids birthday party face painting designs"},
            {
              id: "gallery-festival-1",              name: "Festival Face Art",              price: "Creative Artistry",              variant: "Outdoor Events",              imageSrc:
                "http://img.b2bpic.net/free-photo/three-beautiful-smiling-girls-posing-holi-party_158538-16632.jpg?_wi=3",              imageAlt: "Festival face painting artwork showcase"},
            {
              id: "gallery-body-1",              name: "Body Painting Art",              price: "Professional Service",              variant: "Special Events",              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up-person_23-2148410114.jpg?_wi=2",              imageAlt: "Professional body art photography"},
            {
              id: "gallery-custom-1",              name: "Custom Designs",              price: "Personalized Art",              variant: "Themed Events",              imageSrc:
                "http://img.b2bpic.net/free-photo/fabulous-drag-queen-getting-her-makeup-ready_23-2149138152.jpg?_wi=2",              imageAlt: "Custom themed face painting designs"},
            {
              id: "gallery-kids-2",              name: "Princess & Character",              price: "Enchanting Designs",              variant: "Theme Parties",              imageSrc:
                "http://img.b2bpic.net/free-photo/beautiful-lgtbiq-plus-portraits_23-2149165929.jpg?_wi=3",              imageAlt: "Princess character face painting designs"},
            {
              id: "gallery-festival-2",              name: "Festival Entertainment",              price: "Live Entertainment",              variant: "Large Events",              imageSrc:
                "http://img.b2bpic.net/free-photo/three-beautiful-smiling-girls-posing-holi-party_158538-16632.jpg?_wi=4",              imageAlt: "Festival face painter with audience"},
            {
              id: "gallery-body-2",              name: "Artistic Body Designs",              price: "High Impact Art",              variant: "Photo Shoots",              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-view-fluorescent-make-up-person_23-2148410114.jpg?_wi=3",              imageAlt: "Artistic body painting photoshoot"},
            {
              id: "gallery-corporate",              name: "Corporate Events",              price: "Professional Art",              variant: "Team Events",              imageSrc:
                "http://img.b2bpic.net/free-photo/man-about-hug-friend-birthday-celebration_23-2147716867.jpg?_wi=3",              imageAlt: "Corporate event face painting"},
          ]}
          buttons={[{ text: "Book Now", href: "/packages" }]}
          buttonAnimation="blur-reveal"
          containerClassName="gap-12"
        />
      </div>

      <div id="gallery-footer" data-section="gallery-footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Paintasy Face and Body Art."
          bottomRightText="Authentic Event Photography"
        />
      </div>
    </ThemeProvider>
  );
}