"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="small"
        sizing="largeSmallSizeMediumTitles"
        background="fluid"
        cardStyle="gradient-mesh"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Over",          id: "#about"},
        {
          name: "Voorzieningen",          id: "#amenities"},
        {
          name: "Tarieven",          id: "#pricing"},
        {
          name: "Boek Nu",          id: "#contact"},
      ]}
      brandName="Chalet La Mairie"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{
        variant: "gradient-bars"}}
      title="Chalet La Mairie"
      description="Rust · Natuur · Luxe in het hart van de Ardennen."
      buttons={[
        {
          text: "Boek nu",          href: "https://auth.ardennes-etape.be/..."},
      ]}
      mediaItems={[
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611168631-bqi0eemk.png",          imageAlt: "Chalet exterieur"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611258702-fi58pdv2.png",          imageAlt: "Leefruimte"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611069831-nsgg5nr8.png",          imageAlt: "Slaapkamer"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611091175-vt9i6fhp.png",          imageAlt: "Keuken"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611112837-z8t4s6s3.png",          imageAlt: "Terras"},
        {
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611308636-o5z8nwyf.png",          imageAlt: "Sauna"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="Warm, organisch en luxueus"
      description="Gebouwd in 2017 in Erezée, biedt ons chalet 150m² aan woonplezier voor 6 personen en een baby. Geniet van 1000m² tuin in een rustgevende bosrijke omgeving."
      bulletPoints={[
        {
          title: "Capaciteit",          description: "6 volwassenen + 1 baby"},
        {
          title: "Oppervlakte",          description: "150m² woonruimte"},
        {
          title: "Beoordeling",          description: "9.6/10 via Ardennes-Étape"},
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611413397-wa436s5l.png"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="amenities" data-section="amenities">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      features={[
        {
          title: "Infraroodsauna",          description: "Voor 3 personen",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611473378-nxip0jjh.png",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611576225-p7c6qcvo.png",          buttonText: "Lees meer"},
        {
          title: "Houtkachel",          description: "Inclusief houtblokken",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611552209-xx71hkui.png",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611588996-ftuzngco.png",          buttonText: "Lees meer"},
        {
          title: "Pétanquebaan",          description: "Materiaal aanwezig",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611608832-bddobch1.png",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611623918-3uimxbhe.png",          buttonText: "Lees meer"},
        {
          title: "Omheinde Tuin",          description: "1000m² met BBQ",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611675811-p9dm4yj7.png",          titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611702120-jk7yooyg.png",          buttonText: "Lees meer"},
        {
          title: "Overdekt Terras",          description: "Zuidgericht",          imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-with-deck-furniture-vegetation_23-2150698330.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/terrace-with-trees-forest-cozy-outdoor-relaxation-space_169016-69565.jpg",          buttonText: "Lees meer"},
        {
          title: "Privéparking",          description: "3 wagens + EV opladen",          imageSrc: "http://img.b2bpic.net/free-photo/field-with-two-wooden-barns-surrounded-by-forests-covered-fog-cloudy-sky_181624-11458.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/beautiful-view-village-ukrainian-carpathian-mountains_176420-55115.jpg",          buttonText: "Lees meer"},
        {
          title: "Volledig uitgeruste Keuken",          description: "Met inductie en oven",          imageSrc: "http://img.b2bpic.net/free-photo/man-servant-cooking-kitchen_23-2149530823.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-having-fun-breakfast-christmas-morning_132075-10829.jpg",          buttonText: "Lees meer"},
        {
          title: "Wifi & Entertainment",          description: "TV, HiFi jukebox",          imageSrc: "http://img.b2bpic.net/free-photo/romantic-zone-with-fruits-flowers_8353-9800.jpg",          titleImageSrc: "http://img.b2bpic.net/free-photo/beautiful-vibe-christmas-beautiful-home-happy-cozy_482257-17978.jpg",          buttonText: "Lees meer"},
      ]}
      title="Voorzieningen"
      description="Alles wat u nodig heeft voor een zorgeloos verblijf."
    />
  </div>

  <div id="rooms" data-section="rooms">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "r1",          name: "Slaapkamer 1",          price: "Tweepersoonsbed 160x200 + privé badkamer",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611722292-ej3ymz7e.png"},
        {
          id: "r2",          name: "Slaapkamer 2",          price: "Tweepersoonsbed 160x200",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611796457-427j78ub.png"},
        {
          id: "r3",          name: "Slaapkamer 3",          price: "2x eenpersoonsbed 90x200",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611810790-1u1int0d.png"},
        {
          id: "r4",          name: "Leefruimte",          price: "Open living & keuken",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778611833165-eobexqe8.png"},
        {
          id: "r5",          name: "Keuken",          price: "Centraal kookeiland",          imageSrc: "http://img.b2bpic.net/free-photo/dining-room-background-zoom-calls_23-2149684443.jpg"},
        {
          id: "r6",          name: "Wellnessruimte",          price: "Sauna voor 3",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-plus-sized-woman-practicing-selfcare_23-2150172277.jpg"},
      ]}
      title="Slaapkamers & Ruimtes"
      description="Kies voor comfort."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "p1",          badge: "Populair",          price: "€527",          subtitle: "Hoogseizoen (per weekend)",          buttons: [
            {
              text: "Boek nu",              href: "..."},
          ],
          features: [
            "Schoonmaak €80",            "Water & Energie €19/nacht"],
        },
        {
          id: "p2",          badge: "",          price: "",          subtitle: "",          buttons: [
            {
              text: "Boek nu",              href: "..."},
          ],
          features: [
            "",            ""],
        },
      ]}
      title="Tarieven"
      description="Ontdek de prijzen voor uw verblijf."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Groep vrienden",          role: "Maart 2026",          testimonial: "Magnifique maison situé dans un environnement calme et reposant.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778612084981-aohrbglq.png"},
        {
          id: "t2",          name: "Gezin",          role: "November 2025",          testimonial: "Mooie locatie, rustige omgeving... komen graag nog eens terug.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778612114902-zow1i3v2.png"},
        {
          id: "t3",          name: "B. Thierry",          role: "April 2025",          testimonial: "Geheel volgens verwachting.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778612153959-yg98qjok.png"},
        {
          id: "t4",          name: "Koppel",          role: "September 2025",          testimonial: "Een aangenaam gezellig vakantiehuis met leuke accenten.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DdSWoVma3dL39rEy82XgoGtQpX/uploaded-1778612179373-idayk51n.png"},
        {
          id: "t5",          name: "Gast 5",          role: "2025",          testimonial: "Topervaring in een prachtig chalet.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-woman-autumn-forest_23-2148705740.jpg"},
      ]}
      title="Gastbeoordelingen"
      description="Gemiddelde score: 9.6/10"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Contact"
      title="Klaar voor uw verblijf?"
      description="Boek direct via onze partner."
      buttons={[
        {
          text: "Boek nu",          href: "..."},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Erezée, Ardennen",              href: "#"},
            {
              label: "Ardennes-Étape",              href: "https://www.ardennes-etape.be"},
          ],
        },
        {
          items: [
            {
              label: "Aankomst: 16:00",              href: "#"},
            {
              label: "Vertrek: 10:00",              href: "#"},
          ],
        },
      ]}
      logoText="Chalet La Mairie"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}