"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Award, ThumbsUp } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLarge"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Menu",
          id: "menu",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Chef Artisan"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Exquisite Culinary Experiences at Home"
      description="Transforming your kitchen into a world-class dining destination with bespoke menus and impeccable service."
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zq364i"
      showBlur={true}
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=puhpv7",
          alt: "Client",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h1756y",
          alt: "Client",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hhi4y",
          alt: "Client",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0ma4sr",
          alt: "Client",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n0ot9w",
          alt: "Client",
        },
      ]}
      avatarText="Trusted by 500+ happy clients"
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="The Chef's Philosophy"
      description={[
        "I believe that true luxury lies in the quality of ingredients and the intimacy of a shared meal. My mission is to craft memorable, personalized dining journeys for you and your guests.",
        "Every dish is curated to reflect your preferences, combining classic techniques with modern innovation to create an experience that transcends the ordinary.",
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Artisanal Ingredients",
          description: "Sourcing only the finest, freshest, and ethically sourced produce.",
          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k08eqy",
          },
          items: [],
          reverse: false,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zq364i",
          imageAlt: "fresh organic vegetables kitchen ingredients",
        },
        {
          title: "Bespoke Menus",
          description: "Custom crafted menus based on your specific dietary needs.",
          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tn6cit",
          },
          items: [],
          reverse: true,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n9hvpw",
          imageAlt: "fresh organic vegetables kitchen ingredients",
        },
        {
          title: "Full Service",
          description: "From prep to cleanup, leaving you to enjoy your evening.",
          media: {
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=itnxh1",
          },
          items: [],
          reverse: false,
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k0ftx3",
          imageAlt: "fresh organic vegetables kitchen ingredients",
        },
      ]}
      title="Comprehensive Private Service"
      description="Beyond just food, we provide a holistic culinary experience tailored for your comfort and convenience."
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Signature Beef Wellington",
          price: "$85",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k0ftx3",
        },
        {
          id: "p2",
          name: "Pan-Seared Scallops",
          price: "$65",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7cdabp",
        },
        {
          id: "p3",
          name: "Truffle Infused Risotto",
          price: "$70",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oved3b",
        },
        {
          id: "p4",
          name: "Wild Herb Roasted Salmon",
          price: "$60",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pk67vw",
        },
        {
          id: "p5",
          name: "Dark Chocolate Ganache Tart",
          price: "$45",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fixrut",
        },
        {
          id: "p6",
          name: "Seasonal Artisan Platter",
          price: "$55",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3u8sr0",
        },
      ]}
      title="Chef's Curated Selection"
      description="Explore our signature dishes created with seasonality and precision."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "12+",
          title: "Years Experience",
          description: "Professional culinary training",
          icon: Award,
        },
        {
          id: "m2",
          value: "500+",
          title: "Dinners Hosted",
          description: "Creating unique experiences",
          icon: Award,
        },
        {
          id: "m3",
          value: "100%",
          title: "Client Satisfaction",
          description: "Consistently exceeding expectations",
          icon: ThumbsUp,
        },
      ]}
      title="By The Numbers"
      description="Our dedication to quality, measured by the satisfaction of our exclusive clientele."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="The attention to detail and flavor combinations were simply breathtaking. A truly elevated home experience."
      rating={5}
      author="Isabella H., Private Dinner Guest"
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=puhpv7",
          alt: "Client 1",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h1756y",
          alt: "Client 2",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9hhi4y",
          alt: "Client 3",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0ma4sr",
          alt: "Client 4",
        },
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=n0ot9w",
          alt: "Client 5",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "What is the minimum group size?",
          content: "I specialize in intimate gatherings, typically from 2 to 20 guests.",
        },
        {
          id: "f2",
          title: "Do you accommodate allergies?",
          content: "Absolutely. Menus are customized to accommodate all dietary restrictions.",
        },
        {
          id: "f3",
          title: "How far in advance to book?",
          content: "It is recommended to book at least 2 weeks in advance for weekends.",
        },
      ]}
      title="Common Questions"
      description="Everything you need to know about booking your private chef experience."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Booking"
      title="Secure Your Date"
      description="Ready to design your perfect menu? Let's discuss your upcoming event."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Explore",
          items: [
            {
              label: "Menu",
              href: "#menu",
            },
            {
              label: "About",
              href: "#about",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Terms",
              href: "#",
            },
            {
              label: "Privacy",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Chef Artisan. All rights reserved."
      bottomRightText="Crafted with passion."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
