"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Camera, Sparkles } from 'lucide-react';

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: "Services",      items: [
        { label: "Kids Party Face Painting", href: "/services" },
        { label: "Festival Face Art", href: "/services" },
        { label: "Corporate Events", href: "/services" },
        { label: "Body Painting", href: "/services" },
        { label: "Custom Designs", href: "/services" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Gallery", href: "/gallery" },
        { label: "Packages", href: "/packages" },
        { label: "FAQ", href: "#faq" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Connect",      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" },
        { label: "Phone", href: "tel:+15551234567" },
      ],
    },
    {
      title: "Service Areas",      items: [
        { label: "Local Events", href: "/contact" },
        { label: "Regional Coverage", href: "/contact" },
        { label: "Book Now", href: "/packages" },
        { label: "Get Quote", href: "/contact" },
      ],
    },
  ];

  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-full" data-section="gallery-full" className="mx-auto px-4 md:px-6 py-20">
        <ProductCardFour
          title="Complete Photo Gallery"
          description="Explore our full collection of face painting and body art work from events, festivals, and celebrations. Real photos showcasing our professional artistry and creativity."
          tag="Portfolio"
          tagIcon={Camera}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          carouselMode="buttons"
          products={[
            {
              id: "gallery-kids-1",              name: "Butterfly Dreams",              price: "Kids Party",              variant: "Birthday Event",              imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",              imageAlt: "Butterfly face painting design on child"},
            {
              id: "gallery-kids-2",              name: "Superhero Masks",              price: "Kids Party",              variant: "Birthday Event",              imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1",              imageAlt: "Superhero themed face painting for children"},
            {
              id: "gallery-festival-1",              name: "Festival Fantasy",              price: "Festival Art",              variant: "Outdoor Event",              imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1",              imageAlt: "Vibrant festival face painting with multiple colors"},
            {
              id: "gallery-festival-2",              name: "Rainbow Celebration",              price: "Festival Art",              variant: "Outdoor Event",              imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1",              imageAlt: "Rainbow colored festival face art"},
            {
              id: "gallery-body-1",              name: "Body Art Elegance",              price: "Body Painting",              variant: "Special Event",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1",              imageAlt: "Professional body painting artwork"},
            {
              id: "gallery-custom-1",              name: "Artistic Creation",              price: "Custom Design",              variant: "Themed Event",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1",              imageAlt: "Artist applying custom face painting design"},
            {
              id: "gallery-kids-3",              name: "Princess Tiara",              price: "Kids Party",              variant: "Birthday Event",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-adult-man-his-30s-that-is-painting-big-canvas-with-lot-brushes-palette-while-sitting-floor-art-studio_662251-323.jpg?_wi=1",              imageAlt: "Princess themed face painting on young girl"},
            {
              id: "gallery-festival-3",              name: "Glitter Dreams",              price: "Festival Art",              variant: "Outdoor Event",              imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",              imageAlt: "Glittery festival face painting design"},
            {
              id: "gallery-corporate-1",              name: "Brand Activation",              price: "Corporate Event",              variant: "Professional",              imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1",              imageAlt: "Corporate event face painting for brand activation"},
          ]}
          buttons={[{ text: "Book Your Event", href: "/packages" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Complete photo gallery with all artworks"
          containerClassName="gap-12"
          cardNameClassName=""
          cardPriceClassName=""
          cardVariantClassName=""
        />
      </div>

      <div id="contact-gallery" data-section="contact-gallery" className="mx-auto px-4 md:px-6">
        <ContactText
          text="Love what you see? Let's bring these creative designs to your next event! Contact Paintasy today to book your professional face and body art experience."
          animationType="background-highlight"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Request a Quote", href: "/contact" },
            { text: "View Packages", href: "/packages" },
          ]}
          ariaLabel="Contact section for gallery page"
          containerClassName="py-16"
          contentClassName="max-w-3xl mx-auto"
          textClassName="text-4xl font-extrabold text-center"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
        />
      </div>

      <div id="footer-gallery" data-section="footer-gallery" className="mx-auto px-4 md:px-6">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
          bottomRightText="Professional Event Entertainment | Creative Services"
          ariaLabel="Site footer with links"
          containerClassName="gap-12"
          columnsClassName="grid-cols-2 lg:grid-cols-4"
          columnTitleClassName="font-extrabold text-lg"
          columnItemClassName="hover:opacity-70 transition-opacity"
        />
      </div>
    </ThemeProvider>
  );
}