"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 FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="outline"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Menu", id: "#products" },
        { name: "About", id: "#about" },
        { name: "Team", id: "#team" },
        { name: "Contact", id: "#contact" },
      ]}
      brandName="Joanna's Place"
      button={{ text: "Order Now", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{ variant: "gradient-bars" }}
      title="Klintholm's Finest Burgers"
      description="Experience hand-crafted, locally sourced ingredients served right by the harbor. Joanna's Place offers premium comfort food in a relaxed seaside setting."
      kpis={[
        { value: "4 ", label: "Signature Burgers" },
        { value: "3+", label: "Years Quality" },
        { value: "Local", label: "Sourced Beef" },
      ]}
      enableKpiAnimation={true}
      buttons={[{ text: "View Menu", href: "#products" }]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s7pwiw"
      mediaAnimation="slide-up"
      avatars={[
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=05xi4v", alt: "Happy customer" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w5ai71", alt: "Happy customer" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u5z87", alt: "Happy customer" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6yt3v6", alt: "Happy customer" },
        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9mxt0y", alt: "Happy customer" },
      ]}
      avatarText="Loved by 500+ happy locals"
      marqueeItems={[
        { type: "text", text: "Locally Sourced" },
        { type: "text", text: "Fresh Ingredients" },
        { type: "text", text: "Harbor View" },
        { type: "text", text: "Artisan Buns" },
        { type: "text", text: "Hand-made Patties" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={true}
      title="Tradition by the bøf burger "
      description={[
        "Founded on a love for simple, delicious food, Joanna's Place brings a touch of premium dining to Klintholm Havn.",        "Every burger is crafted with passion, featuring fresh ingredients and local flavors that keep guests coming back year after year."]}
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        { id: "1", name: "bøf burger + fries ", price: "145 DKK", variant: "57cm lang  ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DS8UoOI3K0nEh8oaeUFTFna0oG/uploaded-1778266489472-x9k3bvp2.png" },
        { id: "2", name: "nakkefilet burger + fries  ", price: "149DKK", variant: "Bacon Cheese", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DS8UoOI3K0nEh8oaeUFTFna0oG/uploaded-1778266535533-6ndqlvdx.png" },
        { id: "3", name: "Kylling Burger", price: "139DKK", variant: "chicken  ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DS8UoOI3K0nEh8oaeUFTFna0oG/uploaded-1778266688832-lz1q07yg.png" },
        { id: "4", name: "korytko ", price: "135 DKK", variant: "Plant-based", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DS8UoOI3K0nEh8oaeUFTFna0oG/uploaded-1778266737732-r5kpjluh.png" },
        { id: "5", name: "goulash ", price: "89DKK", variant: "Chili", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DS8UoOI3K0nEh8oaeUFTFna0oG/uploaded-1778266694774-4o8iuxwe.png" },
        { id: "6", name: "buguette  ", price: "99DKK", variant: "57cm lang  ", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6zkdzb" },
      ]}
      title="Our Signature Creations"
      description="Discover our curated selection of premium burgers, each prepared to order."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", value: "5k+", title: "Served", description: "Burgers served over years", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rg8snl" },
        { id: "m2", value: "100%", title: "Local", description: "Local fresh meat", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gwb8rl" },
        { id: "m3", value: "5⭐️ ", title: "average Rating", description: "Average guest rating", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ol1e35" },
      ]}
      title="Our Success"
      description="Numbers that define our journey."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      members={[
        { id: "t1", name: "Joanna", role: "Owner & Founder", description: "Head of culinary vision", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ubx031" },
        { id: "t2", name: "Michał ", role: "Head Chef", description: "Master of the grill", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=36ildq" },
        { id: "t3", name: "ola/karol ", role: "Service Lead", description: "Ensuring great harbor vibes", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v8amwm" },
      ]}
      title="Meet The Crew"
      description="The passionate people behind Joanna's Place."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        { id: "1", name: "Anders Jensen", handle: "@andersj", testimonial: "Best burger in Denmark!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=05xi4v" },
        { id: "2", name: "Mette Nielsen", handle: "@metten", testimonial: "Amazing location and food.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w5ai71" },
        { id: "3", name: "Thomas Holm", handle: "@thomash", testimonial: "The atmosphere is top notch.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2u5z87" },
        { id: "4", name: "Lise Petersen", handle: "@lisep", testimonial: "Juicy and perfect every time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6yt3v6" },
        { id: "5", name: "Jens V.", handle: "@jensv", testimonial: "A must-visit when at the harbor.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9mxt0y" },
      ]}
      title="Guest Voices"
      description="What people say about our burgers."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "Do you accept reservations?", content: "Yes, for larger groups." },
        { id: "q2", title: "Are there vegan options?", content: "Absolutely, try our Veggie Delight." },
        { id: "q3", title: "Is parking available?", content: "Free parking at Klintholm Havn." },
      ]}
      title="Common Questions"
      description="Everything you need to know about us."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Visit Us Today"
      description="Join us at the harbor for the best burger experience in the area."
      inputs={[
        { name: "name", type: "text", placeholder: "Your Name", required: true },
        { name: "email", type: "email", placeholder: "Your Email", required: true },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=os2qec"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Menu", href: "#products" }, { label: "About", href: "#about" }] },
        { items: [{ label: "Contact", href: "#contact" }, { label: "Privacy", href: "#" }] },
      ]}
      logoText="Joanna's Place"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
