"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Star, Users, Award, Heart, Sparkles, Zap, HelpCircle, Phone, Facebook, Instagram } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="noise"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="VR Hair & Beauty Clinic"
          navItems={[
            { name: "Services", id: "features" },
            { name: "About Us", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Transform Your Look at VR Hair & Beauty Clinic"
          description="Experience premium hair and beauty services delivered by expert stylists. From precision cuts to luxurious treatments, we transform your vision into reality with personalized care."
          tag="Professional Beauty Services"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Appointment", href: "#contact" },
            { text: "Learn More", href: "#features" }
          ]}
          buttonAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/female-client-getting-her-hair-dried-hairdresser_23-2150771293.jpg"
          imageAlt="Luxury salon interior at VR Hair & Beauty Clinic"
          mediaAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202435.jpg", alt: "Expert stylist" },
            { src: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg", alt: "Satisfied client" },
            { src: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg", alt: "Beauty specialist" },
            { src: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg", alt: "Happy customer" }
          ]}
          avatarText="Trusted by 615+ Happy Clients"
          ariaLabel="Hero section for VR Hair & Beauty Clinic"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Why Choose VR Hair & Beauty Clinic"
          metrics={[
            { icon: Star, label: "Client Rating", value: "4.1/5" },
            { icon: Users, label: "Satisfied Clients", value: "615+" },
            { icon: Award, label: "Years Experience", value: "7+" },
            { icon: Heart, label: "Expert Stylists", value: "10+" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About metrics section"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardMedia
          title="Our Premium Services"
          description="We offer a complete range of hair and beauty services tailored to your unique needs."
          tag="Expert Services"
          tagIcon={Zap}
          tagAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: "haircut",              title: "Professional Haircuts",              description: "Expert styling from skilled stylists who understand your face shape and style preferences. Every cut is personalized for your unique beauty.",              tag: "Precision",              imageSrc: "http://img.b2bpic.net/free-photo/executive-is-always-touch-with-her-clients_329181-15267.jpg",              imageAlt: "Professional haircut service",              buttons: [{ text: "Book Now", href: "#contact" }]
            },
            {
              id: "treatment",              title: "Hair Treatments & Therapy",              description: "Revitalize your hair with our premium treatment options. From hydration therapy to keratin treatments, experience luxury wellness.",              tag: "Wellness",              imageSrc: "http://img.b2bpic.net/free-photo/man-giving-himself-scalp-massage_23-2151307466.jpg",              imageAlt: "Hair treatment therapy service",              buttons: [{ text: "Book Now", href: "#contact" }]
            },
            {
              id: "makeup",              title: "Beauty & Makeup",              description: "Professional makeup services for all occasions. Our beauty experts enhance your natural features with precision and artistry.",              tag: "Artistry",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-stylist-applying-powder-model_23-2147783867.jpg",              imageAlt: "Professional makeup application",              buttons: [{ text: "Book Now", href: "#contact" }]
            }
          ]}
          animationType="slide-up"
          carouselMode="buttons"
          ariaLabel="Services feature section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            { id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202435.jpg", imageAlt: "Sarah Johnson testimonial" },
            { id: "2", name: "Priya Patel", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg", imageAlt: "Priya Patel testimonial" },
            { id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg", imageAlt: "Emily Rodriguez testimonial" },
            { id: "4", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg", imageAlt: "Michael Chen testimonial" },
            { id: "5", name: "Jessica Williams", imageSrc: "http://img.b2bpic.net/free-photo/smiling-brunette-girl-posing-with-coat_23-2148135970.jpg", imageAlt: "Jessica Williams testimonial" },
            { id: "6", name: "David Kumar", imageSrc: "http://img.b2bpic.net/free-photo/carefree-woman-with-alluring-appearance-wonderful-shining-hair-wearing-black-leather-jacket_176532-8115.jpg", imageAlt: "David Kumar testimonial" }
          ]}
          cardTitle="Loved by Our Clients"
          cardTag="Verified Reviews"
          cardTagIcon={Heart}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
          ariaLabel="Testimonials section"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted Beauty Partners"
          description="We collaborate with premium beauty brands and trusted partners to deliver the best services and products."
          tag="Premium Partnerships"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          names={["Lakme Beauty", "Wella Professionals", "L'Oreal Professionnel", "Schwarzkopf", "Matrix", "Kérastase", "Moroccanoil"]}
          logos={[
            "http://img.b2bpic.net/free-vector/gradient-oscars-film-awards-background_23-2151213857.jpg",            "http://img.b2bpic.net/free-vector/colorful-wedding-monogram-collection-template_23-2148474220.jpg",            "http://img.b2bpic.net/free-vector/flat-hand-drawn-hair-salon-logo-collection_23-2148849723.jpg",            "http://img.b2bpic.net/free-psd/marketing-template-design_23-2151119894.jpg",            "http://img.b2bpic.net/free-vector/hand-drawn-hair-salon-logo-collection_23-2148864504.jpg",            "http://img.b2bpic.net/free-vector/minimal-logo-set_53876-94208.jpg",            "http://img.b2bpic.net/free-vector/gradient-luxury-logo-template_23-2150816442.jpg",            "http://img.b2bpic.net/free-vector/cruelty-free-hand-drawn-badge-set_23-2148796637.jpg"
          ]}
          speed={40}
          showCard={true}
          ariaLabel="Social proof section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services, pricing, and booking process."
          tag="Common Questions"
          tagIcon={HelpCircle}
          tagAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          faqs={[
            { id: "1", title: "How do I book an appointment?", content: "You can book an appointment through our contact form or by calling us at 079890 79894. We typically have availability within 24-48 hours. Our friendly staff will help find the perfect time for your preferred service." },
            { id: "2", title: "What is your cancellation policy?", content: "We request 24 hours notice for cancellations. Cancellations made within 24 hours may be subject to a 50% booking fee. Emergency cancellations are understood and handled case-by-case." },
            { id: "3", title: "Do you offer trial styling consultations?", content: "Yes! We offer free consultation to discuss your style goals. Our expert stylists will assess your hair and recommend the best options tailored to your face shape and lifestyle." },
            { id: "4", title: "What brands do you use for treatments?", content: "We use premium professional brands including Lakme, L'Oreal Professionnel, Wella, Schwarzkopf, and Moroccanoil. All products are salon-grade and suited for specific hair types." },
            { id: "5", title: "Are there parking facilities available?", content: "Yes, we have convenient parking at our location in Vytla Villa, 100 Ft Ring Rd, Dharmapuri. Ample parking space is available for all our clients." },
            { id: "6", title: "Do you offer group bookings or package deals?", content: "Absolutely! We offer special packages for group bookings, events, and wedding parties. Contact us for customized quotes and arrangement options." }
          ]}
          faqsAnimation="blur-reveal"
          animationType="smooth"
          ariaLabel="FAQ section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get in Touch"
          title="Book Your Beauty Transformation"
          description="Ready to experience premium beauty services? Contact us today to schedule your appointment or learn more about our offerings."
          tagIcon={Phone}
          tagAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-doctor-checking-patient_23-2149726923.jpg"
          imageAlt="Contact VR Hair & Beauty Clinic"
          mediaAnimation="blur-reveal"
          inputPlaceholder="Enter your email"
          buttonText="Get in Touch"
          termsText="By submitting, you agree to our Terms and Privacy Policy."
          ariaLabel="Contact section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="VR Hair & Beauty Clinic"
          copyrightText="© 2025 VR Hair & Beauty Clinic. All rights reserved."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Follow on Facebook" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow on Instagram" },
            { icon: Phone, href: "tel:07989079894", ariaLabel: "Call us" }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}