"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Sparkles, Star, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Packages",          id: "#packages"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="LPS Beauty Salon & Nail Art Studio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-static"}}
      title="LPS Beauty Salon & Nail Art Studio"
      description="Your one-stop destination for all things beauty in BTM Layout, Bangalore! Indulge in exquisite nail art, stylish haircuts, rejuvenating facials, and more."
      buttons={[
        {
          text: "Book Appointment",          href: "#contact"},
        {
          text: "View Services",          href: "#services"},
      ]}
      carouselItems={[
        {
          id: "carousel-1",          imageSrc: "http://img.b2bpic.net/free-photo/vertical-closeup-woman-s-hand-with-white-manicure_181624-61773.jpg",          imageAlt: "Nail Art Service"},
        {
          id: "carousel-2",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-taking-care-her-client_23-2149319802.jpg",          imageAlt: "Haircut Service"},
        {
          id: "carousel-3",          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-mascara_1157-15460.jpg",          imageAlt: "Facial Treatment"},
        {
          id: "carousel-4",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-bathtub-shaving-her-legs_23-2148389894.jpg",          imageAlt: "Waxing Service"},
        {
          id: "carousel-5",      imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-sitting-table_23-2149708133.jpg",          imageAlt: "Salon Exterior"},
        {
          id: "carousel-6",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-flowers-with-decorative-objects-living-room_169016-5968.jpg",          imageAlt: "Client Relaxation"},
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={true}
      title="About Our Studio"
      description={[
        "At LPS Beauty Salon & Nail Art Studio, we believe in pampering our clients with the highest quality services. Located in BTM Layout, Bangalore, our studio is a haven where beauty meets relaxation. Our dedicated team of professionals is committed to making you look and feel your absolute best.",        "We offer a wide range of services including intricate nail art, precision haircuts, revitalizing facials, and gentle waxing. With over 321 happy clients and a 4.8-star rating, we strive to create a warm and welcoming environment for everyone."]}
      buttons={[
        {
          text: "Learn More"},
      ]}
      buttonAnimation="slide-up"
      showBorder={false}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Our Signature Services"
      description="Discover a world of beauty tailored to your needs. From dazzling nail designs to transformative hair treatments, we ensure every visit leaves you feeling refreshed and beautiful."
      accordionItems={[
        {
          id: "nail-art",          title: "Nail Art & Extensions",          content: "Express your unique style with our exquisite nail art designs and professional nail extensions, from classic manicures to trending styles."},
        {
          id: "haircuts",          title: "Haircuts & Styling",          content: "Transform your look with precision haircuts, expert coloring, and trendy styling services for all hair types."},
        {
          id: "facials",          title: "Rejuvenating Facials",          content: "Indulge in our range of facials designed to cleanse, hydrate, and revitalize your skin, leaving you with a radiant glow."},
        {
          id: "waxing",          title: "Smooth Waxing Services",          content: "Experience gentle and effective waxing services for silky smooth skin, carried out by our skilled professionals."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/top-view-decoration-with-different-make-up-brushes_23-2148299641.jpg"
      imageAlt="Various beauty salon tools and products"
      mediaAnimation="entrance-slide"
      mediaPosition="left"
    />
  </div>

  <div id="packages" data-section="packages">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "glow-up",          badge: "Popular",          badgeIcon: Sparkles,
          price: "₹1,999",          subtitle: "Radiant Refresh",          buttons: [
            {
              text: "Select Package",              href: "#contact"},
          ],
          features: [
            "Classic Manicure & Pedicure",            "Basic Facial",            "Hair Wash & Blow Dry"],
        },
        {
          id: "ultimate-pamper",          badge: "Best Value",          badgeIcon: Star,
          price: "₹3,499",          subtitle: "Complete Indulgence",          buttons: [
            {
              text: "Select Package",              href: "#contact"},
          ],
          features: [
            "Luxury Nail Art & Extensions",            "Signature Facial",            "Advanced Haircut & Styling",            "Full Body Waxing"],
        },
        {
          id: "quick-glam",          badge: "New",          badgeIcon: Zap,
          price: "₹999",          subtitle: "Express Beauty",          buttons: [
            {
              text: "Select Package",              href: "#contact"},
          ],
          features: [
            "Express Manicure",            "Eyebrow Threading",            "Quick Hair Style"],
        },
      ]}
      title="Exclusive Beauty Packages"
      description="Experience our most popular combinations of services at special prices. Perfect for a complete glow-up or a relaxing day of pampering."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "stars",          value: "4.8",          title: "Star Rating",          items: [
            "Consistently High Scores",            "Trusted by Many"],
        },
        {
          id: "clients",          value: "321+",          title: "Happy Clients",          items: [
            "Loyal Customer Base",            "Growing Community"],
        },
        {
          id: "experience",          value: "5+",          title: "Years of Experience",          items: [
            "Skilled Professionals",            "Trendsetting Styles"],
        },
      ]}
      title="Why Clients Love Us"
      description="Our commitment to excellence and personalized care has earned us glowing reviews and a loyal clientele. We prioritize your satisfaction."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Priya Sharma",          role: "Customer",          company: "Regular Client",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-enjoying-new-year-s-eve-party_23-2148724179.jpg"},
        {
          id: "2",          name: "Rahul Verma",          role: "Client",          company: "First-time Visitor",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/positive-hipster-male-dressed-black-t-shirt-holds-head-with-tattooed-arms_613910-9176.jpg"},
        {
          id: "3",          name: "Anjali Singh",          role: "Beauty Enthusiast",          company: "Fashion Blogger",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-doing-self-care-treatment-indoors_23-2148974277.jpg"},
        {
          id: "4",          name: "Mrs. Kavita Rao",          role: "Long-term Client",          company: "Local Resident",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-father-kid-home_23-2149610748.jpg"},
        {
          id: "5",          name: "Deepa Reddy",          role: "Nail Art Lover",          company: "Creative Professional",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/female-artist-showing-her-painted-messy-hands_53876-105146.jpg"},
      ]}
      title="What Our Clients Say"
      description="Don't just take our word for it – hear from our wonderful clients who trust us with their beauty needs and appreciate our personal touch."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "How do I book an appointment?",          content: "You can book an appointment by calling us directly at +91 99009 14999, or by visiting our studio during business hours. Online booking will be available soon!"},
        {
          id: "q2",          title: "What are your operating hours?",          content: "We are open until 9 PM, seven days a week, to accommodate your busy schedule. Please check our contact section for exact daily timings."},
        {
          id: "q3",          title: "Do you offer gift vouchers?",          content: "Yes, we offer customisable gift vouchers perfect for treating your loved ones to a luxurious beauty experience. Inquire at our reception for more details."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about our services, booking, and studio policies."
      faqsAnimation="entrance-slide"
      showCard={true}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Book Now"
      title="Visit Us Today!"
      description="Ready for your beauty transformation? Book an appointment or walk-in to our studio in BTM Layout, Bangalore. We're open until 9 PM!"
      buttons={[
        {
          text: "Call Us: +91 99009 14999",          href: "tel:+919900914999"},
        {
          text: "Get Directions",          href: "https://www.google.com/maps/search/21st+Main,+3rd+Cross+Rd,+BTM+Layout+2nd+Stage,+Bangalore"},
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qgyk5j"
      logoAlt="LPS Beauty Salon & Nail Art Studio Logo"
      columns={[
        {
          items: [
            {
              label: "Nail Art",              href: "#services"},
            {
              label: "Haircuts",              href: "#services"},
            {
              label: "Facials",              href: "#services"},
            {
              label: "Waxing",              href: "#services"},
          ],
        },
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "FAQs",              href: "#faq"},
            {
              label: "Packages",              href: "#packages"},
          ],
        },
        {
          items: [
            {
              label: "21st Main, 3rd Cross Rd, BTM Layout 2nd Stage, Bangalore",              href: "https://www.google.com/maps/search/21st+Main,+3rd+Cross+Rd,+BTM+Layout+2nd+Stage,+Bangalore"},
            {
              label: "+91 99009 14999",              href: "tel:+919900914999"},
            {
              label: "Open until 9 PM",              href: "#"},
          ],
        },
      ]}
      logoText="LPS Beauty Salon & Nail Art Studio"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
