"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Team",
          id: "#team",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Haarzaken"
      button={{
        text: "Maak Afspraak",
        href: "#contact",
      }}
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      title="Jouw Stijl, Onze Passie"
      description="Bij Haarzaken draait alles om jou. Wij combineren vakmanschap met de nieuwste trends om een look te creëren die perfect bij je past."
      testimonials={[
        {
          name: "Yvonne Den Otter",
          handle: "@YvonneDenOtter",
          testimonial: "Kan niet beter! Supergoede kapster!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-woman-looking-camera_23-2147892779.jpg?_wi=1",
          imageAlt: "Yvonne Den Otter",
        },
        {
          name: "Els de Ruijgt",
          handle: "@ElsdeRuijgt",
          testimonial: "Geweldige service en resultaten, elke keer weer tevreden!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg",
          imageAlt: "Els de Ruijgt",
        },
        {
          name: "Linda Jansen",
          handle: "@LindaJansen",
          testimonial: "Heel blij met mijn nieuwe kapsel. De sfeer is heerlijk ontspannen!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229812.jpg",
          imageAlt: "Linda Jansen",
        },
        {
          name: "Mark Vermeer",
          handle: "@MarkVermeer",
          testimonial: "De beste kapper in de omgeving. Ze weten precies wat je wilt.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-man-showing-approval_23-2148230800.jpg",
          imageAlt: "Mark Vermeer",
        },
        {
          name: "Sofie Bakker",
          handle: "@SofieBakker",
          testimonial: "Altijd een warm welkom en een perfecte coupe. Echt een aanrader!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-outdoors_624325-737.jpg",
          imageAlt: "Sofie Bakker",
        },
      ]}
      testimonialRotationInterval={5000}
      buttons={[
        {
          text: "Bekijk Diensten",
          href: "#services",
        },
        {
          text: "Maak Afspraak",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462472.jpg?_wi=1"
      imageAlt="Stylish hair salon interior with a client receiving service"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/closeup-portrait-woman-smiling-with-perfect-smile-white-teeth_273609-13703.jpg",
          alt: "Closeup portrait woman smiling with perfect smile and white teeth",
        },
        {
          src: "http://img.b2bpic.net/free-photo/image-carefree-africanamerican-girl-white-tshirt-showing-tongue-smiling-winking-happy-stan_1258-128116.jpg",
          alt: "Image of carefree africanamerican girl in white tshirt showing tongue smiling and winking happy stan",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-young-woman-smiling-winking-yellow-wall_179666-15249.jpg",
          alt: "Front view of young woman smiling and winking on yellow wall",
        },
        {
          src: "http://img.b2bpic.net/free-photo/side-view-young-woman-with-blonde-hair-look-away_197531-33995.jpg",
          alt: "The side view of young woman with blonde hair look away",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-handsome-man-holding-her-girlfriend-s-hand_23-2147891265.jpg",
          alt: "Smiling handsome man holding her girlfriend's hand",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "Klantvriendelijke service",
        },
        {
          type: "text",
          text: "Altijd de nieuwste trends",
        },
        {
          type: "text",
          text: "Vakmanschap gegarandeerd",
        },
        {
          type: "text",
          text: "Persoonlijk haaradvies",
        },
        {
          type: "text",
          text: "Ontspannen sfeer",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      tag="Over Ons"
      title="Ontdek Haarzaken: Waar Kwaliteit en Comfort Samenkomen"
      buttons={[
        {
          text: "Onze Missie",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Knippen & Stylen",
          description: "Een frisse knipbeurt voor dames, heren en kinderen, inclusief een professionele styling die perfect bij jouw look past.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5405.jpg",
          imageAlt: "Hairdresser cutting client's hair",
        },
        {
          title: "Kleuren & Highlights",
          description: "Van subtiele highlights tot een complete kleurtransformatie. Wij werken met hoogwaardige producten voor een stralend resultaat.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-artist-woman-holding-art-supplies-red-wall_114579-55994.jpg",
          imageAlt: "Woman getting her hair colored at a salon",
        },
        {
          title: "Haarverzorging",
          description: "Verwen je haar met onze professionele haarbehandelingen. Voedende maskers, hoofdhuidmassages en advies op maat.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-straightening-her-hair-home_23-2148817209.jpg",
          imageAlt: "Hairdresser styling hair with a brush and blow dryer",
        },
      ]}
      title="Onze Exclusieve Diensten"
      description="Van een frisse knipbeurt tot een complete make-over, wij bieden een breed scala aan diensten om aan al jouw haarbehoeften te voldoen."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTen
      useInvertedBackground={true}
      title="Ontmoet Ons Creatieve Team"
      tag="Onze Stylisten"
      membersAnimation="slide-up"
      members={[
        {
          id: "stylist-1",
          name: "Laura Bakker",
          imageSrc: "http://img.b2bpic.net/free-photo/young-fashion-designer-working-her-workshop-alone_23-2148877353.jpg",
          imageAlt: "Portrait of Laura Bakker, Senior Stylist",
        },
        {
          id: "stylist-2",
          name: "Thomas de Vries",
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-man-getting-ready_1153-1518.jpg",
          imageAlt: "Portrait of Thomas de Vries, Hair Color Expert",
        },
        {
          id: "stylist-3",
          name: "Sophie Janssen",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-beautiful-woman-hairdresser-apron-looking-front-feeling-positive-emotions-with-hands-her-cheeks-standing-green-wall_141793-71508.jpg",
          imageAlt: "Portrait of Sophie Janssen, Junior Stylist",
        },
      ]}
      memberVariant="card"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Yvonne Den Otter",
          role: "Local Guide",
          company: "Tevreden Klant",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-businesswoman_1098-13507.jpg",
          imageAlt: "Yvonne Den Otter",
        },
        {
          id: "2",
          name: "Els de Ruijgt",
          role: "Klant",
          company: "Tevreden Klant",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-businessman-working-office-use-phone_1157-33708.jpg",
          imageAlt: "Els de Ruijgt",
        },
        {
          id: "3",
          name: "Lisa Kuipers",
          role: "Model",
          company: "Mode & Haar",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-exited-young-hipster-girl-with-pink-trendy-hairs-bright-make-up-ready-celebration-winter-fur-leopard-coat-positive-mood-ready-celebration_291049-1660.jpg",
          imageAlt: "Lisa Kuipers",
        },
        {
          id: "4",
          name: "David Brandsma",
          role: "Ondernemer",
          company: "Lokale Zakenman",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-sensual-brunette-female-white-bra_613910-7907.jpg",
          imageAlt: "David Brandsma",
        },
        {
          id: "5",
          name: "Emma Visser",
          role: "Student",
          company: "Jonge Klant",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-smiling-blond-bearded-man-hoodie-joyfully-spending-time-with-friends-isolated-blue-background-good-mood_574295-3154.jpg",
          imageAlt: "Emma Visser",
        },
      ]}
      kpiItems={[
        {
          value: "5.0",
          label: "Gemiddelde Score",
        },
        {
          value: "99%",
          label: "Tevredenheid",
        },
        {
          value: "20+",
          label: "Jaren Ervaring",
        },
      ]}
      title="Wat Onze Klanten Zeggen"
      description="Lees de ervaringen van onze tevreden klanten en ontdek waarom Haarzaken jouw favoriete kapper wordt."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic-cut",
          title: "Knippen Basis",
          price: "€ 29",
          period: "Kort haar / Kinderen",
          features: [
            "Wassen",
            "Knippen",
            "Drogen",
          ],
          button: {
            text: "Boek Nu",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg",
          imageAlt: "Glamorous model in make up studio",
        },
        {
          id: "full-service",
          title: "Volledige Styling",
          price: "€ 45",
          period: "Lang haar / Heren",
          features: [
            "Wassen",
            "Knippen",
            "Stylen",
            "Advies",
          ],
          button: {
            text: "Boek Nu",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462472.jpg?_wi=2",
          imageAlt: "Glamorous model in make up studio",
        },
        {
          id: "color-package",
          title: "Kleurpakket",
          price: "Vanaf € 75",
          period: "Incl. knippen & stylen",
          features: [
            "Wassen",
            "Kleuren/Highlights",
            "Knippen",
            "Stylen",
          ],
          button: {
            text: "Boek Nu",
            href: "#contact",
          },
          imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-woman-looking-camera_23-2147892779.jpg?_wi=2",
          imageAlt: "Glamorous model in make up studio",
        },
      ]}
      title="Onze Prijslijst"
      description="Kwaliteit hoeft niet duur te zijn. Bekijk onze transparante prijzen voor alle behandelingen."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",
          title: "Hoe kan ik een afspraak maken?",
          content: "Je kunt eenvoudig online een afspraak maken via onze website, of ons bellen tijdens openingstijden.",
        },
        {
          id: "faq-2",
          title: "Welke producten gebruiken jullie?",
          content: "Wij werken uitsluitend met hoogwaardige, professionele haarverzorgingsproducten van gerenommeerde merken die zorgzaam zijn voor je haar en het milieu.",
        },
        {
          id: "faq-3",
          title: "Kan ik mijn afspraak wijzigen of annuleren?",
          content: "Ja, je kunt je afspraak tot 24 uur van tevoren kosteloos wijzigen of annuleren via de link in je bevestigingsmail of door contact op te nemen.",
        },
      ]}
      sideTitle="Veelgestelde Vragen"
      sideDescription="Heb je vragen over onze diensten, producten of afspraken? Hier vind je de antwoorden op de meest voorkomende vragen."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      tag="Boek Jouw Afspraak"
      title="Klaar voor een Nieuwe Look?"
      description="Neem vandaag nog contact met ons op om een afspraak te maken. Wij helpen je graag de perfecte haarstijl te vinden."
      imageSrc="http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205860.jpg"
      imageAlt="Hair salon workstation with mirror and chair"
      mediaAnimation="slide-up"
      inputPlaceholder="Voer je e-mailadres in"
      buttonText="Verstuur"
      termsText="Door te klikken op Verstuur ga je akkoord met onze Algemene Voorwaarden."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Home",
              href: "#home",
            },
            {
              label: "Diensten",
              href: "#services",
            },
            {
              label: "Team",
              href: "#team",
            },
          ],
        },
        {
          items: [
            {
              label: "Tarieven",
              href: "#pricing",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          items: [
            {
              label: "Privacybeleid",
              href: "#",
            },
            {
              label: "Algemene Voorwaarden",
              href: "#",
            },
          ],
        },
      ]}
      logoText="Haarzaken"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
