"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 PricingCardFive from '@/components/sections/pricing/PricingCardFive';
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, Briefcase, Target, Users, Star, DollarSign, Camera, HelpCircle, Award } from 'lucide-react';

export const metadata = {
  title: "Services - Paintasy Face and Body Art",  description: "Explore our complete range of face painting and body art services for parties, festivals, corporate events, and special occasions. Professional artists delivering creative entertainment."};

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "services" },
    { name: "Gallery", id: "/gallery" },
    { name: "Packages", id: "packages" },
    { name: "About", id: "/#about-home" },
    { 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-home" },
        { 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="Comprehensive face painting and body art solutions for every event type. From intimate gatherings to large-scale festivals, we deliver creativity, professionalism, and unforgettable entertainment."
          background={{ variant: "radial-gradient" }}
          tag="Detailed Service Offerings"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Your Event", href: "#packages" },
            { text: "Contact Us", href: "/contact" },
          ]}
          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 services showcase"
            },
          ]}
          mediaAnimation="opacity"
          ariaLabel="Services 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" data-section="services" className="mx-auto px-4 md:px-6">
        <FeatureCardTen
          title="Complete Service Offerings"
          description="Explore our full range of professional face painting and body art services, each tailored to meet the unique needs of your event."
          tag="All Services"
          tagIcon={Palette}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          features={[
            {
              id: "kids-party",              title: "Kids Party Face Painting",              description: "Create magical moments at birthday celebrations with vibrant, playful designs. Our artists specialize in kid-friendly themes including superheroes, princesses, animals, butterflies, and fantasy characters. Each child receives personalized attention and a unique design that makes them feel special.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",                imageAlt: "Colorful kids party face painting"
              },
              items: [
                { icon: Sparkles, text: "Colorful & playful designs" },
                { icon: Heart, text: "Safe, child-friendly products" },
                { icon: Smile, text: "Quick turnaround per child" },
              ],
              reverse: false,
            },
            {
              id: "festival-face-art",              title: "Festival & Outdoor Event Face Art",              description: "Fast, high-volume service perfect for music festivals, street fairs, and outdoor celebrations. We excel at maintaining artistic quality while serving large crowds efficiently. Our portable setup adapts to any outdoor venue.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",                imageAlt: "Festival face art designs"
              },
              items: [
                { icon: Zap, text: "Fast service for crowds" },
                { icon: Star, text: "Creative artistic designs" },
                { icon: Music, text: "Perfect for music & outdoor events" },
              ],
              reverse: true,
            },
            {
              id: "corporate-events",              title: "Corporate Event Entertainment",              description: "Professional face painting for corporate team building, brand activations, company parties, and client appreciation events. We offer branded design options and maintain a polished, professional demeanor throughout.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1",                imageAlt: "Corporate event entertainment"
              },
              items: [
                { icon: Briefcase, text: "Professional & polished service" },
                { icon: Target, text: "Branded design options available" },
                { icon: Users, text: "Great for team building" },
              ],
              reverse: false,
            },
            {
              id: "body-painting",              title: "Body Painting & Large-Scale Art",              description: "Transform bodies into living canvases with stunning body art designs. Perfect for themed parties, art installations, and special occasions. We create designs that cover larger areas while maintaining artistic integrity and comfort.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1",                imageAlt: "Professional body painting art"
              },
              items: [
                { icon: Palette, text: "Artistic full-body designs" },
                { icon: Star, text: "Perfect for themed events" },
                { icon: Award, text: "Professional finish" },
              ],
              reverse: true,
            },
            {
              id: "custom-designs",              title: "Custom & Themed Designs",              description: "Request custom designs for your specific event theme. Whether you need Halloween costumes, holiday themes, or brand-specific art, we create personalized designs. Discuss your vision during consultation.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1",                imageAlt: "Custom themed face painting"
              },
              items: [
                { icon: Sparkles, text: "Fully customizable designs" },
                { icon: Palette, text: "Theme-specific artwork" },
                { icon: Heart, text: "Personalized service" },
              ],
              reverse: false,
            },
            {
              id: "special-occasions",              title: "Special Occasions & Celebrations",              description: "From weddings and anniversaries to graduations and milestone celebrations, face painting adds a unique entertainment element. We work with event planners to create the perfect atmosphere for your special day.",              media: {
                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: "Special occasion face painting"
              },
              items: [
                { icon: Heart, text: "Memorable entertainment" },
                { icon: Users, text: "Event planner coordination" },
                { icon: Star, text: "Flexible customization" },
              ],
              reverse: true,
            },
          ]}
          buttons={[{ text: "View Packages", href: "#packages" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Detailed service offerings section"
          containerClassName="gap-12"
          itemClassName=""
        />
      </div>

      <div id="packages" data-section="packages" className="mx-auto px-4 md:px-6">
        <PricingCardFive
          title="Service Packages & Pricing"
          description="Flexible pricing for all event types and sizes. Each package includes professional service, all materials, and our commitment to exceptional entertainment."
          tag="Transparent Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground={false}
          plans={[
            {
              id: "kids-party-package",              tag: "Popular",              price: "$150",              period: "per hour",              description: "Perfect for small birthday celebrations",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "What's Included",              features: [
                "Up to 15 kids",                "Colorful themed designs",                "Face painting only",                "Basic design themes"
              ],
            },
            {
              id: "party-deluxe-package",              tag: "Best Value",              tagIcon: Heart,
              price: "$200",              period: "2 hours - Best Value",              description: "Full party entertainment package",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "What's Included",              features: [
                "Up to 25 kids",                "Custom themed designs",                "Face & temporary tattoos",                "Interactive entertainment"
              ],
            },
            {
              id: "festival-package",              tag: "Flexible",              price: "$250",              period: "per 3 hours",              description: "Festival and outdoor event service",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "What's Included",              features: [
                "High-capacity crowd service",                "Fast artistic designs",                "Setup & teardown included",                "Portable station"
              ],
            },
            {
              id: "corporate-package",              tag: "Custom",              tagIcon: Briefcase,
              price: "$300",              period: "per 4 hours",              description: "Professional corporate event package",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "What's Included",              features: [
                "Professional service for 50+ guests",                "Branded design options",                "Premium face paint",                "Event coordination"
              ],
            },
            {
              id: "body-art-package",              tag: "Premium",              tagIcon: Star,
              price: "$400",              period: "per 5 hours",              description: "Full body painting service",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "What's Included",              features: [
                "Professional body art",                "Custom design creation",                "Premium materials",                "Photography-ready finish"
              ],
            },
            {
              id: "all-day-package",              tag: "Best for Large Events",              tagIcon: Award,
              price: "$600",              period: "Full day (8 hours)",              description: "Comprehensive all-day entertainment",              button: { text: "Request Quote", href: "/contact" },
              featuresTitle: "What's Included",              features: [
                "Multiple artists available",                "Unlimited design variety",                "All service types included",                "Professional coordination"
              ],
            },
          ]}
          buttons={[{ text: "Contact for Custom Quote", href: "/contact" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Service packages and pricing"
          containerClassName="gap-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
          cardClassName="p-8"
        />
      </div>

      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
        <FaqBase
          title="Service Questions"
          description="Find answers to common questions about our face painting and body art services."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          faqsAnimation="slide-up"
          useInvertedBackground={true}
          showCard={true}
          faqs={[
            {
              id: "faq-1",              title: "What face paints do you use?",              content: "We use only professional-grade, hypoallergenic face paints that are non-toxic, dermatologist-tested, and approved for use on sensitive skin. All products are water-based and easy to remove. We maintain strict hygiene standards, using fresh brushes and sanitized tools for each client."},
            {
              id: "faq-2",              title: "How far in advance should I book?",              content: "We recommend booking 2-3 weeks in advance for standard bookings. For large events, festivals, or peak season dates, 4-6 weeks is ideal. Last-minute bookings may be available depending on our schedule. Contact us to check availability."},
            {
              id: "faq-3",              title: "How long does face painting take per person?",              content: "Simple designs typically take 3-5 minutes, while custom or detailed designs take 8-12 minutes. At festivals, we optimize for speed while maintaining quality. For parties, we allow more time for interaction and personalization. Average throughput is 8-12 people per hour."},
            {
              id: "faq-4",              title: "Do you accommodate skin allergies?",              content: "Absolutely. We have hypoallergenic options available and welcome discussion of specific allergies when booking. We can perform patch tests before application and always prioritize client safety and comfort."},
            {
              id: "faq-5",              title: "Can you create custom designs?",              content: "Yes! We specialize in custom designs for themed events, corporate branding, and special occasions. Share your theme or provide reference images during booking. Complex custom designs may incur an additional fee, discussed during consultation."},
            {
              id: "faq-6",              title: "What areas do you service?",              content: "We provide local and regional coverage for parties, festivals, and events. Travel fees may apply for events outside our standard service area. Contact us to discuss your location and event details."},
            {
              id: "faq-7",              title: "Do you provide setup and teardown?",              content: "Yes, all packages include professional setup and teardown. We bring portable stations, tables, and all necessary equipment. We set up 30 minutes before your event and clean up afterward."},
            {
              id: "faq-8",              title: "What about body painting services?",              content: "Body painting is available for larger designs covering arms, legs, and torso areas. It requires longer application times and is best for smaller groups. Ideal for themed parties, art installations, or special celebrations. Inquire about custom body art pricing."},
            {
              id: "faq-9",              title: "Can I book multiple artists?",              content: "For large events, we can provide multiple artists to serve more guests efficiently. This is available through our full-day packages or custom quotes. Contact us to discuss your guest count and timeline."},
            {
              id: "faq-10",              title: "What if the event is cancelled or rescheduled?",              content: "We offer flexible rescheduling up to 7 days before your event with no penalty. Cancellations within 7 days may incur a fee. Full details are included in our booking agreement. Contact us to discuss cancellation policies."},
          ]}
          buttons={[{ text: "Book Your Service", href: "/contact" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Service FAQ section"
          containerClassName="gap-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6">
        <ContactText
          text="Ready to book your service? Contact Paintasy Face and Body Art today. Our professional artists are ready to discuss your event and create an unforgettable experience. Let's bring creativity and color to your celebration!"
          animationType="background-highlight"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Request a Quote", href: "/contact" },
            { text: "Call Us", href: "tel:+15551234567" },
          ]}
          ariaLabel="Services call-to-action 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" data-section="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>
  );
}
