"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 FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleFullscreen
              navItems={[
                { name: "Home", id: "hero" },
                { name: "Tarief", id: "pricing" },
                { name: "Contact", id: "contact" },
              ]}
              brandName="VSO Controle"
            />
        </div>

        <div id="hero" data-section="hero">
            <HeroOverlayTestimonial
              title="Laat je VSO controleren door arbeidsrecht juristen"
              description="Een VSO kan grote gevolgen hebben voor je WW-rechten, vergoeding en toekomst. Voor €399,99 weet je binnen 24 uur waar je op moet letten en waar mogelijk nog winst te behalen valt. Voorkom dat je te snel tekent."
              buttons={[{ text: "Start mijn VSO-controle", href: "/vso-upload" }]}
              testimonials={[]}
            />
        </div>
        <div id="about" data-section="about"><TextAbout title="Juridische expertise bij jouw ontslag" useInvertedBackground={false} /></div>
        <div id="features" data-section="features"><FeatureCardSix textboxLayout="default" title="Waarom kiezen voor VSO Controle?" description="Voorkom dat je te snel tekent." features={[]} useInvertedBackground={false} /></div>
        <div id="pricing" data-section="pricing"><PricingCardOne animationType="depth-3d" textboxLayout="default" plans={[]} title="VSO Controle" description="Kies je pakket." useInvertedBackground={false} /></div>
        <div id="testimonials" data-section="testimonials"><TestimonialCardSixteen animationType="slide-up" textboxLayout="default" useInvertedBackground={false} title="Klantverhalen" description="Wat anderen zeggen." testimonials={[]} kpiItems={[{value:"100%", label:"Success"},{value:"24u", label:"Snelheid"},{value:"Expert", label:"Kennis"}]} /></div>
        <div id="faq" data-section="faq">
          <FaqDouble 
            useInvertedBackground={false} 
            faqs={[
              { id: "1", title: "Wat is een VSO?", content: "Een VSO is een vaststellingsovereenkomst waarin de afspraken over je ontslag worden vastgelegd." },
              { id: "2", title: "Waarom laten controleren?", content: "Wij controleren of je vergoeding optimaal is en of je recht op WW behouden blijft." },
              { id: "3", title: "Hoe lang duurt het?", content: "Je krijgt binnen 24 uur na uploaden van je document een uitgebreide controle terug." }
            ]} 
            title="Veelgestelde vragen" 
            description="Hier vind je antwoorden op de meest gestelde vragen over onze controle service."
            faqsAnimation="slide-up" 
            textboxLayout="default"
          />
        </div>
        <div id="contact" data-section="contact">
          <ContactCenter 
            tag="Contact"
            title="Heb je nog vragen?"
            description="Laat hier je gegevens achter en wij nemen zo snel mogelijk contact met je op."
            background={{ variant: 'radial-gradient' }}
            useInvertedBackground={true}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterLogoEmphasis 
            logoText="VSO Controle"
            columns={[
              {
                items: [
                  { label: "Over ons", href: "/over" },
                  { label: "Contact", href: "/contact" },
                  { label: "Privacy", href: "/privacy" }
                ]
              }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}