"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';

export default function LandingPage() {
  const handleScroll = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="mediumLarge"
        background="noiseDiagonalGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={[
              { name: "Услуги", id: "services" },
              { name: "О нас", id: "why-us" },
              { name: "Цены", id: "pricing" },
              { name: "Запись", id: "contact" },
            ]}
            brandName="Diamond Dent"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardCarousel
            title="Ваша идеальная улыбка — наша миссия"
            description="Премиальная стоматология в Грозном"
            background={{ variant: "gradient-bars" }}
            buttons={[
              { text: "Записаться", href: "#contact" },
              { text: "Услуги", onClick: () => handleScroll('services') },
            ]}
            mediaItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-treating-patients-teeth-with-dental-microscope-dentistry-concept_169016-66977.jpg?_wi=1", imageAlt: "dentistry" }]}
          />
        </div>

        <div id="services" data-section="services">
            <FeatureCardTwentyThree 
                title="Наши услуги" 
                description="Мы предлагаем полный спектр стоматологических услуг с использованием современного оборудования."
                features={[{ id: '1', title: 'Имплантация', tags: ['Премиум'], imageSrc: 'http://img.b2bpic.net/free-photo/dental-implants_38503-463.jpg?_wi=1' }, { id: '2', title: 'Отбеливание', tags: ['Эстетика'], imageSrc: 'http://img.b2bpic.net/free-photo/white-teeth_169016-568.jpg?_wi=1' }]} 
                animationType="slide-up" 
                textboxLayout="split" 
                useInvertedBackground={false}
            />
        </div>

        <div id="before-after" data-section="before-after">
            <ProductCardFour title="Преображение улыбок" description="Посмотрите на результаты наших работ по восстановлению эстетики улыбки." gridVariant="three-columns-all-equal-width" animationType="slide-up" textboxLayout="split" useInvertedBackground={false} />
        </div>

        <div id="why-us" data-section="why-us">
            <MetricCardTwo metrics={[]} description="Мы используем только сертифицированные материалы и передовые технологии лечения." gridVariant="uniform-all-items-equal" animationType="slide-up" title="Почему выбирают нас?" textboxLayout="split" useInvertedBackground={false} />
        </div>

        <div id="team" data-section="team">
            <TeamCardSix members={[]} description="В нашей клинике работают специалисты с многолетним стажем и подтвержденной квалификацией." gridVariant="three-columns-all-equal-width" animationType="slide-up" title="Команда профессионалов" textboxLayout="split" useInvertedBackground={false} />
        </div>

        <div id="testimonials" data-section="testimonials">
            <TestimonialCardOne testimonials={[]} description="Мы ценим доверие наших пациентов и стремимся к совершенству в каждом случае." gridVariant="three-columns-all-equal-width" animationType="slide-up" title="Отзывы" textboxLayout="split" useInvertedBackground={false} />
        </div>

        <div id="pricing" data-section="pricing">
            <PricingCardNine plans={[]} description="Прозрачное ценообразование на все виды услуг нашей стоматологической клиники." animationType="slide-up" title="Цены" textboxLayout="split" useInvertedBackground={false} />
        </div>

        <div id="contact" data-section="contact">
            <ContactSplitForm title="Записаться на прием" description="г. Грозный, ул. Стоматологическая 1. Телефон: +7 (999) 000-00-00" inputs={[{name:"name", type:"text", placeholder:"Ваше имя"}, {name:"phone", type:"tel", placeholder:"Ваш телефон"}]} useInvertedBackground={false} />
        </div>

        <div id="footer" data-section="footer">
            <FooterSimple 
                columns={[{ title: "Контакты", items: [{ label: "Адрес: Грозный" }, { label: "Телефон: +7(999)000-00-00" }, { label: "Instagram: @diamonddent" }] }, { title: "Время работы", items: [{ label: "Пн-Пт: 09:00 - 20:00" }, { label: "Сб-Вс: 10:00 - 18:00" }] }]} 
                bottomLeftText="© 2025 Diamond Dent"
                bottomRightText="Все права защищены"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}