"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Award, UserCheck, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "home"},
        {
          name: "About",          id: "about"},
        {
          name: "Services",          id: "treatments"},
        {
          name: "Booking",          id: "contact"},
      ]}
      brandName="Enchara"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-static"}}
      title="Timeless Beauty, Redefined."
      description="Welcome to Enchara. Experience the pinnacle of aesthetic excellence, where precision meets artistry in a sanctuary of luxury."
      buttons={[
        {
          text: "Book Appointment",          href: "#contact"},
        {
          text: "Explore Treatments",          href: "#treatments"},
      ]}
      carouselItems={[
        {
          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-couch-with-man-holding-her-head_23-2148857584.jpg",          imageAlt: "Luxury clinic interior"},
        {
          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/woman-using-face-oil-with-dropper_23-2149122116.jpg",          imageAlt: "Skincare procedure"},
        {
          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-older-woman-with-make-up-holding-rose-quartz-roller_23-2148672279.jpg",          imageAlt: "Skin treatment"},
        {
          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-patient-ready-procedure_23-2149103628.jpg",          imageAlt: "Facial sculpting"},
        {
          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/professional-stylist-working-with-client_23-2147769765.jpg",          imageAlt: "Professional clinic gear"},
        {
          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/wellness-concept-with-woman-massage-salon_23-2147816967.jpg",          imageAlt: "Clinic ambiance"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="The Art of Aesthetic Excellence"
      buttons={[
        {
          text: "Learn Our Story",          href: "#"},
      ]}
    />
  </div>

  <div id="treatments" data-section="treatments">
      <FeatureCardThree
      textboxLayout="split"
      gridVariant="bento-grid"
      animationType="blur-reveal"
      useInvertedBackground={false}
      features={[
        {
          title: "Skin Treatments",          description: "Revitalizing facials and peels for a youthful glow.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-relaxing-spa_329181-13158.jpg"},
        {
          title: "Laser Treatments",          description: "Cutting-edge technology for precision skin resurfacing.",          imageSrc: "http://img.b2bpic.net/free-photo/nail-hygiene-care-client_23-2148766585.jpg"},
        {
          title: "Facial Sculpting",          description: "Defined features and enhanced natural harmony.",          imageSrc: "http://img.b2bpic.net/free-photo/gua-sha-face-roller-cotton-top-view_23-2149357115.jpg"},
      ]}
      title="Our Signature Treatments"
      description="Tailored solutions designed for the modern individual."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "15K+",          title: "Happy Patients",          description: "Trusted by a global community.",          icon: Users,
        },
        {
          id: "m2",          value: "98%",          title: "Success Rate",          description: "Exceptional clinical precision.",          icon: Award,
        },
        {
          id: "m3",          value: "10+",          title: "Expert Staff",          description: "Dedicated aesthetic specialists.",          icon: UserCheck,
        },
      ]}
      title="Our Clinical Impact"
      description="Excellence defined through results."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          title: "Exceptional Glow",          quote: "The results were far beyond my expectations. Absolutely stunning.",          name: "Elena R.",          role: "Fashion Designer",          imageSrc: "http://img.b2bpic.net/free-photo/cute-young-caucasian-women-shirts-are-smiling-while-looking-camera-white-background-beauty-emotion-concept_197531-31456.jpg"},
        {
          id: "2",          title: "Clinical Perfection",          quote: "Highly professional, luxurious, and results-oriented. A true gold standard.",          name: "Marcus S.",          role: "Entrepreneur",          imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-plant-side-view_23-2149411345.jpg"},
        {
          id: "3",          title: "Life Changing",          quote: "I've never felt more confident. The expertise here is unmatched.",          name: "Sofia V.",          role: "Marketing Director",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-doctor-posing_23-2148497196.jpg"},
        {
          id: "4",          title: "Pure Luxury",          quote: "A peaceful environment paired with high-end aesthetic care. Simply brilliant.",          name: "Julian D.",          role: "Architect",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-before-wedding_23-2149860779.jpg"},
        {
          id: "5",          title: "Radiant Skin",          quote: "The signature facial treatment is my monthly ritual now. Unbeatable.",          name: "Lydia M.",          role: "Influencer",          imageSrc: "http://img.b2bpic.net/free-photo/woman-relaxing-lingerie-bed_1301-2324.jpg"},
      ]}
      title="Voices of Elegance"
      description="Discover what our patients say about their journey with us."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",          title: "How long do results last?",          content: "Results vary depending on the specific treatment and individual factors."},
        {
          id: "f2",          title: "Is there downtime?",          content: "Most of our premium services offer little to no downtime."},
        {
          id: "f3",          title: "How do I book?",          content: "Book directly through our website or contact our team via WhatsApp."},
      ]}
      title="Your Aesthetic Journey"
      description="Common questions about our treatments."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Vogue",        "Harper's Bazaar",        "ELLE",        "Cosmopolitan",        "Marie Claire",        "Glamour",        "Vanity Fair"]}
      title="Trusted by Industry Leaders"
      description="Our work is recognized across the globe."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      tag="Book Now"
      title="Ready to Transform Your Look?"
      description="Join the elite Enchara aesthetic experience today. Our team is ready to assist you."
      buttons={[
        {
          text: "Schedule Consultation",          href: "https://wa.me/yourclinicnumber"},
      ]}
    />
  </div>

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