"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="circleGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Головна", id: "hero" },
              { name: "Про нас", id: "about" },
              { name: "Каталог", id: "products" },
              { name: "Контакти", id: "contact" },
            ]}
            brandName="Бруківка Вектор"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitTestimonial
            title="Якісна бруківка для вашого комфорту"
            description="Створюємо ідеальне покриття для доріжок, парковок та прибудинкових територій. Надійність та естетика в кожному камені."
            background={{ variant: "downward-rays-static-grid" }}
            testimonials={[]}
            imageSrc="https://img.b2bpic.net/free-photo/stone-paving-background-texture_140725-7036.jpg"
          />
        </div>

        <div id="about" data-section="about">
          <MetricSplitMediaAbout
            title="Чому обирають Вектор?"
            description="Ми використовуємо лише перевірені матеріали та сучасні технології укладання бруківки, що гарантує довговічність та стійкість до будь-яких погодних умов."
            metrics={[{ value: "15+", title: "Років досвіду" }, { value: "500+", title: "Проєктів" }]}
            useInvertedBackground={false}
            imageSrc="https://img.b2bpic.net/free-photo/view-paved-stone-path_140725-8664.jpg"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardTwentyFour
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={true}
            title="Наші переваги"
            description="Ми пропонуємо повний цикл послуг — від вибору дизайну до професійного монтажу."
            features={[
              { id: "f1", title: "Довговічність", author: "Технології", description: "Стійкість до механічних пошкоджень та вологи.", tags: ["Якість"] },
              { id: "f2", title: "Естетика", author: "Дизайн", description: "Широкий асортимент форм та кольорів.", tags: ["Стиль"] }
            ]}
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardOne
            title="Наш асортимент"
            description="Перегляньте популярні види бруківки для різних архітектурних рішень."
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="default"
            products={[
              { id: "p1", name: "Класична цеглинка", price: "від 300 грн/м²", imageSrc: "https://img.b2bpic.net/free-photo/paving-stones-background_140725-7832.jpg" },
              { id: "p2", name: "Фігурна плитка", price: "від 450 грн/м²", imageSrc: "https://img.b2bpic.net/free-photo/paving-blocks_140725-8314.jpg" }
            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardThirteen
            showRating={true}
            animationType="slide-up"
            textboxLayout="split"
            title="Відгуки клієнтів"
            description="Дізнайтеся, що думають наші замовники про якість роботи."
            testimonials={[{ id: "1", name: "Олександр", handle: "@client", testimonial: "Дуже задоволений роботою, все зроблено вчасно та якісно.", rating: 5 }]}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqBase
            faqs={[
              { id: "q1", title: "Як замовити укладання?", content: "Зв'яжіться з нами через форму на сайті або за телефоном." },
              { id: "q2", title: "Чи виїжджаєте на об'єкт?", content: "Так, ми проводимо безкоштовний виїзд для замірів." }
            ]}
            title="Часті питання"
            description="Відповіді на популярні запитання."
            faqsAnimation="slide-up"
            textboxLayout="default"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Зв'язок"
            title="Почніть свій проект вже сьогодні"
            description="Залишилися питання? Залиште заявку, і ми допоможемо вам з вибором."
            background={{ variant: "animated-grid" }}
            imageSrc="https://img.b2bpic.net/free-photo/worker-laying-stone-pathway_140725-9234.jpg"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="Бруківка Вектор"
            columns={[
              { title: "Навігація", items: [{ label: "Головна", href: "#hero" }, { label: "Каталог", href: "#products" }] }
            ]}
            copyrightText="© 2025 Бруківка Вектор. Усі права захищено."
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}