"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 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: "Over ons", id: "about" },
                { 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."
              testimonials={[
                { name: "Sarah", handle: "@sarah", testimonial: "Zeer deskundig advies gekregen over mijn VSO.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kmc9e0" },
                { name: "Mark", handle: "@mark", testimonial: "Binnen 24 uur een volledig rapport in handen.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ormt4d" },
                { name: "Emma", handle: "@emma", testimonial: "Duidelijke uitleg en goede onderhandelingstips.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ymgwl9" },
                { name: "David", handle: "@david", testimonial: "Professioneel, snel en zeer betrouwbaar.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xx38jl" },
                { name: "Sophie", handle: "@sophie", testimonial: "Heeft me enorm geholpen met mijn ontslagregeling.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=67sig2" }
              ]}
              buttons={[{ text: "Start mijn VSO-controle", href: "/vso-upload" }]}
              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/professional-lawyer-workspace-with-a-leg-1778265275322-d0f181ab.png"
              avatars={[
                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/professional-lawyer-workspace-with-a-leg-1778265275322-d0f181ab.png", alt: "Sarah" },
                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/team-of-professional-employment-law-juri-1778265285450-d91fc9bf.png", alt: "Mark" },
                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/person-reviewing-a-contract-with-a-pen-i-1778265293919-177c8824.png", alt: "Emma" },
                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kmc9e0", alt: "David" },
                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ormt4d", alt: "Sophie" }
              ]}
              avatarText="Vertrouwd door 500+ professionals"
            />
        </div>

        <div id="about" data-section="about">
          <TextAbout
            useInvertedBackground={false}
            title="Juridische expertise bij jouw ontslag"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardSix
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              { title: "Deskundig team", description: "Juristen met uitgebreide ervaring in het arbeidsrecht staan voor je klaar.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/team-of-professional-employment-law-juri-1778265285450-d91fc9bf.png", imageAlt: "Jurist team" },
              { title: "Snelheid", description: "Binnen 24 uur ontvang je onze bevindingen, aandachtspunten en winstkansen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/professional-lawyer-workspace-with-a-leg-1778265275322-d0f181ab.png", imageAlt: "Snelheid" },
              { title: "Transparant", description: "Wij werken met duidelijke afspraken en een vaste prijs, zonder verrassingen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/person-reviewing-a-contract-with-a-pen-i-1778265293919-177c8824.png", imageAlt: "Transparantie" }
            ]}
            title="Waarom kiezen voor VSO Controle?"
            description="Voorkom dat je te snel tekent. Laat je VSO eerst controleren door juristen met ervaring in het arbeidsrecht."
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardOne
            animationType="depth-3d"
            textboxLayout="default"
            useInvertedBackground={false}
            plans={[
              {
                id: "standard",                badge: "Populair",                price: "€399,99",                subtitle: "Volledige VSO controle binnen 24 uur",                features: ["Volledige controle van je VSO", "Bevindingen binnen 24 uur", "Check op WW-risico’s", "Check op einddatum en opzegtermijn", "Check op transitievergoeding", "Check op vakantiedagen", "Check op concurrentiebeding", "Check op finale kwijting", "Praktische uitleg in gewone taal", "Onderhandelingsruimte indicatie"]
              }
            ]}
            title="VSO Controle — €399,99"
            description="Laat je vaststellingsovereenkomst controleren door juristen met ervaring in het arbeidsrecht. Binnen 24 uur ontvang je onze bevindingen, aandachtspunten en waar mogelijk winst te behalen valt."
            buttons={[{ text: "Start mijn VSO-controle", href: "/vso-upload" }]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardSixteen
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              { id: "1", name: "Sarah", role: "Marketing", company: "GrowthCo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ppugbe" },
              { id: "2", name: "Mark", role: "IT", company: "TechLab", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hm68zn" },
              { id: "3", name: "Emma", role: "Sales", company: "BusinessInc", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=62fn3x" },
              { id: "4", name: "David", role: "Design", company: "ArtStudio", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=76v8od" },
              { id: "5", name: "Sophie", role: "Finance", company: "MoneyCorp", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=19q1l9" }
            ]}
            kpiItems={[
              { value: "100%", label: "Transparant" },
              { value: "24u", label: "Snelle service" },
              { value: "Expert", label: "Arbeidsrecht" }
            ]}
            title="Wat klanten over ons zeggen"
            description="Betrouwbare juridische ondersteuning op maat."
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitText
            useInvertedBackground={false}
            faqs={[
              { id: "q1", title: "Wat gebeurt er als ik mijn VSO upload?", content: "Onze juristen beoordelen jouw VSO direct en sturen je binnen 24 uur de bevindingen toe." },
              { id: "q2", title: "Kan ik de factuur declareren?", content: "Vaak is dit mogelijk. Wij bieden een duidelijke factuur die je kunt overleggen aan je werkgever als juridische kosten." },
              { id: "q3", title: "Is mijn data veilig?", content: "Wij gaan uiterst vertrouwelijk om met jouw persoonlijke documenten." }
            ]}
            sideTitle="Veelgestelde vragen"
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Direct contact opnemen"
            description="Heb je vragen of wil je direct geholpen worden?"
            inputs={[
              { name: "name", type: "text", placeholder: "Je naam", required: true },
              { name: "email", type: "email", placeholder: "E-mailadres", required: true }
            ]}
            textarea={{ name: "message", placeholder: "Stel hier je vraag", rows: 4, required: true }}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/person-reviewing-a-contract-with-a-pen-i-1778265293919-177c8824.png"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="VSO Controle"
            columns={[
              { title: "Diensten", items: [{ label: "VSO Controle", href: "#pricing" }] },
              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
