"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import Link from 'next/link';
import { Sparkles, Palette, Heart, Smile, Zap, Music, Briefcase, Target, Users, Star, DollarSign, Camera, HelpCircle, Award } from 'lucide-react';
import Head from 'next/head';

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Gallery", id: "gallery" },
    { name: "Packages", id: "packages" },
    { name: "About", id: "about" },
    { name: "Booking", id: "booking" },
    { 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: "/booking" },
        { 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="hero-home" data-section="hero-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <HeroBillboardGallery
          title="Professional Face Painting & Body Art for Events"
          description="Transform your event with expert face painting and body art. Paintasy delivers professional, creative entertainment for birthday parties, festivals, corporate events, and special occasions. Book professional face painters for your celebration today."
          background={{ variant: "radial-gradient" }}
          tag="Creative Entertainment"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Your Event", href: "/booking" },
            { text: "View Our Gallery", href: "/gallery" },
          ]}
          buttonAnimation="blur-reveal"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-woman-wearing-mask_23-2148784326.jpg?_wi=2",              imageAlt: "Professional face painting at event"},
          ]}
          mediaAnimation="opacity"
          ariaLabel="Hero section with professional face painting showcase"
          className="min-h-screen"
          containerClassName="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12"
          titleClassName="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight"
          descriptionClassName="text-base sm:text-lg lg:text-xl opacity-90 max-w-2xl"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
        />
      </div>

      <div id="about-home" data-section="about-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <MetricSplitMediaAbout
          title="About Paintasy - Expert Face Painting Services"
          description="Paintasy brings creativity and color to events with professional face painting and body art services. We've been transforming celebrations and creating magical moments for hundreds of happy clients across the region. Our trained professional artists are dedicated to delivering exceptional service, vibrant designs, and unforgettable experiences for every event."
          tag="Professional Artists"
          tagIcon={Palette}
          tagAnimation="slide-up"
          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="Professional face painter creating art"
          mediaAnimation="blur-reveal"
          metrics={[
            { value: "500+", title: "Happy Events" },
            { value: "1000+", title: "Painted Faces" },
            { value: "10+", title: "Years Experience" },
            { value: "100%", title: "Client Satisfaction" },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About section with company information"
          containerClassName="gap-8 lg:gap-12"
          titleClassName="text-3xl sm:text-4xl lg:text-5xl font-extrabold"
          descriptionClassName="text-base sm:text-lg opacity-90 max-w-2xl"
        />
      </div>

      <div id="services-home" data-section="services-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <FeatureCardTen
          title="Our Face Painting & Body Art Services"
          description="Professional face painting and body art services tailored for every occasion. From intimate birthday parties to large festival events, we deliver creativity, joy, and exceptional entertainment."
          tag="Services"
          tagIcon={Palette}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          features={[
            {
              id: "kids-party",              title: "Kids Party Face Painting",              description: "Fun, colorful face painting designs perfect for birthday celebrations. Butterflies, superheroes, animals, princesses, and more.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/dreamy-eyes-woman-smiling-festival_23-2148338055.jpg?_wi=1",                imageAlt: "Kids party face painting designs"},
              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",              title: "Festival Face Art & Body Painting",              description: "Fast, creative designs perfect for large crowds and outdoor events. Artistic flair meets quick service for maximum event impact.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-putting-makeup-man_23-2149357796.jpg?_wi=1",                imageAlt: "Festival face painting artwork"},
              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",              title: "Corporate Event Entertainment",              description: "Professional face painting for company parties, brand activations, and team celebrations with branded design options.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/male-dj-party-charge-music-entertainment_23-2149658399.jpg?_wi=1",                imageAlt: "Corporate event face painting"},
              items: [
                { icon: Briefcase, text: "Professional & polished service" },
                { icon: Target, text: "Branded design options available" },
                { icon: Users, text: "Great for team building" },
              ],
              reverse: false,
            },
          ]}
          buttons={[{ text: "Explore All Services", href: "/services" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Services section showcasing face painting offerings"
          containerClassName="gap-8 lg:gap-12"
          itemClassName=""
          mediaWrapperClassName=""
        />
      </div>

      <div id="packages-home" data-section="packages-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <PricingCardFive
          title="Face Painting Event Packages"
          description="Simple, flexible pricing for face painting services at parties, festivals, and corporate events. Each package includes professional service and artistic creativity."
          tag="Transparent Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground={false}
          plans={[
            {
              id: "birthday-basic",              tag: "Popular",              price: "$150",              period: "per hour",              description: "Perfect for small birthday celebrations",              button: { text: "Request Quote", href: "/booking" },
              featuresTitle: "What's Included",              features: [
                "Up to 15 kids",                "Colorful themed designs",                "Face painting only",                "Basic design themes"],
            },
            {
              id: "birthday-deluxe",              tag: "Best Value",              price: "$200",              period: "per 2 hours",              description: "Full party entertainment package",              button: { text: "Request Quote", href: "/booking" },
              featuresTitle: "What's Included",              features: [
                "Up to 25 kids",                "Custom themed designs",                "Face & temporary tattoos",                "Interactive entertainment"],
            },
            {
              id: "festival-event",              tag: "Flexible",              price: "$250",              period: "per 3 hours",              description: "Festival and outdoor event service",              button: { text: "Request Quote", href: "/booking" },
              featuresTitle: "What's Included",              features: [
                "High-capacity crowd service",                "Fast artistic designs",                "Setup & teardown included",                "Portable station"],
            },
          ]}
          buttons={[{ text: "View All Packages", href: "/packages" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Pricing section with package options"
          containerClassName="gap-8 lg:gap-12"
          cardContentClassName=""
          planTagClassName=""
          planPriceClassName=""
        />
      </div>

      <div id="testimonials-home" data-section="testimonials-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <TestimonialCardTwo
          title="Client Testimonials - Face Painting Reviews"
          description="Real testimonials from happy clients who've booked Paintasy for their events and celebrations."
          tag="Client Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={true}
          carouselMode="buttons"
          testimonials={[
            {
              id: "testimonial-1",              name: "Sarah Johnson",              role: "Parent, Birthday Party Host",              testimonial: "Paintasy was absolutely amazing! The kids loved their face paintings and the artist was so professional and friendly. Our daughter's birthday was unforgettable!",              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: "Happy children at birthday party",              icon: Heart,
            },
            {
              id: "testimonial-2",              name: "Marcus Chen",              role: "Festival Organizer",              testimonial: "We hired Paintasy for our community festival and they were fantastic. Quick service, beautiful designs, and the crowd loved it. Booking them again next year!",              imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=1",              imageAlt: "Festival attendees enjoying face painting",              icon: Smile,
            },
            {
              id: "testimonial-3",              name: "Emily Rodriguez",              role: "Corporate Event Planner",              testimonial: "Professional, creative, and reliable. Paintasy added the perfect touch of fun to our corporate team building event. Highly recommended!",              imageSrc: "http://img.b2bpic.net/free-photo/group-young-friends-celebrating-new-year_23-2147720468.jpg",              imageAlt: "Corporate event attendees with face art",              icon: Award,
            },
            {
              id: "testimonial-4",              name: "David Kim",              role: "School Principal",              testimonial: "The face painting station at our school carnival was the highlight! Kids had so much fun, and the artist was fantastic with them. Thank you!",              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=2",              imageAlt: "Children enjoying school event face painting",              icon: Sparkles,
            },
            {
              id: "testimonial-5",              name: "Jessica Martinez",              role: "Wedding Planner",              testimonial: "Added Paintasy as entertainment for a children's wedding reception. The kids were thrilled and parents appreciated the care taken with hygiene and safety.",              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=3",              imageAlt: "Children's event face painting service",              icon: Heart,
            },
            {
              id: "testimonial-6",              name: "Thomas Wilson",              role: "Event Manager",              testimonial: "From consultation to execution, Paintasy was excellent. They delivered exactly what we envisioned for our community event. A+",              imageSrc: "http://img.b2bpic.net/free-photo/man-covered-different-colors-holi_23-2148337991.jpg?_wi=2",              imageAlt: "Community event face painting",              icon: Star,
            },
          ]}
          buttons={[{ text: "Book Now", href: "/booking" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Client testimonials section"
          containerClassName="gap-8 lg:gap-12"
          imageWrapperClassName=""
          roleClassName=""
        />
      </div>

      <div id="gallery-preview-home" data-section="gallery-preview-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <ProductCardFour
          title="Photo Gallery - Face Painting Portfolio"
          description="Real photos from our events and happy clients. Browse our portfolio of professional face painting and body art work."
          tag="Portfolio"
          tagIcon={Camera}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground={false}
          gridVariant="three-columns-all-equal-width"
          carouselMode="buttons"
          products={[
            {
              id: "gallery-1",              name: "Kids Face Painting",              price: "Colorful Designs",              variant: "Birthday Parties",              imageSrc: "http://img.b2bpic.net/free-psd/holi-festival-celebration-instagram-posts_23-2151227255.jpg?_wi=1",              imageAlt: "Collection of kids face painting designs"},
            {
              id: "gallery-2",              name: "Festival Face Art",              price: "Creative Artistry",              variant: "Outdoor Events",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1",              imageAlt: "Festival face painting artwork"},
            {
              id: "gallery-3",              name: "Body Painting Art",              price: "Professional Service",              variant: "Special Events",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-women-with-all-kinds-body_23-2149159242.jpg?_wi=1",              imageAlt: "Professional body art photography"},
            {
              id: "gallery-4",              name: "Custom Designs",              price: "Personalized Art",              variant: "Themed Events",              imageSrc: "http://img.b2bpic.net/free-photo/fun-portrait-with-decorations-face_23-2150749319.jpg?_wi=1",              imageAlt: "Custom themed face painting designs"},
          ]}
          buttons={[{ text: "View Full Gallery", href: "/gallery" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Photo gallery preview section"
          containerClassName="gap-8 lg:gap-12"
          cardNameClassName=""
          cardPriceClassName=""
        />
      </div>

      <div id="faq-home" data-section="faq-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <FaqBase
          title="Face Painting FAQ - Frequently Asked Questions"
          description="Everything you need to know about booking Paintasy for your event."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="smooth"
          faqsAnimation="slide-up"
          useInvertedBackground={true}
          showCard={true}
          faqs={[
            {
              id: "faq-1",              title: "How far in advance should I book face painting services?",              content: "We recommend booking at least 2-3 weeks in advance to secure your preferred date and time. For large events or peak seasons, 4-6 weeks advance booking is ideal. Last-minute bookings may be available depending on our schedule."},
            {
              id: "faq-2",              title: "Are your face paints safe for children?",              content: "Absolutely! We use only professional-grade, hypoallergenic face paints that are non-toxic and dermatologist-tested. All products are safe for sensitive skin. We also practice strict hygiene protocols, using clean brushes and sanitized application tools for each client."},
            {
              id: "faq-3",              title: "How long does face painting take per person?",              content: "Simple designs typically take 3-5 minutes, while more detailed or custom designs take 8-12 minutes. At festivals, we optimize for speed without sacrificing quality. For parties, we allow a bit more time for custom designs and interactions with children."},
            {
              id: "faq-4",              title: "What if someone has a skin allergy?",              content: "We have hypoallergenic options available. Please inform us of any allergies when booking. We're always happy to discuss alternative products or test patches before proceeding with full face painting."},
            {
              id: "faq-5",              title: "Can you do custom face painting designs?",              content: "Yes! We specialize in custom face painting designs for themed parties and corporate events. Please provide theme details or reference images when booking. There may be a small additional fee for very complex custom designs."},
            {
              id: "faq-6",              title: "What's included in your face painting packages?",              content: "All packages include professional face painting service, setup and teardown, and our artist's materials. Some packages include additional services like temporary tattoos or body painting. Check specific package details for what's included."},
          ]}
          buttons={[{ text: "Book Your Event", href: "/booking" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="FAQ section with common questions"
          containerClassName="gap-8 lg:gap-12"
          accordionClassName=""
          accordionTitleClassName=""
        />
      </div>

      <div id="contact-home" data-section="contact-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <ContactText
          text="Ready to add magic to your event? Get in touch with Paintasy Face and Body Art. We'd love to discuss your event and create an unforgettable experience for your guests."
          animationType="background-highlight"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Request a Quote", href: "/contact" },
            { text: "Call Us", href: "tel:+15551234567" },
          ]}
          ariaLabel="Contact call-to-action section"
          containerClassName="py-12 sm:py-16 lg:py-20"
          contentClassName="max-w-3xl mx-auto"
          textClassName="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
        />
      </div>

      <div id="footer-home" data-section="footer-home" className="mx-auto px-4 md:px-6 lg:px-8">
        <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-8 lg:gap-12"
          columnsClassName="grid-cols-2 lg:grid-cols-4"
          columnTitleClassName="font-extrabold text-lg"
          columnItemClassName="hover:opacity-70 transition-opacity"
        />
      </div>
    </ThemeProvider>
  );
}