"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Award, Zap, Camera, Check, Star, HelpCircle, ArrowRight } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Nails"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Gallery", id: "gallery" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Elevate Your Nails to Luxe"
          description="Experience world-class nail artistry and premium pampering. From stunning gel designs to intricate nail art, we transform your nails into masterpieces in sunny Southern California."
          background={{ variant: "sparkles-gradient" }}
          tag="Premium Nail Services"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/vertical-closeup-woman-s-hand-with-white-manicure_181624-61773.jpg"
          imageAlt="Beautiful luxury nail art designs"
          buttons={[
            { text: "Book Your Appointment", href: "contact" },
            { text: "View Our Gallery", href: "gallery" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Luxe Nails"
          tagIcon={Award}
          title="Precision, Artistry, and Passion for Perfect Nails"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Meet Our Team", href: "services" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Our Premium Services"
          description="Discover our full range of professional nail services designed to enhance your natural beauty and express your personal style."
          tag="Services"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Gel Manicures",              description: "Long-lasting, vibrant gel polish that stays pristine for weeks with our expert application technique.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Acrylic Nails",              description: "Durable acrylic extensions sculpted to perfection, with endless design possibilities and customization options.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Nail Art Design",              description: "Custom artistic designs featuring hand-painted details, gems, and creative patterns for truly unique nails.",              bentoComponent: "globe"
            },
            {
              title: "Pedicures",              description: "Luxurious foot care treatments combining relaxation with professional pampering and stunning nail designs.",              bentoComponent: "map"
            }
          ]}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <FeatureCardTwentySix
          title="Our Nail Art Gallery"
          description="Browse our stunning collection of nail designs showcasing our artists' creativity and technical expertise."
          tag="Gallery"
          tagIcon={Camera}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              title: "Floral Paradise",              description: "Delicate hand-painted flowers with layered gel for a botanical masterpiece.",              imageSrc: "https://img.b2bpic.net/free-photo/cute-baby_624325-1664.jpg",              imageAlt: "Floral nail art design",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Ombre Gradient",              description: "Smooth color transitions creating sophisticated ombre effects perfect for any occasion.",              imageSrc: "https://img.b2bpic.net/free-photo/caring-young-mother-kissing-babys-feet-close-up_169016-37223.jpg",              imageAlt: "Ombre gradient nail design",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Glamorous Sparkle",              description: "Bedazzled designs with premium gems and glitter for maximum shine and elegance.",              imageSrc: "https://img.b2bpic.net/free-photo/graceful-thin-fingers-girl-with-trendy-pastel-nude-manicure-fluffy-soft-sweater-cute-silver-ring-bow_343596-7953.jpg",              imageAlt: "Sparkly gem nail design",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Modern Minimalist",              description: "Clean lines and neutral tones for sophisticated, understated elegance that never goes out of style.",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-closeup-woman-s-hand-with-white-manicure_181624-61773.jpg",              imageAlt: "Minimalist nail design",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "3D Texture Art",              description: "Dimensional designs with textured elements creating depth and visual interest on your nails.",              imageSrc: "https://img.b2bpic.net/free-photo/cute-baby_624325-1664.jpg",              imageAlt: "3D textured nail art",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            },
            {
              title: "Seasonal Collection",              description: "Limited-edition designs inspired by current trends and seasonal themes throughout the year.",              imageSrc: "https://img.b2bpic.net/free-photo/vertical-closeup-woman-s-hand-with-white-manicure_181624-61773.jpg",              imageAlt: "Seasonal nail designs",              buttonIcon: ArrowRight,
              buttonHref: "contact"
            }
          ]}
        />
      </div>

      <div id="comparison" data-section="comparison">
        <FeatureCardSixteen
          title="Why Choose Luxe Nails"
          description="See what sets us apart from other nail salons in Southern California."
          tag="Why Us"
          tagIcon={Check}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          negativeCard={{
            items: [
              "Generic salon experiences",              "Rushed appointments",              "One-size-fits-all designs",              "Inconsistent quality"
            ]
          }}
          positiveCard={{
            items: [
              "Personalized consultations and custom designs",              "Unhurried, relaxing luxury experience",              "Unique artistic creations tailored to you",              "Premium products and expert techniques",              "Professional certification and continuous training"
            ]
          }}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TextAbout
          tag="Client Reviews"
          tagIcon={Star}
          title="Loved by Our Clients - See What They're Saying About Luxe Nails"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about our services, pricing, and nail care."
          tag="FAQ"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/soft-photo-woman-hand-red-manicure-ring-finger-hold-cute-yellow-little-dry-flower-white_343596-3274.jpg"
          imageAlt="Professional nail technician providing manicure service"
          mediaPosition="left"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How long do gel manicures typically last?",              content: "Gel manicures typically last 2-3 weeks depending on your nail growth and daily activities. We use premium gel products that maintain their shine and color throughout this period."
            },
            {
              id: "2",              title: "What is the difference between gel and acrylic nails?",              content: "Gel nails are made from a gel polish that hardens under UV light and feels more natural, while acrylics are made from a powder and liquid mixture that creates stronger, more durable nails. Both are long-lasting but offer different aesthetics and durability levels."
            },
            {
              id: "3",              title: "How do I care for my nails between appointments?",              content: "Keep your nails moisturized with cuticle oil, avoid using nails as tools, wear gloves when cleaning, and minimize water exposure. We provide detailed aftercare instructions with each appointment."
            },
            {
              id: "4",              title: "Do you offer custom nail art designs?",              content: "Absolutely! We specialize in custom designs. Bring inspiration photos, describe your vision, or let our artists create something unique for you. Custom designs may have additional charges depending on complexity."
            },
            {
              id: "5",              title: "How far in advance should I book my appointment?",              content: "We recommend booking 1-2 weeks in advance, especially for weekends and special occasions. However, we often have availability for last-minute appointments depending on our schedule."
            },
            {
              id: "6",              title: "What is your cancellation policy?",              content: "We ask for 24 hours notice for cancellations or rescheduling. Cancellations made less than 24 hours before your appointment may incur a cancellation fee."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <FooterLogoReveal
          logoText="Luxe Nails"
          leftLink={{
            text: "Privacy Policy",            href: "privacy"
          }}
          rightLink={{
            text: "Book Now",            href: "contact"
          }}
        />
      </div>
    </ThemeProvider>
  );
}