"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Sparkles, Languages } from "lucide-react";
import { useState } from "react";

export default function LandingPage() {
  const [lang, setLang] = useState("RU");

  const languageSwitcher = (
    <div className="flex items-center gap-2 bg-card border rounded-full px-3 py-1 cursor-pointer">
        <Languages size={16} />
        <select 
          value={lang} 
          onChange={(e) => setLang(e.target.value)}
          className="bg-transparent border-none outline-none font-medium text-sm"
        >
          <option value="EN">EN</option>
          <option value="RO">RO</option>
          <option value="RU">RU</option>
        </select>
    </div>
  );

  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "services" },
        { name: "About", id: "about" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="BEAUTY BUNKER STUDIO"
    />
    <div className="fixed top-4 right-20 z-[100]">
        {languageSwitcher}
    </div>
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitTestimonial
      background={{ variant: "gradient-bars" }}
      title="Beauty Crafted Like Art"
      description="Experience unparalleled luxury in Chișinău's most exclusive beauty sanctuary."
      testimonials={[
        { name: "Elena M.", handle: "@elena", testimonial: "The absolute pinnacle of luxury beauty in Moldova. Flawless.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/asian-woman-being-covered-plastic-black-straws_23-2148763400.jpg?_wi=1" },
        { name: "Natalia K.", handle: "@natalia", testimonial: "Simply cinematic. I felt like a movie star from the moment I arrived.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-while-beautician-wrapping-towel-woman-s-head-spa_23-2147939880.jpg?_wi=1" },
        { name: "Irina D.", handle: "@irina", testimonial: "Exquisite artistry and such a refined, peaceful atmosphere.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65165.jpg?_wi=1" },
        { name: "Maria S.", handle: "@maria", testimonial: "Luxury redefined. My new favorite destination for skincare.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-fashion-stylish-brunette-woman-model-with-evening-makeup-red-lips-white-jacket_158538-11529.jpg?_wi=1" },
        { name: "Sofia R.", handle: "@sofia", testimonial: "A breathtaking experience that leaves you glowing.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fascinating-blonde-lady-with-long-eyelashes-posing-indoor-studio-photo-pleasant-caucasian-woman-with-dark-makeup_197531-25623.jpg?_wi=1" },
      ]}
      buttons={[{ text: "Book Appointment", href: "#contact" }, { text: "Explore Services", href: "#services" }]}
      imageSrc="http://img.b2bpic.net/free-photo/asian-woman-being-covered-plastic-black-straws_23-2148763400.jpg?_wi=2"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Our Philosophy"
      title="Where Elegance Meets Perfection"
      description="BEAUTY BUNKER STUDIO is more than a salon; it's a sanctuary for the sophisticated individual. We blend modern aesthetic techniques with editorial precision."
      subdescription="Our mission is to create a bespoke beauty journey that empowers your inner radiance, offering a level of service found only in world-class design houses."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/young-woman-relaxing-while-beautician-wrapping-towel-woman-s-head-spa_23-2147939880.jpg?_wi=2"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { id: "1", title: "Luxury Makeup Artistry", tags: ["Fashion", "Editorial"], imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65165.jpg?_wi=2" },
        { id: "2", title: "Advanced Skin Glow Facials", tags: ["Skincare", "Rejuvenation"], imageSrc: "http://img.b2bpic.net/free-photo/asian-woman-being-covered-plastic-black-straws_23-2148763400.jpg?_wi=3" },
        { id: "3", title: "Brow & Lash Sculpting", tags: ["Definition", "Modern"], imageSrc: "http://img.b2bpic.net/free-photo/young-woman-relaxing-while-beautician-wrapping-towel-woman-s-head-spa_23-2147939880.jpg?_wi=3" },
        { id: "4", title: "Bespoke Bridal Packages", tags: ["Wedding", "Premium"], imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-fashion-stylish-brunette-woman-model-with-evening-makeup-red-lips-white-jacket_158538-11529.jpg?_wi=2" },
        { id: "5", title: "Aesthetic Consultations", tags: ["Consultancy", "Exclusive"], imageSrc: "http://img.b2bpic.net/free-photo/fascinating-blonde-lady-with-long-eyelashes-posing-indoor-studio-photo-pleasant-caucasian-woman-with-dark-makeup_197531-25623.jpg?_wi=2" },
        { id: "6", title: "Skin Treatments", tags: ["Medical-grade", "Glow"], imageSrc: "http://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17775.jpg?_wi=1" },
      ]}
      title="Elite Beauty Services"
      description="Curated treatments tailored for the modern, discerning client."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      title="Editorial Campaign"
      description="A glimpse into the art of BEAUTY BUNKER."
    />
  </div>

  <div id="why" data-section="why">
      <MetricCardFourteen
      title="Why Choose BEAUTY BUNKER"
      tag="The Difference"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "100%", description: "Premium Products" },
        { id: "m2", value: "Elite", description: "Expert Specialists" },
        { id: "m3", value: "Bespoke", description: "Personalized Approach" },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={true}
      title="Client Journeys"
      description="What our exclusive clientele says."
      testimonials={[]}
    />
  </div>

  <div id="booking" data-section="booking">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "1", title: "How do I book?", content: "Book via our WhatsApp link or call us directly." },
        { id: "2", title: "Where are you located?", content: "Strada Gheorghe Asachi 62/2, Chișinău." },
        { id: "3", title: "Do you offer consultations?", content: "Yes, we prioritize bespoke beauty consultations." },
      ]}
      title="Booking Details"
      description="All you need to know about starting your luxury journey."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{ variant: "gradient-bars" }}
      tag="Забронировать"
      title="Присоединяйтесь к нам"
      description="Забронируйте свое время в нашей студии."
      buttonText="Записаться"
      termsText="Нажимая кнопку, вы подтверждаете, что согласны с нашими Условиями использования."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="BEAUTY BUNKER STUDIO"
      columns={[
        { title: "Контакты", items: [{ label: "WhatsApp", href: "#" }, { label: "Instagram", href: "#" }] },
        { title: "Адрес", items: [{ label: "Strada Gheorghe Asachi 62/2", href: "#" }] },
      ]}
      copyrightText="© 2025 | Webild"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}