"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmallSizeMediumTitles"
        background="blurBottom"
        cardStyle="glass-depth"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Diensten",
          id: "features",
        },
        {
          name: "Tarieven",
          id: "pricing",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Websites voor Ondernemers"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="Professionele website voor jouw bedrijf"
      description="Krijg binnen 24 uur een gratis sample ontwerp. Snel, betaalbaar en gericht op meer klanten voor jouw bedrijf."
      buttons={[
        {
          text: "Bekijk gratis sample",
          href: "#contact",
        },
        {
          text: "Bel direct: +31 6 48265535",
          href: "tel:+31648265535",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/ai-llm-chatbot-software-interface-pc-home-office-showing-virtual-assistant_482257-113943.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/empty-home-office-setup-showing-documents-financial-reports-laptop_482257-90893.jpg",
          alt: "Client 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg",
          alt: "Client 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345423.jpg",
          alt: "Client 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/brand-branding-high-quality-exclusive-concept_53876-132313.jpg",
          alt: "Client 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/system-administrator-debugging-company-servers-preventing-failures_482257-124403.jpg",
          alt: "Client 5",
        },
      ]}
      avatarText="Al meer dan 50+ ondernemers geholpen"
      marqueeItems={[
        {
          type: "text",
          text: "Razendsnel online",
        },
        {
          type: "text",
          text: "Mobiel geoptimaliseerd",
        },
        {
          type: "text",
          text: "SEO vriendelijk",
        },
        {
          type: "text",
          text: "Volledig beheerbaar",
        },
        {
          type: "text",
          text: "Conversiegericht ontwerp",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",
          content: "Ik help lokale bedrijven groeien met effectieve websites",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-photo/diverse-business-people-working_53876-14369.jpg",
          alt: "Over mij",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Snel resultaat",
          description: "Binnen 24 uur een gratis sample. Binnen 3 dagen opgeleverd.",
          tag: "Snelheid",
          imageSrc: "http://img.b2bpic.net/free-photo/digital-blue-hud-interface-laptop-concept_53876-15831.jpg",
        },
        {
          id: "f2",
          title: "Altijd bereikbaar",
          description: "Klanten kunnen jou direct vinden, bellen of WhatsAppen.",
          tag: "Service",
          imageSrc: "http://img.b2bpic.net/free-vector/modern-business-infographic_23-2147509925.jpg",
        },
        {
          id: "f3",
          title: "Mobielvriendelijk",
          description: "Jouw website werkt perfect op elk apparaat.",
          tag: "Design",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-floor-from-home-with-device_23-2149208592.jpg",
        },
      ]}
      title="Wat ik voor je doe"
      description="Moderne websites voor kleine bedrijven die willen groeien."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "starter",
          badge: "Starter",
          price: "€300",
          subtitle: "Ideaal voor nieuwe klanten",
          buttons: [
            {
              text: "Start nu",
              href: "#contact",
            },
          ],
          features: [
            "Gratis sample binnen 24u",
            "Snelle oplevering (3 dagen)",
            "Mobielvriendelijk design",
            "Persoonlijk contact",
          ],
        },
      ]}
      title="Transparante prijzen"
      description="Betaalbaar en professioneel."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Jan de Vries",
          handle: "@jandevries",
          testimonial: "Geweldige service! Mijn website was binnen 3 dagen live.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",
        },
        {
          id: "t2",
          name: "Anke Jansen",
          handle: "@ankejansen",
          testimonial: "Het gratis sample gaf direct vertrouwen. Aanrader!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/creative-tailor-working-workshop_23-2148970725.jpg",
        },
        {
          id: "t3",
          name: "Mark Peters",
          handle: "@markpeters",
          testimonial: "Zeer betaalbaar en professioneel resultaat.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-business-women-posing-pointing-fingers-camera-while-sitting-table-with-coffee-cups-documents_74855-9959.jpg",
        },
        {
          id: "t4",
          name: "Sofie Bakker",
          handle: "@sofiebakker",
          testimonial: "Eindelijk een website die klanten oplevert.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/businessman-wearing-coat_1098-3778.jpg",
        },
        {
          id: "t5",
          name: "Thomas Smit",
          handle: "@thomassmit",
          testimonial: "Top service, snel en persoonlijk.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-shopping-buying-consumer-goods_23-2151669840.jpg",
        },
      ]}
      showRating={true}
      title="Wat klanten zeggen"
      description="Succesverhalen van ondernemers die ik heb geholpen."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Hoe werkt het gratis sample?",
          content: "Stuur me je wensen en ik maak binnen 24 uur een vrijblijvend voorbeeld.",
        },
        {
          id: "q2",
          title: "Hoe snel is mijn website klaar?",
          content: "Na akkoord lever ik de website binnen 3 werkdagen op.",
        },
        {
          id: "q3",
          title: "Wat kost een website?",
          content: "Websites starten vanaf €300 voor een professioneel en compleet resultaat.",
        },
      ]}
      title="Veelgestelde vragen"
      description="Alles wat je moet weten over jouw nieuwe website."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Vraag vandaag je gratis sample aan"
      description="Bel of WhatsApp naar +31 6 48265535 of vul het formulier in."
      inputs={[
        {
          name: "naam",
          type: "text",
          placeholder: "Jouw naam",
          required: true,
        },
        {
          name: "bedrijf",
          type: "text",
          placeholder: "Jouw bedrijfsnaam",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Jouw e-mailadres",
          required: true,
        },
      ]}
      textarea={{
        name: "wensen",
        placeholder: "Vertel me wat je voor website wilt",
        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/circuit-board-chip-technology-concept_53876-124235.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Websites voor Ondernemers"
      columns={[
        {
          title: "Navigatie",
          items: [
            {
              label: "Home",
              href: "#hero",
            },
            {
              label: "Diensten",
              href: "#features",
            },
            {
              label: "Tarieven",
              href: "#pricing",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "Bel: +31 6 48265535",
              href: "tel:+31648265535",
            },
            {
              label: "WhatsApp: +31 6 48265535",
              href: "https://wa.me/31648265535",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Websites voor Ondernemers."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
