"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Eye, Feather, Palette, Scissors, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeMediumTitles"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Products",          id: "#products"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Lash & Brow Artistry"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Enhance Your Natural Beauty"
      description="Expert lash extensions, brow shaping, and beauty treatments tailored to perfect your unique style and bring out your inner radiance."
      testimonials={[
        {
          name: "Sophia R.",          handle: "@sophia_beauty",          testimonial: "My lashes have never looked better! The artists here are truly skilled and made me feel so comfortable. I always leave feeling beautiful and confident.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/senior-man-talking-phone_23-2148404354.jpg"},
        {
          name: "Olivia C.",          handle: "@olivia.glows",          testimonial: "The brow lamination totally transformed my face. It’s exactly what I needed! The salon is pristine and the staff are incredibly friendly.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-asian-woman-posing-towel-after-shower_197531-19624.jpg"},
        {
          name: "Emma W.",          handle: "@emma_styled",          testimonial: "Absolutely love my volume lashes! They are so light and fluffy, and I constantly get compliments. This is my go-to place for all things beauty.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/illustration-beauty-cosmetics-makeover-skincare-mobile-phone_53876-125020.jpg"},
        {
          name: "Mia K.",          handle: "@mia_lashes",          testimonial: "Fantastic experience from start to finish. My lash lift is flawless, and the attention to detail is remarkable. Highly recommend!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-african-american-girl-looking-away_1262-3098.jpg"},
        {
          name: "Chloe B.",          handle: "@chloe_glam",          testimonial: "I was hesitant about getting my brows done, but the team here made it an amazing experience. They perfectly understood my vision.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-redhead-female-barista-drinks-coffee-coffee-shop_613910-4782.jpg"},
      ]}
      testimonialRotationInterval={5000}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands-d_1258-123449.jpg",          alt: "Client Sophia R."},
        {
          src: "http://img.b2bpic.net/free-photo/fashion-portrait-beautiful-girl-city_1301-3510.jpg",          alt: "Client Olivia C."},
        {
          src: "http://img.b2bpic.net/free-photo/sucsessful-businesswoman-studio-isolated-grey_613910-11320.jpg",          alt: "Client Emma W."},
        {
          src: "http://img.b2bpic.net/free-photo/devious-tricky-young-girl-have-excellent-plan-smirking-delighted-mysteriously-look-upper-left-corner-smiling-have-idea-thoughtfully-twiddles-fingers-standing-rejoicing-blue-background_1258-57042.jpg",          alt: "Client Mia K."},
        {
          src: "http://img.b2bpic.net/free-photo/successful-businesswoman-smiling-looking-confident-happy-standing-suit-street-leans-her_1258-193996.jpg",          alt: "Client Chloe B."},
      ]}
      avatarText="Loved by over 500+ happy clients!"
      imageSrc="http://img.b2bpic.net/free-photo/home-plant-vase-decoration-composition_23-2149090621.jpg"
      imageAlt="Luxurious beauty salon interior with soft lighting and comfortable treatment beds."
      showBlur={true}
      textPosition="bottom"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Our Commitment to Radiance"
      description="With years of passionate experience and a dedication to perfection, we provide personalized beauty solutions designed to enhance your natural features. Our certified professionals use only premium products and the latest techniques to ensure stunning, lasting results."
      metrics={[
        {
          value: "5+",          title: "Years Experience"},
        {
          value: "1000+",          title: "Happy Clients"},
        {
          value: "Certified",          title: "Professionals"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg"
      imageAlt="Esthetician performing a beauty treatment on a client's face, focusing on precision and care."
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureHoverPattern
      animationType="scale-rotate"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Sparkles,
          title: "Classic Lash Extensions",          description: "Achieve a natural, elegant look with individual lash extensions that add length and a subtle curl."},
        {
          icon: Eye,
          title: "Volume Lash Extensions",          description: "Experience dramatic fullness and lush density with our handcrafted volume fans for a glamorous effect."},
        {
          icon: Feather,
          title: "Brow Lamination",          description: "Transform unruly brows into perfectly sculpted arches with our professional lamination treatment."},
        {
          icon: Palette,
          title: "Eyebrow Tinting",          description: "Define and darken your brows with a custom tint, creating a fuller and more polished appearance."},
        {
          icon: Scissors,
          title: "Brow Shaping & Waxing",          description: "Precision shaping and gentle waxing to create the perfect brow frame for your face."},
      ]}
      title="Our Signature Beauty Services"
      description="Explore our comprehensive range of specialized treatments, meticulously designed to enhance your eyes and complete your perfect look."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Lash Cleanser Foam",          price: "$25.00",          imageSrc: "http://img.b2bpic.net/free-photo/beauty-cosmetics-product-with-soft-pink-tones_23-2151005562.jpg",          imageAlt: "Lash cleanser foam bottle with gentle brush"},
        {
          id: "p2",          name: "Brow Growth Serum",          price: "$48.00",          imageSrc: "http://img.b2bpic.net/free-photo/nail-serum-with-transparent-bottle_23-2149046481.jpg",          imageAlt: "Brow growth serum bottle with applicator"},
        {
          id: "p3",          name: "Silk Pillowcase",          price: "$59.00",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-woman-practicing-selfcare_23-2150396220.jpg",          imageAlt: "Soft white silk pillowcase"},
        {
          id: "p4",          name: "Lash Applicator Brushes (50-pack)",          price: "$15.00",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-rimmel-white-background_23-2148210693.jpg",          imageAlt: "Disposable lash applicator brushes"},
        {
          id: "p5",          name: "Natural Eyeshadow Palette",          price: "$38.00",          imageSrc: "http://img.b2bpic.net/free-photo/makeup-palette_1385-1054.jpg",          imageAlt: "Neutral tone eyeshadow palette"},
        {
          id: "p6",          name: "Hydrating Eye Cream",          price: "$32.00",          imageSrc: "http://img.b2bpic.net/free-photo/luxury-cream-jar-silk-fabric_9975-134546.jpg",          imageAlt: "Small jar of hydrating eye cream"},
      ]}
      title="Premium Aftercare & Beauty Products"
      description="Maintain your radiant look and extend the life of your treatments with our curated selection of high-quality lash and brow essentials."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "classic",          title: "The Classic Touch",          price: "$120",          period: "initial set",          features: [
            "Full set of classic extensions",            "Custom styling & mapping",            "Aftercare kit included",            "Complimentary lash cleanse"],
          button: {
            text: "Book Classic Set",            href: "#contact"},
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-wearing-blue-eyeliner_23-2148980318.jpg",          imageAlt: "Woman with classic lash extensions"},
        {
          id: "glamour",          title: "Glamour Volume",          price: "$180",          period: "initial set",          features: [
            "Full set of volume extensions",            "Custom density & length",            "Advanced aftercare advice",            "Lash bath & priming"],
          button: {
            text: "Book Volume Set",            href: "#contact"},
          imageSrc: "http://img.b2bpic.net/free-photo/female-model-with-animation-makeup_114579-6276.jpg",          imageAlt: "Woman with glamour volume lash extensions"},
        {
          id: "brow",          title: "Ultimate Brow Makeover",          price: "$95",          period: "per session",          features: [
            "Brow lamination & tint",            "Precision shaping & wax",            "Nourishing brow serum",            "Consultation & aftercare"],
          button: {
            text: "Book Brow Makeover",            href: "#contact"},
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-going-through-microblading-treatment_23-2149238722.jpg",          imageAlt: "Woman with perfectly laminated and tinted eyebrows"},
      ]}
      title="Tailored Beauty Packages"
      description="Discover the perfect treatment plan that fits your unique needs and helps you achieve your desired radiant look. Our packages are designed for optimal results and lasting beauty."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",          name: "Sarah Johnson",          role: "Marketing Specialist",          company: "Bloom Digital",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-black-girl-happy-expression_1194-4239.jpg"},
        {
          id: "t2",          name: "Michael Chen",          role: "Creative Director",          company: "Artisan Studio",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67156.jpg"},
        {
          id: "t3",          name: "Emily Rodriguez",          role: "Event Planner",          company: "Elite Events",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-two-young-nice-ladies-standing-discussing-work-while-holding-tablet-cup-coffee-hands-office_574295-4572.jpg"},
        {
          id: "t4",          name: "David Kim",          role: "Fitness Coach",          company: "Peak Performance",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-home-using-make-up-brush_23-2148817247.jpg"},
        {
          id: "t5",          name: "Jessica Lee",          role: "Fashion Blogger",          company: "Style Savvy",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-beauty-portrait_23-2149400923.jpg"},
      ]}
      kpiItems={[
        {
          value: "5-Star",          label: "Rating"},
        {
          value: "98%",          label: "Satisfaction"},
        {
          value: "Happy",          label: "Clients"},
      ]}
      title="What Our Clients Say"
      description="Hear directly from our delighted clients who have experienced exceptional beauty transformations and five-star service at our studio."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "How long do lash extensions last?",          content: "Typically, lash extensions last 2-4 weeks with proper aftercare and regular fills. Factors like your natural lash cycle and lifestyle can affect their retention."},
        {
          id: "faq2",          title: "Is brow lamination suitable for everyone?",          content: "Brow lamination is generally suitable for most individuals, especially those with unruly, sparse, or downward-growing brow hairs. A patch test is recommended for sensitive skin."},
        {
          id: "faq3",          title: "What is the aftercare for lash extensions?",          content: "Avoid water and steam for the first 24-48 hours. Cleanse lashes daily with a specific lash cleanser, brush them gently, and avoid oil-based products around the eyes. Do not pull or rub your lashes."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about our lash, beauty, and eyebrow services, booking policies, and aftercare tips."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="Book Your Appointment"
      title="Get in Touch"
      description="Ready to transform your look? Contact us today to schedule your consultation or inquire about our services. We look forward to hearing from you!"
      inputPlaceholder="Enter your email"
      buttonText="Book Now"
      termsText="By clicking 'Book Now' you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Lash & Brow Artistry"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
