"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, Crown, Diamond, Facebook, Heart, Instagram, Paintbrush, Phone, Sparkles, Star, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="small"
        sizing="largeSmallSizeLargeTitles"
        background="floatingGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "About Us",          id: "#about"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Nail Haven"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="Nail Haven"
      description="Experience unparalleled pampering and exquisite nail artistry. Your journey to perfect nails starts here."
      buttons={[
        {
          text: "Book an Appointment",          href: "#contact"},
        {
          text: "View Services",          href: "#services"},
      ]}
      buttonAnimation="opacity"
      imageSrc="https://img.b2bpic.net/free-photo/woman-showing-her-nail-art-fingernails-with-flower_23-2149820404.jpg?id=34136175"
      imageAlt="Exquisite nail artistry"
      showDimOverlay={true}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Commitment to Beauty & Care"
      metrics={[
        {
          icon: Sparkles,
          label: "Years of Experience",          value: "10+"},
        {
          icon: Heart,
          label: "Happy Clients",          value: "5,000+"},
        {
          icon: Award,
          label: "Quality Services",          value: "100%"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Manicures & Pedicures",          description: "From classic to gel, we offer a variety of services for hands and feet.",          bentoComponent: "reveal-icon",          icon: Paintbrush
        },
        {
          title: "Nail Enhancements",          description: "Achieve your desired length and strength with our premium acrylic and gel extensions.",          bentoComponent: "reveal-icon",          icon: Diamond
        },
        {
          title: "Custom Nail Art",          description: "Express your unique style with our custom designs, glitter, and intricate patterns.",          bentoComponent: "reveal-icon",          icon: Sparkles
        }
      ]}
      title="Our Signature Services"
      description="Indulge in our wide range of services, designed to leave your hands and feet feeling rejuvenated and beautiful."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "prod-1",          name: "Classic Manicure",          price: "$30",          imageSrc: "http://img.b2bpic.net/free-photo/make-up-nail-polish_23-2148109470.jpg",          imageAlt: "Classic French Manicure"},
        {
          id: "prod-2",          name: "Gel Manicure",          price: "$45",          imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-her-nail-art-fingernails-with-glass_23-2149820409.jpg",          imageAlt: "Vibrant Gel Manicure"},
        {
          id: "prod-3",          name: "Spa Pedicure",          price: "$60",          imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-woman-getting-massage-feet_23-2147821183.jpg",          imageAlt: "Relaxing Spa Pedicure"},
        {
          id: "prod-4",          name: "Acrylic Full Set",          price: "$70",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24220.jpg",          imageAlt: "Elegant Acrylic Nails"},
        {
          id: "prod-5",          name: "Custom Nail Art",          price: "$15+",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-manicure-blue-background_23-2149311585.jpg",          imageAlt: "Intricate Custom Nail Art"},
        {
          id: "prod-6",          name: "Mani-Pedi Combo",          price: "$80",          imageSrc: "http://img.b2bpic.net/free-photo/pink-gray-nail-varnish-bottles-dried-white-limonium-box-colored-background_23-2148074006.jpg",          imageAlt: "Manicure and Pedicure Combo"},
      ]}
      title="Explore Our Nail Offerings"
      description="Discover a selection of our most popular manicures, pedicures, and nail enhancements."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",          badge: "Popular",          badgeIcon: Star,
          price: "$40",          subtitle: "Essential Care",          features: [
            "Classic Manicure",            "Basic Polish Application",            "Hand Massage"],
        },
        {
          id: "premium",          badge: "Best Value",          badgeIcon: Diamond,
          price: "$75",          subtitle: "Deluxe Indulgence",          features: [
            "Gel Manicure",            "Spa Pedicure",            "Extended Massage",            "Paraffin Treatment"],
        },
        {
          id: "ultimate",          badge: "Ultimate Pamper",          badgeIcon: Crown,
          price: "$120",          subtitle: "Total Rejuvenation",          features: [
            "Gel Manicure & Pedicure",            "Custom Nail Art (2 nails)",            "Luxury Hand & Foot Spa",            "Complimentary Drink"],
        },
      ]}
      title="Transparent Pricing, Beautiful Results"
      description="Find the perfect pampering package that fits your needs and budget."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          handle: "@sarah_nails",          testimonial: "Nail Haven always exceeds my expectations! My nails look flawless every time, and the staff are incredibly friendly and talented. Highly recommend!",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-female-barber-uniform-showing-okay-gesture-isolated-pink-background_141793-118849.jpg",          imageAlt: "Sarah J. photo"},
        {
          id: "2",          name: "Emily R.",          handle: "@emily.beauty",          testimonial: "The best nail salon experience I've ever had! The ambiance is so relaxing, and my gel manicure lasted for weeks without a single chip.",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",          imageAlt: "Emily R. photo"},
        {
          id: "3",          name: "Jessica L.",          handle: "@jessica_polished",          testimonial: "I love coming to Nail Haven for my pedicures. It's truly a luxurious escape, and my feet feel incredibly soft afterwards. Fantastic service!",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-mulatto-woman-with-trendy-make-up-standing-with-arms-crossed-office-indoor-photo-female-black-employee-posing-with-international-colleagues-gently-smile_197531-3788.jpg",          imageAlt: "Jessica L. photo"},
        {
          id: "4",          name: "Megan T.",          handle: "@megan.glow",          testimonial: "The nail art here is phenomenal! I showed them a picture, and they replicated it perfectly. So impressed with their attention to detail.",          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-talking-mobile-phone-waiting-area_107420-95801.jpg",          imageAlt: "Megan T. photo"},
        {
          id: "5",          name: "Olivia S.",          handle: "@olivia.spa",          testimonial: "Such a clean and professional salon. The technicians are gentle and thorough, making sure every visit is a pleasant one. My go-to place!",          imageSrc: "http://img.b2bpic.net/free-photo/fair-skinned-adult-woman-uses-roller-massager-while-sitting-her-beautician-light-studio-home-spa-facial-concept_197531-31464.jpg",          imageAlt: "Olivia S. photo"},
      ]}
      title="What Our Clients Say"
      description="Hear from our happy customers who love their experience at Nail Haven."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "Do I need to book an appointment?",          content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure we can accommodate your preferred time and service."},
        {
          id: "faq-2",          title: "What payment methods do you accept?",          content: "We accept all major credit cards (Visa, Mastercard, Amex), Apple Pay, Google Pay, and cash."},
        {
          id: "faq-3",          title: "How long do gel manicures last?",          content: "Typically, our high-quality gel manicures last between 2-3 weeks, depending on your nail growth and daily activities."},
        {
          id: "faq-4",          title: "Do you offer gift cards?",          content: "Yes, we do! Gift cards are available for purchase in-store and make the perfect present for any occasion."},
      ]}
      title="Got Questions? We Have Answers."
      description="Find quick answers to the most common questions about our services and policies."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Contact Us"
      title="Book Your Ultimate Pampering Session"
      description="Ready for a transformative nail experience? Contact us today to schedule your appointment or inquire about our services."
      tagIcon={Phone}
      imageSrc="http://img.b2bpic.net/free-photo/cozy-hobby-growing-indoor-plants-home_185193-108771.jpg"
      imageAlt="Nail salon reception area"
      mediaAnimation="opacity"
      inputPlaceholder="Enter your email"
      buttonText="Send Message"
      termsText="By clicking Send Message you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Nail Haven"
      copyrightText="© 2024 Nail Haven. All rights reserved."
      socialLinks={[
        {
          icon: Instagram,
          href: "https://instagram.com/nailhaven",          ariaLabel: "Instagram"},
        {
          icon: Facebook,
          href: "https://facebook.com/nailhaven",          ariaLabel: "Facebook"},
        {
          icon: Twitter,
          href: "https://twitter.com/nailhaven",          ariaLabel: "Twitter"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
