"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 FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Onze Troeven",          id: "troeven"},
        {
          name: "Galerij",          id: "galerij"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Frituur Op Den Hoek"
      bottomLeftText="Openingsuren: Di-Zo 11:30 - 22:00"
      bottomRightText="Tongeren"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "plain"}}
      title="Frituur Op Den Hoek in Tongeren"
      description="Elke dag verse frietjes en kwaliteitsvolle snacks. Kom langs en geniet van onze ambachtelijke producten in een moderne setting."
      kpis={[
        {
          value: "11:30",          label: "Start Opening"},
        {
          value: "22:00",          label: "Sluitingstijd"},
        {
          value: "Tongeren",          label: "Locatie"},
      ]}
      enableKpiAnimation={true}
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-salted-french-fries-with-ketchup-herbs_23-2148701495.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/woman-with-big-smile-her-face-after-big-shopping_329181-18748.jpg",          alt: "Klant 1"},
        {
          src: "http://img.b2bpic.net/free-photo/young-woman-point-finger-you_93675-135553.jpg",          alt: "Klant 2"},
        {
          src: "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",          alt: "Klant 3"},
        {
          src: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3668.jpg",          alt: "Klant 4"},
        {
          src: "http://img.b2bpic.net/free-photo/funny-stylish-indian-man-sitting-fast-food-cafe-eating-french-fries-show-his-tongue_627829-1356.jpg",          alt: "Klant 5"},
      ]}
      avatarText="Al 500+ tevreden klanten"
      marqueeItems={[
        {
          type: "text",          text: "Dagverse frietjes"},
        {
          type: "text",          text: "Ambachtelijke snacks"},
        {
          type: "text",          text: "Beste kwaliteit"},
        {
          type: "text",          text: "Snelle service"},
        {
          type: "text",          text: "Gezellige sfeer"},
      ]}
    />
  </div>

  <div id="troeven" data-section="troeven">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Snelle bediening",          description: "Geen lange wachttijden, wij werken efficiënt zodat u snel van uw verse maaltijd geniet.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/top-view-fried-chicken-nuggets-sauces-chopping-boards_23-2148646590.jpg"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/top-view-different-cookies-cereal-balls-cloth-surface_176474-595.jpg"}
        },
        {
          title: "Verse snacks",          description: "Wij werken uitsluitend met dagverse ingrediënten van de hoogste kwaliteit.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-french-fries-cutting-board-dark-background-dish-fast-food-sandwich-toast-snack-dinner_140725-158671.jpg"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/bright-cereal-inscription-old-chalkboard_23-2147962322.jpg"}
        },
        {
          title: "Vriendelijke service",          description: "Gastvrijheid staat bij ons centraal. U bent altijd welkom met een glimlach.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/front-view-french-fries-inside-little-basket-brown-desk-potato-fast-food-burger-meal_140725-95258.jpg"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/main-course-restaurant_7939-2305.jpg"}
        },
      ]}
      showStepNumbers={true}
      title="Onze Troeven"
      description="Waarom kiezen klanten steeds weer voor Frituur Op Den Hoek?"
    />
  </div>

  <div id="galerij" data-section="galerij">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          name: "Patat met Mayonaise",          price: "4.50€",          imageSrc: "http://img.b2bpic.net/free-photo/crispy-chicken-nuggets-with-fries_140725-2278.jpg"},
        {
          id: "p2",          name: "Frikadel Speciaal",          price: "3.50€",          imageSrc: "http://img.b2bpic.net/free-photo/fried-potatoes-with-ketchup-mayonnaise_114579-19733.jpg"},
        {
          id: "p3",          name: "Combo Special",          price: "7.50€",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-breakfast-with-copy-space_23-2148604173.jpg"},
        {
          id: "p4",          name: "Grote portie friet",          price: "5.00€",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-mini-burgers-with-beef-patty-cheese-salad-french-fries-table_141793-5017.jpg"},
        {
          id: "p5",          name: "Extra snack",          price: "2.50€",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-french-fries-with-seasonings-dark-bread-loafs-brown-table-potato-bread-meal-burger-food_140725-104023.jpg"},
        {
          id: "p6",          name: "Frisse saus",          price: "0.80€",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-yummy-cutlets-with-onion-rings-grey-floor-meat-dish-meal-photo_140725-47081.jpg"},
      ]}
      title="Patat Met Mayonaise En Frikadel Speciaal"
      description="Bekijk onze trots: de ultieme Belgische combinatie."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="De lekkerste frietjes van Tongeren! Altijd warm, vers en met een glimlach geserveerd."
      rating={5}
      author="Annelies V."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg",          alt: "Klant 1"},
        {
          src: "http://img.b2bpic.net/free-photo/young-hispanic-woman-holding-uncooked-pasta-bowl-celebrating-achievement-with-happy-smile-winner-expression-with-raised-hand_839833-16047.jpg",          alt: "Klant 2"},
        {
          src: "http://img.b2bpic.net/free-photo/top-view-smiling-young-man-red-blouse-holding-orders-bank-card-white-wall_179666-33434.jpg",          alt: "Klant 3"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-woman-standing-kitchen_107420-12358.jpg",          alt: "Klant 4"},
        {
          src: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",          alt: "Klant 5"},
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",          title: "Zijn jullie ook op maandag open?",          content: "Nee, onze rustdag is op maandag."},
        {
          id: "f2",          title: "Kan ik online bestellen?",          content: "Nog niet, maar u kunt wel telefonisch doorgeven."},
        {
          id: "f3",          title: "Is er parkeergelegenheid?",          content: "Ja, er is voldoende gratis parkeerruimte voor de deur."},
      ]}
      sideTitle="Veelgestelde vragen"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Neem contact op"
      description="Heeft u een vraag of wilt u een grote bestelling doorgeven? Bel ons of stuur een bericht."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Uw naam"},
        {
          name: "email",          type: "email",          placeholder: "Uw e-mailadres"},
      ]}
      textarea={{
        name: "message",        placeholder: "Uw vraag of bestelling"}}
      imageSrc="http://img.b2bpic.net/free-photo/subway-sign-metro-entrance-new-york_181624-43525.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/young-woman-with-dyed-hair-near-shop_23-2149488667.jpg"
      logoText="Frituur Op Den Hoek"
      columns={[
        {
          title: "Navigatie",          items: [
            {
              label: "Home",              href: "#hero"},
            {
              label: "Onze Troeven",              href: "#troeven"},
          ],
        },
        {
          title: "Info",          items: [
            {
              label: "Adres",              href: "#contact"},
            {
              label: "Privacy",              href: "#"},
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
