"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, Instagram, Facebook, Heart, Star, Camera, Phone, Mail } from 'lucide-react';

export const metadata = {
  title: "Gallery - Paintasy Face and Body Art | Event Photos",  description: "Browse our complete gallery of professional face painting and body art work from real events, festivals, corporate events, and parties."};

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

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Kids Party Face Painting", href: "/" },
        { label: "Festival Face Art", href: "/" },
        { label: "Corporate Events", href: "/" },
        { label: "Body Painting", href: "/" },
        { label: "Custom Designs", href: "/" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/" },
        { label: "Gallery", href: "/gallery" },
        { label: "Packages", href: "/" },
        { label: "FAQ", href: "/" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Follow Us",      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "TikTok", href: "https://tiktok.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
      ],
    },
    {
      title: "Get in Touch",      items: [
        { label: "Email: paintasy@events.com", href: "mailto:paintasy@events.com" },
        { label: "Phone: +1 (555) 123-4567", href: "tel:+15551234567" },
        { label: "Book Now", href: "/contact" },
        { label: "Get Quote", href: "/contact" },
      ],
    },
  ];

  const galleryItems = [
    {
      id: "gallery-kids-1",      name: "Butterfly Dreams",      price: "Kids Party",      variant: "Colorful & Playful",      imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",      imageAlt: "Colorful butterfly face painting design on child"},
    {
      id: "gallery-kids-2",      name: "Superhero Mask",      price: "Kids Party",      variant: "Popular Design",      imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",      imageAlt: "Superhero mask face painting artwork"},
    {
      id: "gallery-festival-1",      name: "Festival Glitter Art",      price: "Festival Event",      variant: "Artistic Design",      imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1",      imageAlt: "Vibrant multicolored festival face painting"},
    {
      id: "gallery-festival-2",      name: "Rainbow Artist",      price: "Festival Event",      variant: "Crowd Favorite",      imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1",      imageAlt: "Rainbow themed face painting at outdoor festival"},
    {
      id: "gallery-body-1",      name: "Professional Body Art",      price: "Special Event",      variant: "Premium Service",      imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1",      imageAlt: "Professional body painting artwork on model"},
    {
      id: "gallery-custom-1",      name: "Themed Corporate Art",      price: "Corporate Event",      variant: "Custom Design",      imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1",      imageAlt: "Custom corporate themed face painting design"},
    {
      id: "gallery-kids-3",      name: "Princess Crown",      price: "Kids Party",      variant: "Elegant Design",      imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1",      imageAlt: "Princess crown face painting with glitter details"},
    {
      id: "gallery-artist-1",      name: "Artist at Work",      price: "Behind the Scenes",      variant: "Professional Skill",      imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1",      imageAlt: "Professional face painter creating detailed artwork"},
    {
      id: "gallery-family-1",      name: "Family Fun",      price: "Group Event",      variant: "Multiple Designs",      imageSrc: "http://img.b2bpic.net/free-photo/family-portrait-surprised-father-has-yellow-face-from-paints-cheerful-two-daughters-shows-palms-dirty-with-watercolours-paint-picture-pastime-isolated-lilac-wall-this-is-art_273609-26128.jpg?_wi=1",      imageAlt: "Family with coordinated face painting designs"},
  ];

  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 Gallery"
          bottomRightText="Follow us on Instagram @paintasy_art"
        />
      </div>

      <div id="hero-gallery" data-section="hero-gallery" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="Our Creative Portfolio"
          description="Explore our gallery of real event photos showcasing professional face painting and body art. From kids parties to festivals, see the creativity and artistry that brings magic to every event."
          background={{ variant: "radial-gradient" }}
          tag="Professional Event Photos"
          tagIcon={Camera}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Our Artists", href: "/contact" },
            { text: "View Full Gallery", href: "#gallery-showcase" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg",              imageAlt: "Professional face painting showcase"},
          ]}
          mediaAnimation="opacity"
          ariaLabel="Gallery hero section"
          className="min-h-screen"
          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-12"
          titleClassName="text-5xl lg:text-6xl font-extrabold leading-tight"
          descriptionClassName="text-lg lg:text-xl opacity-90 max-w-2xl"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
        />
      </div>

      <div id="gallery-showcase" data-section="gallery-showcase" className="mx-auto px-4 md:px-6">
        <ProductCardOne
          title="Featured Gallery Collection"
          description="Browse our portfolio of real event photos. Each image represents the professional quality, creativity, and artistic excellence we bring to every booking. From intimate birthday parties to large-scale festival events."
          tag="Portfolio Showcase"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          carouselMode="buttons"
          products={galleryItems}
          buttons={[
            { text: "Book Your Event", href: "/contact" },
            { text: "Request Custom Quote", href: "/contact" },
          ]}
          buttonAnimation="blur-reveal"
          ariaLabel="Gallery showcase section"
          containerClassName="gap-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="social-connect" data-section="social-connect" className="mx-auto px-4 md:px-6">
        <ContactText
          text="Follow Paintasy on Social Media for more creative inspiration, behind-the-scenes moments, and special event highlights. Connect with us across all platforms and see the artistry in action!"
          animationType="background-highlight"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
          buttons={[
            { text: "Instagram @paintasy_art", href: "https://instagram.com" },
            { text: "Facebook Page", href: "https://facebook.com" },
            { text: "Contact Us", href: "/contact" },
          ]}
          ariaLabel="Social media connection section"
          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="Follow us: Instagram • Facebook • TikTok"
          ariaLabel="Site footer with social 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>
  );
}
