"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';

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: "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="hero-home" data-section="hero-home" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="Paintasy Face and Body Art"
          description="Professional face painting and body art for parties, festivals, corporate events, and special occasions. Transform your event with creativity and color."
          background={{ variant: "radial-gradient" }}
          tag="Creative Entertainment"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Your Event", href: "/packages" },
            { 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",              imageAlt: "Professional face painting at event"},
          ]}
          mediaAnimation="opacity"
          ariaLabel="Hero section with face painting showcase"
          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="about-home" data-section="about-home" className="mx-auto px-4 md:px-6">
        <MetricSplitMediaAbout
          title="About Paintasy Face and Body Art"
          description="Paintasy brings creativity and color to events with professional face painting and body art. We've been transforming celebrations and creating magical moments for hundreds of happy clients. Our artists are trained professionals dedicated to delivering exceptional service, vibrant designs, and memorable experiences."
          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-12"
          titleClassName="text-4xl font-extrabold"
          descriptionClassName="text-lg opacity-90 max-w-2xl"
        />
      </div>

      <div id="services-home" data-section="services-home" className="mx-auto px-4 md:px-6">
        <FeatureCardTen
          title="Our Services"
          description="Professional face painting and body art tailored for every occasion. From intimate birthday parties to large festival events, we deliver creativity and joy."
          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 designs perfect for birthday celebrations. Butterflies, superheroes, animals, and princesses.",              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",              description: "Fast, creative designs perfect for large crowds and outdoor events. Artistic flair meets quick service.",              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.",              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 offerings"
          containerClassName="gap-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="packages-home" data-section="packages-home" className="mx-auto px-4 md:px-6">
        <PricingCardFive
          title="Event Packages"
          description="Simple, flexible pricing for 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: "/packages" },
              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: "/packages" },
              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: "/packages" },
              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-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
          cardClassName="p-8"
        />
      </div>

      <div id="testimonials-home" data-section="testimonials-home" className="mx-auto px-4 md:px-6">
        <TestimonialCardTwo
          title="What Our Clients Say"
          description="Real testimonials from happy clients who've booked Paintasy for their events."
          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: "/packages" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="Client testimonials section"
          containerClassName="gap-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="gallery-preview-home" data-section="gallery-preview-home" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          title="Photo Gallery Showcase"
          description="Real photos from our events and happy clients. Browse our portfolio of 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-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="faq-home" data-section="faq-home" className="mx-auto px-4 md:px-6">
        <FaqBase
          title="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?",              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 designs?",              content: "Yes! We specialize in custom 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 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: "/packages" }]}
          buttonAnimation="blur-reveal"
          ariaLabel="FAQ section with common questions"
          containerClassName="gap-12"
          textBoxTitleClassName="text-4xl font-extrabold"
          textBoxDescriptionClassName="text-lg opacity-90 max-w-3xl"
        />
      </div>

      <div id="contact-home" data-section="contact-home" className="mx-auto px-4 md:px-6">
        <ContactText
          text="Transform your event with professional face painting! Whether it's a birthday party, festival, or corporate gathering, Paintasy brings creativity, color, and joy to your celebration. Get in touch with us today and let's 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-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-home" data-section="footer-home" 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>
  );
}