"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Heart, Palette, Scissors, Sparkles, User, Wind } from "lucide-react";
import { useState } from "react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLargeSizeLargeTitles"
        background="fluid"
        cardStyle="outline"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              { name: "Главная", id: "hero" },
              { name: "Услуги", id: "services" },
              { name: "Галерея", id: "gallery" },
              { name: "Контакты", id: "contact" },
            ]}
            brandName="INESSA"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroCentered
            background={{ variant: "gradient-bars" }}
            title="Где роскошь встречается с красотой"
            description="Испытайте мастерство парижского уровня в самом сердце Кишинева. В INESSA вас ждут неподвластная времени красота, элитный стиль и индивидуальные преображения."
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/black-woman-s-portrait-dramma-look_633478-1621.jpg", alt: "Client 1" },
              { src: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-black-sweater-standing-posing_114579-81878.jpg", alt: "Client 2" },
              { src: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-applying-cream_23-2148389885.jpg", alt: "Client 3" },
              { src: "http://img.b2bpic.net/free-photo/selfie-portrait-cute-brunette-girl-with-short-hair-sitting-table-gray-plaid-terrace-restaurant-she-wears-blue-shirt-looks-happy_197531-971.jpg", alt: "Client 4" },
              { src: "http://img.b2bpic.net/free-photo/woman-covering-face-with-feathers-black-mask_23-2148011354.jpg", alt: "Client 5" },
            ]}
            buttons={[
              { text: "Записаться", href: "#booking" },
              { text: "Наши Услуги", href: "#services" },
            ]}
            buttonAnimation="slide-up"
            marqueeItems={[
              { type: "text", text: "Элитный стиль" },
              { type: "text", text: "Парижская техника" },
              { type: "text", text: "Авторское окрашивание" },
              { type: "text", text: "Премиум сервис" },
              { type: "text", text: "Трансформация красоты" },
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <TestimonialAboutCard
            tag="Наша философия"
            title="Европейские стандарты. Творческая страсть."
            description="В INESSA мы верим, что красота — это искусство. Наш салон привносит в Молдову мировые европейские техники, сочетая парижскую элегантность с персонализированным элитным обслуживанием."
            subdescription="Каждое преображение создается нашими экспертами, вдохновленными модой, чтобы ваши волосы отражали ту изысканность, которую вы заслуживаете."
            videoSrc="https://www.w3schools.com/html/mov_bbb.mp4"
            mediaAnimation="blur-reveal"
            icon={Sparkles}
            useInvertedBackground={false}
          />
        </div>

        <div id="services" data-section="services">
          <FeatureBorderGlow
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            features={[
              { title: "Стрижки и укладки", description: "Точные стрижки и редакционный стиль.", icon: Scissors },
              { title: "Окрашивание волос", description: "Индивидуальные цветовые палитры.", icon: Palette },
              { title: "Техника Балаяж", description: "Искусное окрашивание прядей.", icon: Sparkles },
              { title: "Кератиновое выпрямление", description: "Шелковистые и послушные волосы.", icon: Wind },
              { title: "Свадебные прически", description: "Идеальная элегантность для вашего дня.", icon: Heart },
              { title: "Мужской груминг", description: "Острый, изысканный и современный образ.", icon: User },
            ]}
            title="Элитное парикмахерское искусство"
            description="Изучите наш ассортимент профессиональных услуг, призванных подчеркнуть ваш стиль."
          />
        </div>

        <div id="gallery" data-section="gallery">
          <ProductCardOne
            textboxLayout="default"
            gridVariant="asymmetric-60-wide-40-narrow"
            animationType="blur-reveal"
            useInvertedBackground={false}
            products={[
              { id: "g1", name: "Глянцевый финиш", price: "Смотреть", imageSrc: "http://img.b2bpic.net/free-photo/blonde-model-posing_1122-488.jpg", imageAlt: "high fashion beauty campaign hairstyle" },
              { id: "g2", name: "Точные стрижки", price: "Смотреть", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-attitude-white_158595-5500.jpg", imageAlt: "hair coloring artistic transformation shot" },
              { id: "g3", name: "Мастерство цвета", price: "Смотреть", imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-young-curlyhaired-girl-headshot-photo-high-quality-photo_114579-92023.jpg", imageAlt: "editorial portrait female perfect hairstyle" },
              { id: "g4", name: "Свадебная элегантность", price: "Смотреть", imageSrc: "http://img.b2bpic.net/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60927.jpg", imageAlt: "high end balayage styling editorial" },
              { id: "g5", name: "Современный Балаяж", price: "Смотреть", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-flower_52683-119994.jpg", imageAlt: "artistic editorial hairstyle photoshoot" },
              { id: "g6", name: "Редакционные портреты", price: "Смотреть", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-model-posing-studio-stylish-outfit-rock-leather-style-trend_285396-9687.jpg", imageAlt: "premium hair styling editorial shot" },
            ]}
            title="Портфолио работ"
            description="Посмотрите на результат INESSA через наши последние преображения."
          />
        </div>

        <div id="features" data-section="features">
          <MetricCardTwo
            animationType="slide-up"
            textboxLayout="split"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={true}
            metrics={[
              { id: "m1", value: "100%", description: "Европейские специалисты" },
              { id: "m2", value: "5k+", description: "Успешных преображений" },
              { id: "m3", value: "24/7", description: "Онлайн-запись" },
            ]}
            title="Обещание INESSA"
            description="Почему элита доверяет нам свою красоту."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardThirteen
            title="Отзывы клиентов"
            description="Международные мнения о нашем мастерстве."
            showRating={true}
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            testimonials={[
              { id: "1", name: "Sophie L.", handle: "Париж, Франция", testimonial: "Исключительное мастерство. Поистине роскошный опыт в центре Кишинева.", rating: 5 },
              { id: "2", name: "Elena P.", handle: "Кишинев, Молдова", testimonial: "Лучший опыт. Балаяж безупречен, именно то, что я хотела.", rating: 5 },
              { id: "3", name: "Anna V.", handle: "Лондон, Великобритания", testimonial: "Сервис мирового уровня. Профессионализм и внимание к деталям.", rating: 5 },
            ]}
          />
        </div>

        <div id="booking" data-section="booking">
          <ContactSplitForm
            title="Премиум запись"
            description="Выберите услугу и время для индивидуального визита."
            inputs={[
              { name: "name", type: "text", placeholder: "Ваше имя", required: true },
              { name: "email", type: "email", placeholder: "Электронная почта", required: true },
            ]}
            multiSelect={{ name: "service", label: "Выберите услугу", options: ["Стрижка", "Балаяж", "Окрашивание", "Свадебная прическа"] }}
            textarea={{ name: "notes", placeholder: "Особые пожелания?" }}
            buttonText="Записаться"
            useInvertedBackground={false}
          />
        </div>

        <div id="contact" data-section="contact">
          <FaqSplitMedia
            title="Посетите наш салон"
            description="Удобное расположение и многоязычная поддержка."
            faqs={[
              { id: "1", title: "Адрес", content: "ул. Мэлина Микэ 11/4, Кишинев, MD-2021" },
              { id: "2", title: "Телефон", content: "+373 69 113 900" },
              { id: "3", title: "Языки", content: "Обслуживаем на румынском, русском, французском и английском языках." },
            ]}
            faqsAnimation="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-relaxing-with-diary_23-2150522497.jpg?_wi=2"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            logoText="INESSA"
            columns={[
              { title: "Navigare", items: [{ label: "Acasă", href: "#hero" }, { label: "Servicii", href: "#services" }] },
              { title: "Limbi", items: [{ label: "Selectează limba", href: "#" }] },
              { title: "Informații legale", items: [{ label: "Politica de confidențialitate", href: "#" }] },
            ]}
            copyrightText="© 2025 | INESSA"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
