"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import AboutMetric from '@/components/sections/about/AboutMetric';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Scissors, Star, Users, CheckCircle, Clock, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Головна", id: "hero" },
        { name: "Про нас", id: "about" },
        { name: "Послуги", id: "features" },
        { name: "Ціни", id: "pricing" },
        { name: "Відгуки", id: "testimonials" },
        { name: "Контакти", id: "contact" }
      ]}
      brandName="Барбер у дома"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      title="Барбер у вас вдома — стиль без зайвих зусиль"
      description="Професійні стрижки та догляд за бородою від майстрів преміум-рівня прямо у вас вдома. Економте свій час, не втрачаючи якості."
      background={{ variant: "glowing-orb" }}
      kpis={[
        { value: "30+", label: "Майстрів" },
        { value: "5000+", label: "Клієнтів" },
        { value: "4.9", label: "Рейтинг" }
      ]}
      enableKpiAnimation={true}
      buttons={[{ text: "Забронювати виїзд", href: "#contact" }, { text: "Переглянути ціни", href: "#pricing" }]}
      imageSrc="http://img.b2bpic.net/free-photo/confused-young-handsome-male-barber-uniform-holding-hair-clippers-spread-hand_141793-81553.jpg?_wi=2"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      title="Ми змінюємо ваш підхід до догляду"
      metrics={[
        { icon: Clock, label: "Час", value: "Виїзд 24/7" },
        { icon: CheckCircle, label: "Якість", value: "Преміум інструменти" },
        { icon: MapPin, label: "Локація", value: "Весь Київ" }
      ]}
      metricsAnimation="slide-up"
      useInvertedBackground={false}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSix
      title="Чому обирають нас"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { title: "Економія часу", description: "Ми приїжджаємо до вас у зручний час, щоб ви не стояли в заторах та чергах.", imageSrc: "http://img.b2bpic.net/free-photo/barber-styling-hair-client_23-2147778736.jpg?_wi=2" },
        { title: "Стерильність", description: "Кожен інструмент проходить повну дезінфекцію перед кожним клієнтом.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg?_wi=2" },
        { title: "Індивідуальний підхід", description: "Майстри проконсультують та підберуть стрижку, що ідеально личитиме вашому обличчю.", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4435.jpg?_wi=2" }
      ]}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      title="Наші послуги"
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        { id: "basic", tag: "Популярно", price: "600 ₴", period: "за сеанс", description: "Базова стрижка з миттям голови та укладкою.", button: { text: "Обрати" }, featuresTitle: "Що входить:", features: ["Мийка голови", "Стрижка", "Стильна укладка"] },
        { id: "pro", tag: "Рекомендуємо", price: "950 ₴", period: "за сеанс", description: "Комплексний догляд за стрижкою та бородою.", button: { text: "Обрати" }, featuresTitle: "Що входить:", features: ["Стрижка", "Моделювання бороди", "Укладка", "Фінішні засоби"] }
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      cardTitle="Відгуки наших клієнтів"
      cardTag="Відгуки"
      cardAnimation="slide-up"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Андрій", imageSrc: "http://img.b2bpic.net/free-photo/young-man-smiling_23-2147624592.jpg" },
        { id: "2", name: "Олег", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg" },
        { id: "3", name: "Максим", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-barbershop_23-2148506245.jpg" }
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      title="Довіра клієнтів"
      tag="Показники"
      metrics={[
        { id: "1", value: "500+", description: "Позитивних відгуків" },
        { id: "2", value: "98%", description: "Повторних звернень" },
        { id: "3", value: "1000+", description: "Стрижок у місяць" }
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      sideTitle="Часті питання"
      sideDescription="Знайдіть відповіді на найпопулярніші запитання про наші послуги виїзного барбера."
      faqsAnimation="slide-up"
      faqs={[
        { id: "1", title: "Чи потрібне спеціальне місце?", content: "Ми привозимо своє крісло, світло та дзеркало. Вам потрібно лише 2 кв.м простору." },
        { id: "2", title: "Чи виїжджаєте за межі міста?", content: "Так, обговорюємо індивідуально з кожним клієнтом." },
        { id: "3", title: "Які методи оплати?", content: "Готівка або переказ на карту після завершення послуги." }
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      title="Забронюйте свій візит"
      description="Залиште свої дані, і наш менеджер зв'яжеться з вами протягом 10 хвилин для уточнення деталей."
      inputs={[
        { name: "name", type: "text", placeholder: "Ваше ім'я" },
        { name: "phone", type: "tel", placeholder: "Номер телефону" }
      ]}
      useInvertedBackground={false}
      imageSrc="http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg?_wi=2"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Барбер у дома"
      columns={[
        { title: "Навігація", items: [{ label: "Головна", href: "#hero" }, { label: "Про нас", href: "#about" }] },
        { title: "Контакти", items: [{ label: "Бронювання", href: "#contact" }, { label: "Telegram", href: "#" }] }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
