"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="fluid"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Over Pyk",
          id: "/over-pyk",
        },
        {
          name: "Webshop",
          id: "/shop",
        },
        {
          name: "Events",
          id: "/events",
        },
        {
          name: "Blog",
          id: "/blog",
        },
        {
          name: "Relatiegeschenken",
          id: "/relatiegeschenken",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="Pyk Slyterij"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="PYK"
      description="Eigenwijs in Slijterijen. Ontdek onze unieke selectie wijnen, sterke dranken en delicatessen."
      buttons={[
        {
          text: "Bekijk Webshop",
          href: "/shop",
        },
        {
          text: "Ontdek Pyk",
          href: "/over-pyk",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/selective-focus-shot-alcoholic-drinks-bar_181624-58203.jpg"
      imageAlt="Interieur van Pyk Slyterij Deventer"
      showDimOverlay={true}
    />
  </div>

  <div id="usps" data-section="usps">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Onze Passie"
      title="Waarom Pyk?"
      description="Bij Pyk Slyterij draait alles om een unieke ervaring, deskundig advies en een buitengewone selectie."
      subdescription="Ontdek de diepte van 'Beleving' met onze proeverijen en sfeervolle winkel. Profiteer van persoonlijk 'Advies' van onze experts die u begeleiden bij elke keuze. En laat u verrassen door onze 'Selectie' van zeldzame wijnen, sterke dranken en heerlijke delicatessen."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/top-view-hands-holding-food_23-2149410425.jpg"
      imageAlt="Man die een wijnfles kiest in een kelder"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="recommended-products" data-section="recommended-products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "prod-1",
          name: "Exclusieve Rode Wijn",
          price: "€34,95",
          imageSrc: "http://img.b2bpic.net/free-photo/carafe-glass-wine-white-table_52683-96526.jpg",
          imageAlt: "Fles rode wijn",
          rating: 5,
        },
        {
          id: "prod-2",
          name: "Frisse Witte Wijn",
          price: "€19,50",
          imageSrc: "http://img.b2bpic.net/free-photo/message-bottle-beach_1204-107.jpg",
          imageAlt: "Fles witte wijn",
          rating: 4,
        },
        {
          id: "prod-3",
          name: "Ambachtelijke Gin",
          price: "€49,00",
          imageSrc: "http://img.b2bpic.net/free-photo/wine-bottle-with-goblet-hookah-tubes-ashtray_176474-6111.jpg",
          imageAlt: "Fles gin",
          rating: 5,
        },
        {
          id: "prod-4",
          name: "Premium Single Malt Whisky",
          price: "€75,00",
          imageSrc: "http://img.b2bpic.net/free-photo/scotch-whiskey-glass-wooden-table_123827-22162.jpg",
          imageAlt: "Glas whisky met fles",
          rating: 5,
        },
        {
          id: "prod-5",
          name: "Gourmet Kaasplank",
          price: "€28,75",
          imageSrc: "http://img.b2bpic.net/free-photo/delicious-gourmet-snacks-board_23-2148325932.jpg",
          imageAlt: "Kaasplank met delicatessen",
          rating: 4,
        },
        {
          id: "prod-6",
          name: "Feestelijke Mousserende Wijn",
          price: "€22,95",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-champagne-dark-table_140725-99998.jpg",
          imageAlt: "Fles mousserende wijn",
          rating: 4,
        },
      ]}
      title="Aanbevolen Producten"
      description="Een zorgvuldige selectie van onze favoriete wijnen, sterke dranken en delicatessen. Perfect om te proeven of cadeau te geven."
    />
  </div>

  <div id="blog-preview" data-section="blog-preview">
      <BlogCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      title="Laatste Nieuws & Blogs"
      description="Blijf op de hoogte van de nieuwste trends, diepgaande artikelen en verhalen uit de wereld van Pyk."
      blogs={[
        {
          id: "blog-1",
          category: "Wijn",
          title: "De Perfecte Wijn voor het Seizoen",
          excerpt: "Ontdek welke wijnen het beste passen bij de smaken en stemmingen van elk seizoen.",
          imageSrc: "http://img.b2bpic.net/free-photo/person-collecting-grapes-from-vineyard_1268-15030.jpg",
          imageAlt: "Wijngaard tijdens de oogst",
          authorName: "Pyk Slyterij",
          authorAvatar: "asset://avatar-1",
          date: "15 maart 2024",
        },
        {
          id: "blog-2",
          category: "Sterke Drank",
          title: "Cocktails maken als een Pro: Tips & Tricks",
          excerpt: "Verbaas uw gasten met deze eenvoudige maar indrukwekkende cocktailrecepten.",
          imageSrc: "http://img.b2bpic.net/free-photo/tasty-daiquiri-cocktail-with-orange-high-angle_23-2149418284.jpg",
          imageAlt: "Vers gemaakte cocktail",
          authorName: "Pyk Slyterij",
          authorAvatar: "asset://avatar-2",
          date: "8 maart 2024",
        },
        {
          id: "blog-3",
          category: "Delicatessen",
          title: "De Kunst van Spijs-Wijn Combinatie",
          excerpt: "Leer hoe u de ideale wijn combineert met verschillende delicatessen voor een culinaire ervaring.",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-cheese-platter-with-grapes-nuts-honey-tray_176474-3034.jpg",
          imageAlt: "Kaas en wijn pairing",
          authorName: "Pyk Slyterij",
          authorAvatar: "asset://avatar-3",
          date: "1 maart 2024",
        },
      ]}
    />
  </div>

  <div id="events-preview" data-section="events-preview">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "Exclusieve Wijnproeverijen",
          "Masterclasses Sterke Dranken",
          "Delicatessen Workshops",
        ],
      }}
      positiveCard={{
        items: [
          "Leer van de Experts",
          "Ontdek Nieuwe Smaken",
          "Ontmoet gelijkgestemden",
        ],
      }}
      title="Ervaar Meer bij Pyk"
      description="Duik dieper in de wereld van wijnen en dranken met onze exclusieve proeverijen en evenementen. Een unieke kans om te leren en te genieten."
      tag="Komende Evenementen"
      buttons={[
        {
          text: "Bekijk Evenementenkalender",
          href: "/events",
        },
      ]}
    />
  </div>

  <div id="newsletter" data-section="newsletter">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient",
      }}
      tag="Blijf Geïnformeerd"
      title="Meld u aan voor onze Nieuwsbrief"
      description="Ontvang exclusieve aanbiedingen, uitnodigingen voor proeverijen en het laatste nieuws direct in uw inbox."
      inputPlaceholder="Voer uw e-mailadres in"
      buttonText="Aanmelden"
      termsText="Door aan te melden, gaat u akkoord met ons privacybeleid."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "Over Pyk",
              href: "/over-pyk",
            },
            {
              label: "Ons Team",
              href: "/over-pyk#team",
            },
            {
              label: "De Wynkantine",
              href: "/wynkantine",
            },
          ],
        },
        {
          items: [
            {
              label: "Webshop",
              href: "/shop",
            },
            {
              label: "Wijnen",
              href: "/shop?category=wijn",
            },
            {
              label: "Sterke Dranken",
              href: "/shop?category=sterkedranken",
            },
            {
              label: "Delicatessen",
              href: "/shop?category=delicatessen",
            },
          ],
        },
        {
          items: [
            {
              label: "Evenementen",
              href: "/events",
            },
            {
              label: "Blog",
              href: "/blog",
            },
            {
              label: "Relatiegeschenken",
              href: "/relatiegeschenken",
            },
            {
              label: "Contact",
              href: "/contact",
            },
          ],
        },
        {
          items: [
            {
              label: "Instagram",
              href: "https://instagram.com/pykslyterij",
            },
            {
              label: "Facebook",
              href: "https://facebook.com/pykslyterij",
            },
          ],
        },
      ]}
      logoText="Pyk Slyterij"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
