"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 FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, BookOpen, CheckCircle, HelpCircle, Mail, Shield, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmall"
        background="fluid"
        cardStyle="gradient-radial"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Over Ons",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Cursussen",          id: "#courses"},
        {
          name: "Reviews",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="SchoolTrade.nl"
      button={{
        text: "Start Vandaag",        href: "#contact"}}
      animateOnLoad={true}
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogo
      logoText="SchoolTrade"
      description="Jouw springplank naar financiële onafhankelijkheid. Leer traden met de beste experts en tools."
      buttons={[
        {
          text: "Start met Leren",          href: "#courses"},
        {
          text: "Ontdek Meer",          href: "#about"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/empty-urban-office-used-as-insurance-agency-headquarters-help-people_482257-112390.jpg"
      imageAlt="Professioneel handelsbureau met meerdere schermen die financiële grafieken weergeven"
      showDimOverlay={false}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      title="Verander Jouw Toekomst met Kennis"
      description="SchoolTrade.nl is opgericht met één missie: kwalitatieve handelseducatie toegankelijk maken voor iedereen. Wij bieden diepgaande cursussen, real-time analyses en een ondersteunende community om jou de vaardigheden te geven die nodig zijn om succesvol te zijn op de financiële markten."
      tag="Over Ons"
      tagIcon={Sparkles}
      bulletPoints={[
        {
          title: "Expert Begeleiding",          description: "Leer van ervaren traders die de markten door en door kennen."},
        {
          title: "Praktijkgerichte Cursussen",          description: "Direct toepasbare strategieën en hands-on oefeningen."},
        {
          title: "Levenslange Toegang",          description: "Blijf leren met updates en nieuwe content, altijd en overal."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/confident-powerful-administrator-feeling-proud-his-career-success_482257-126220.jpg"
      imageAlt="Persoon die financiële grafieken analyseert op een holografisch scherm, symbool voor financiële educatie"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "1",          title: "Geavanceerde Analysehulpmiddelen",          description: "Krijg toegang tot krachtige tools voor diepgaande marktanalyse.",          tag: "Tools",          imageSrc: "http://img.b2bpic.net/free-photo/financial-data-visualization-stock-market-charts_23-2151977852.jpg",          imageAlt: "Dynamische financiële grafieken op een modern interface"},
        {
          id: "2",          title: "Actieve Handelscommunity",          description: "Connecteer met mede-traders en deel inzichten in een dynamische community.",          tag: "Community",          imageSrc: "http://img.b2bpic.net/free-photo/international-team_273609-6343.jpg",          imageAlt: "Diverse groep mensen die financiële strategieën bespreken"},
        {
          id: "3",          title: "Persoonlijke Mentorschap",          description: "Profiteer van één-op-één begeleiding van ervaren trading mentoren.",          tag: "Mentorschap",          imageSrc: "http://img.b2bpic.net/free-photo/people-using-digital-device-while-meeting_23-2149085929.jpg",          imageAlt: "Mentor die een student begeleidt bij trading concepten"},
      ]}
      title="Jouw Voordeel, Onze Expertise"
      description="Ontdek de unieke kenmerken die SchoolTrade.nl onderscheiden en jouw handelsreis naar een hoger niveau tillen."
      tag="Kenmerken"
      tagIcon={CheckCircle}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      textboxLayout="default"
      useInvertedBackground={true}
      animationType="slide-up"
      metrics={[
        {
          id: "1",          value: "95%",          title: "Tevredenheid",          items: [
            "Onze studenten zijn zeer tevreden",            "Continu verbetering van lesmateriaal"],
        },
        {
          id: "2",          value: "+10K",          title: "Studenten",          items: [
            "Een groeiende community van traders",            "Wereldwijde impact"],
        },
        {
          id: "3",          value: "4.9/5",          title: "Beoordeling",          items: [
            "Uitstekende recensies van gebruikers",            "Hoog gewaardeerde cursussen"],
        },
      ]}
      title="Zet Jouw Succes Om in Cijfers"
      description="Onze resultaten spreken voor zich. Bij SchoolTrade.nl meten we succes aan jouw groei en prestaties."
      tag="Impact"
      tagIcon={Award}
    />
  </div>

  <div id="courses" data-section="courses">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      carouselMode="buttons"
      products={[
        {
          id: "course-1",          name: "Technische Analyse Masterclass",          price: "€199",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-office-desk-with-growth-chart-laptop_23-2148780610.jpg",          imageAlt: "Gedetailleerde candlestick grafieken en trendlijnen voor technische analyse"},
        {
          id: "course-2",          name: "Risicomanagement Essenties",          price: "€149",          imageSrc: "http://img.b2bpic.net/free-photo/gradient-technology-background_23-2151895845.jpg",          imageAlt: "Abstracte visualisatie van risicobeheer met een schild en grafiek"},
        {
          id: "course-3",          name: "Fundamentele Analyse voor Beleggers",          price: "€179",          imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-professionals-review-files-performance-metrics-using-projections-budgeting_482257-136482.jpg",          imageAlt: "Financiële rapporten en balansen voor fundamentele analyse"},
        {
          id: "course-4",          name: "Optiehandel Strategieën",          price: "€249",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-talking-phone-discussing-project-implementation-with-remote-manager-explaining-company-strategy-executive-manager-working-marketing-strategy-startup-business-office_482257-28694.jpg",          imageAlt: "Digitale optieketen en abstracte markt bewegingen met call/put symbolen"},
        {
          id: "course-5",          name: "Cryptocurrency Beleggen Gedemystificeerd",          price: "€299",          imageSrc: "http://img.b2bpic.net/free-photo/3d-cryptocurrency-rendering-design_23-2149074563.jpg",          imageAlt: "Gestileerd blockchain netwerk met crypto munten en digitale wallet interface"},
        {
          id: "course-6",          name: "Algoritmische Handel Automatisering",          price: "€399",          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-robot-interacting-with-money_23-2151612715.jpg",          imageAlt: "Regels code en datastromen voor geautomatiseerde handel"},
      ]}
      title="Ontdek Onze Cursussen"
      description="Van beginner tot gevorderd, onze cursussen zijn ontworpen om jou te transformeren in een zelfverzekerde trader."
      tag="Aanbod"
      tagIcon={BookOpen}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Kevin Jansen",          role: "Beginnend Trader",          company: "Zelfstandig",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-business-man-standing-outside_1262-3492.jpg"},
        {
          id: "2",          name: "Sophie Vermeulen",          role: "Parttime Belegger",          company: "Innovatieve Projecten",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-corporate-woman-looking-outside-window-her-office-smiling-with-confidence_1258-194662.jpg"},
        {
          id: "3",          name: "Thomas de Vries",          role: "Gepensioneerd",          company: "Privé Beleggingen",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-using-digital-tablet_1262-2435.jpg"},
        {
          id: "4",          name: "Emma Bakker",          role: "Student Finance",          company: "Universiteit Amsterdam",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg"},
        {
          id: "5",          name: "Lucas Willems",          role: "Software Ontwikkelaar",          company: "Tech Solutions",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/male-freelancer-using-computer-plan-financial-analysis-with-business-charts-statistics-working-online-network-economy-growth-office-employee-planning-growth-strategy-close-up_482257-40931.jpg"},
      ]}
      kpiItems={[
        {
          value: "100%",          label: "Praktische Inzichten"},
        {
          value: "Uitstekend",          label: "Klantenservice"},
        {
          value: "Meer dan 50",          label: "Succesverhalen"},
      ]}
      title="Wat Onze Studenten Zeggen"
      description="Echte verhalen van echte successen. Hoor hoe SchoolTrade.nl levens heeft veranderd."
      tag="Reviews"
      tagIcon={Star}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Is SchoolTrade.nl geschikt voor beginners?",          content: "Absoluut! Onze cursussen zijn ontworpen om zowel beginners als gevorderde traders te bedienen. We beginnen met de basis en bouwen van daaruit verder."},
        {
          id: "2",          title: "Welke markten worden behandeld?",          content: "We behandelen een breed scala aan markten, waaronder aandelen, forex, cryptocurrencies, grondstoffen en opties."},
        {
          id: "3",          title: "Bieden jullie persoonlijke begeleiding?",          content: "Ja, we bieden mentorschap en persoonlijke begeleiding aan via onze premium pakketten en communityforums."},
        {
          id: "4",          title: "Zijn er kosten verbonden aan de community?",          content: "Toegang tot onze basiscommunity is gratis. Voor geavanceerde functies en exclusieve groepen zijn er premium lidmaatschappen beschikbaar."},
        {
          id: "5",          title: "Hoe lang duurt het voordat ik resultaten zie?",          content: "De snelheid van resultaten varieert per individu. Consistentie en de toepassing van geleerde strategieën zijn cruciaal. Wij bieden de tools, de inzet komt van jou!"},
      ]}
      title="Veelgestelde Vragen"
      description="Heb je vragen? Hier vind je antwoorden op de meest voorkomende vragen over SchoolTrade.nl."
      tag="FAQ"
      tagIcon={HelpCircle}
      faqsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "TradingView",        "Bloomberg",        "Investopedia",        "Reuters",        "CFTC",        "NASDAQ",        "NYSE"]}
      title="Samenwerken met de Beste"
      description="Onze methoden zijn getest en vertrouwd door toonaangevende platforms en experts in de financiële wereld."
      tag="Vertrouwen"
      tagIcon={Shield}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      tag="Contact"
      title="Klaar om Jouw Handelsreis te Beginnen?"
      description="Meld je vandaag nog aan en ontvang onze gratis gids voor beginnende traders!"
      tagIcon={Mail}
      tagAnimation="slide-up"
      inputPlaceholder="Voer jouw e-mailadres in"
      buttonText="Meld je Aan"
      termsText="Door je aan te melden ga je akkoord met onze Algemene Voorwaarden."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="SchoolTrade.nl"
      columns={[
        {
          title: "Navigatie",          items: [
            {
              label: "Home",              href: "#home"},
            {
              label: "Over Ons",              href: "#about"},
            {
              label: "Cursussen",              href: "#courses"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact",              href: "#contact"},
            {
              label: "Privacybeleid",              href: "#"},
          ],
        },
        {
          title: "Connect",          items: [
            {
              label: "LinkedIn",              href: "https://linkedin.com"},
            {
              label: "Twitter",              href: "https://twitter.com"},
          ],
        },
      ]}
      copyrightText="© 2024 SchoolTrade.nl. Alle rechten voorbehouden."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
