"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 FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, Palette, Heart, Smile, Zap, Music, Star, DollarSign } from 'lucide-react';

export default function ServicesPage() {
  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="services-hero" data-section="services-hero" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="Our Professional Services"
          description="Discover our complete range of face painting and body art services. Whether you're planning a kids' birthday party, organizing a festival, or hosting a corporate event, we have the perfect creative solution for you."
          background={{ variant: "radial-gradient" }}
          tag="Professional Services"
          tagIcon={Palette}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Your Event", href: "/packages" },
            { text: "Request a Quote", href: "/contact" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg?_wi=3",              imageAlt: "Professional face painting artist at work"},
          ]}
          mediaAnimation="opacity"
          ariaLabel="Services page 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="services-details" data-section="services-details" className="mx-auto px-4 md:px-6">
        <FeatureCardTen
          title="Service Offerings"
          description="Each service is tailored to your event needs with professional artists, high-quality materials, and attention to detail."
          tag="What We Offer"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          features={[
            {
              id: "kids-party-service",              title: "Kids Party Face Painting",              description: "Transform children's faces into their favorite characters and creatures with our vibrant, playful designs. Perfect for birthday celebrations, creating magical moments and lasting memories.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",                imageAlt: "Colorful kids party face painting designs"},
              items: [
                { icon: Sparkles, text: "Fun character designs" },
                { icon: Heart, text: "Safe for sensitive skin" },
                { icon: Smile, text: "Quick & efficient service" },
              ],
              reverse: false,
            },
            {
              id: "festival-service",              title: "Festival Face Art",              description: "Eye-catching, artistic designs crafted at speed for crowds. Our festival service combines creative artistry with quick turnaround, perfect for outdoor events and high-traffic areas.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",                imageAlt: "Festival face art creative designs"},
              items: [
                { icon: Zap, text: "Fast professional service" },
                { icon: Star, text: "Artistic & bold designs" },
                { icon: Music, text: "Event-ready atmosphere" },
              ],
              reverse: true,
            },
          ]}
          buttons={[{ text: "Book a Service", href: "/packages" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Detailed services section"
          containerClassName="gap-12"
          itemClassName=""
          mediaWrapperClassName=""
        />
      </div>

      <div id="services-faq" data-section="services-faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          title="Service FAQs"
          description="Common questions about our face painting and body art services."
          tag="Questions?"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="smooth"
          faqsAnimation="slide-up"
          useInvertedBackground={true}
          showCard={true}
          faqs={[
            {
              id: "service-faq-1",              title: "How many children can you paint at a party?",              content: "Depending on the party duration and design complexity, we can typically paint 15-25 children per hour. For birthday parties, we recommend 2-3 hours for groups of 10-20 kids, allowing time for custom designs and interactions."},
            {
              id: "service-faq-2",              title: "What designs are available for kids' parties?",              content: "We offer classic designs like butterflies, superheroes, animals, pirates, princesses, and more. We can also create custom designs based on party themes. Browse our portfolio for inspiration, and we'll work with you to bring your vision to life."},
            {
              id: "service-faq-3",              title: "Are the face paints waterproof?",              content: "Our professional-grade paints are water-resistant and designed to last for several hours. They're not fully waterproof but are durable enough for most outdoor activities. We recommend avoiding prolonged water exposure immediately after application."},
            {
              id: "service-faq-4",              title: "Can you accommodate large festival events?",              content: "Absolutely! We specialize in festival and outdoor event services. For large crowds, we can work quickly without compromising quality. We bring all necessary equipment and set up an efficient service station that can handle high volume."},
            {
              id: "service-faq-5",              title: "Do you offer body painting services?",              content: "Yes, we offer professional body painting for special events, themed parties, and artistic projects. Body painting takes longer than face painting but creates stunning visual effects. Contact us to discuss your specific needs."},
            {
              id: "service-faq-6",              title: "What is your hygiene protocol?",              content: "We follow strict hygiene standards. We use clean, sanitized brushes and applicators for each client. We also offer touchless application methods for those with sensitivities. All materials are professional-grade and hypoallergenic."},
          ]}
          buttons={[{ text: "Book Your Service", href: "/packages" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Services FAQ section"
          containerClassName="gap-12"
          accordionClassName=""
          accordionTitleClassName=""
        />
      </div>

      <div id="services-contact" data-section="services-contact" className="mx-auto px-4 md:px-6">
        <ContactText
          text="Ready to book one of our services? Get in touch today! We'll work with you to customize the perfect face painting and body art experience for your event."
          animationType="background-highlight"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Request a Quote", href: "/contact" },
            { text: "Book Now", href: "/packages" },
          ]}
          ariaLabel="Services contact call-to-action"
          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="services-footer" data-section="services-footer" 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>
  );
}