"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Smile, Heart, Sparkles, Star, Zap, Music, Users, Briefcase, Target, Award, Palette, Camera } from 'lucide-react';

export default function ServicesPage() {
  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={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "Gallery", id: "gallery" },
            { name: "Packages", id: "packages" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Creative Face & Body Art"
          bottomRightText="paintasy@events.com"
        />
      </div>

      <div id="services-page-hero" data-section="services-page-hero">
        <HeroBillboardGallery
          title="Our Services"
          description="Professional face painting and body art for every occasion. From intimate celebrations to large festival events, we bring creativity and joy to your gathering."
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Book Now", href: "/packages" }
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/little-children-trick-treating-halloween_53876-40562.jpg?_wi=2",              imageAlt: "Professional face painting services"
            }
          ]}
          mediaAnimation="opacity"
          ariaLabel="Services page hero section"
          titleClassName="text-5xl font-extrabold"
          descriptionClassName="text-lg opacity-90 max-w-2xl"
        />
      </div>

      <div id="services-detailed" data-section="services-detailed">
        <FeatureCardTen
          title="Complete Service Offerings"
          description="Each service is tailored to deliver maximum enjoyment and artistic quality."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "service-1",              title: "Kids Party Face Painting",              description: "Make birthdays magical with our professional kids' face painting. Our artists create vibrant, playful designs that children absolutely love.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/little-children-trick-treating-halloween_53876-40562.jpg?_wi=3",                imageAlt: "Kids party face painting showcase"
              },
              items: [
                { icon: Smile, text: "Butterfly, animal & character designs" },
                { icon: Heart, text: "Safe, child-friendly face paints" },
                { icon: Sparkles, text: "Quick application, maximum fun" },
                { icon: Star, text: "Perfect for ages 3-12" }
              ],
              reverse: false
            },
            {
              id: "service-2",              title: "Festival Face Art",              description: "Perfect for outdoor events, festivals, and large gatherings. We specialize in fast, beautiful designs that work for high-capacity crowds.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-girl-playing-beauty-salon_23-2147749312.jpg?_wi=2",                imageAlt: "Festival face art designs"
              },
              items: [
                { icon: Zap, text: "3-5 minute turnaround per person" },
                { icon: Music, text: "Perfect for music festivals & carnivals" },
                { icon: Users, text: "Handles large crowds efficiently" },
                { icon: Palette, text: "Artistic & creative designs" }
              ],
              reverse: true
            },
            {
              id: "service-3",              title: "Corporate Event Entertainment",              description: "Add a creative touch to company parties, team buildings, and brand activations. Professional service that impresses clients and energizes employees.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/man-about-hug-friend-birthday-celebration_23-2147716867.jpg?_wi=2",                imageAlt: "Corporate event face painting service"
              },
              items: [
                { icon: Briefcase, text: "Professional & polished service" },
                { icon: Target, text: "Branded design options" },
                { icon: Award, text: "Premium quality art" },
                { icon: Users, text: "Great for team engagement" }
              ],
              reverse: false
            },
            {
              id: "service-4",              title: "Professional Body Painting",              description: "Artistic body painting for special events, photo shoots, performances, and themed celebrations. Stunning visual art that makes a statement.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/blue-yellow-holi-color-powder-woman-s-face_23-2148129183.jpg",                imageAlt: "Professional body painting artwork"
              },
              items: [
                { icon: Palette, text: "Custom artistic designs" },
                { icon: Camera, text: "Photography-ready artistry" },
                { icon: Sparkles, text: "High-impact visual art" },
                { icon: Star, text: "Unforgettable performances" }
              ],
              reverse: true
            }
          ]}
          buttons={[
            { text: "View Packages", href: "/packages" }
          ]}
          buttonAnimation="blur-reveal"
          containerClassName="gap-12"
        />
      </div>

      <div id="services-footer" data-section="services-footer">
        <FooterSimple
          columns={[
            {
              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" }
              ]
            },
            {
              title: "Quick Links",              items: [
                { label: "Gallery", href: "/gallery" },
                { label: "Packages", href: "/packages" },
                { label: "About", href: "/about" },
                { 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" }
              ]
            },
            {
              title: "Get Started",              items: [
                { label: "View Packages", href: "/packages" },
                { label: "Book Now", href: "/packages" },
                { label: "Get Quote", href: "/contact" }
              ]
            }
          ]}
          bottomLeftText="© 2024 Paintasy Face and Body Art."
          bottomRightText="Professional Event Entertainment"
        />
      </div>
    </ThemeProvider>
  );
}