"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import { Award, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="small"
        sizing="mediumLarge"
        background="grid"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <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="Khayal"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "rotated-rays-static-grid",
      }}
      title="Khayal Restaurant"
      description="Where culinary artistry meets refined hospitality. Experience an unforgettable journey of flavors."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/friends-eating-restaurant_23-2148006619.jpg",
          alt: "Guest",
        },
        {
          src: "http://img.b2bpic.net/free-photo/group-friends-cheering-with-wine-glasses-restaurant_23-2150520071.jpg",
          alt: "Guest",
        },
        {
          src: "http://img.b2bpic.net/free-photo/fashionable-hipster-guy-sitting-with-woman-cafe_273609-6829.jpg",
          alt: "Guest",
        },
        {
          src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285278.jpg",
          alt: "Guest",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-friends-having-good-time_23-2148395391.jpg",
          alt: "Guest",
        },
      ]}
      avatarText="Loved by thousands"
      buttons={[
        {
          text: "View Menu",
          href: "#menu",
        },
        {
          text: "Book Table",
          href: "#contact",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "Fine Dining",
        },
        {
          type: "text",
          text: "Authentic Flavors",
        },
        {
          type: "text",
          text: "Elegant Atmosphere",
        },
        {
          type: "text",
          text: "Master Chefs",
        },
        {
          type: "text",
          text: "Seasonal Ingredients",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Passion"
      metrics={[
        {
          icon: Award,
          label: "Gourmet Dishes",
          value: "50+",
        },
        {
          icon: Award,
          label: "Years Experience",
          value: "15",
        },
        {
          icon: Users,
          label: "Happy Guests",
          value: "100k+",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Fresh Ingredients",
          author: "Farm-to-Table",
          description: "We source only the finest local ingredients for our seasonal menu.",
          tags: [
            "Fresh",
            "Local",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-potato-pies-with-pumpkin-grey-background-bake-oven-color-dish-pie-cake_140725-121705.jpg",
        },
        {
          id: "f2",
          title: "Expert Chefs",
          author: "Culinary Masters",
          description: "Our chefs are dedicated to perfection in every plate they craft.",
          tags: [
            "Craft",
            "Expert",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-spaghetti-pasta-with-tomatoes-parsley-white-table_1253-953.jpg",
        },
        {
          id: "f3",
          title: "Warm Ambiance",
          author: "Sophisticated Design",
          description: "Relax in a setting designed for memorable social moments.",
          tags: [
            "Ambiance",
            "Luxury",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-recipe_23-2148145590.jpg",
        },
      ]}
      title="Why Choose Khayal"
      description="We blend traditional recipes with modern techniques to create a unique culinary experience."
    />
  </div>

  <div id="menu" data-section="menu">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Truffle Mushroom Risotto",
          price: "$28",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-dinner-with-meat-potatoes-served-with-green-black-plate-pepper-garlic-oil-bottle-cutlery-set_179666-19991.jpg",
        },
        {
          id: "p2",
          name: "Grilled Sea Bass",
          price: "$35",
          imageSrc: "http://img.b2bpic.net/free-photo/cooked-lamb-ribs-front-view_23-2148516965.jpg",
        },
        {
          id: "p3",
          name: "Fresh Garden Salad",
          price: "$18",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-red-tomatoes-with-greens-bell-peppers-dark-background_140725-137146.jpg",
        },
        {
          id: "p4",
          name: "Chocolate Fondant",
          price: "$15",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-eating-cake-with-fork_23-2147975374.jpg",
        },
        {
          id: "p5",
          name: "Signature Mocktail",
          price: "$12",
          imageSrc: "http://img.b2bpic.net/free-photo/purple-cocktail-table_140725-9605.jpg",
        },
        {
          id: "p6",
          name: "Roasted Tomato Soup",
          price: "$14",
          imageSrc: "http://img.b2bpic.net/free-photo/mushroom-soup-with-slice-mushroom_141793-873.jpg",
        },
      ]}
      title="Our Signature Menu"
      description="Discover our collection of handcrafted culinary masterpieces designed for your palate."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Sarah Ahmed",
          role: "Food Blogger",
          company: "Reviewer",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/man-presents-girl-ring_1398-4220.jpg",
        },
        {
          id: "t2",
          name: "Khalid Omar",
          role: "Customer",
          company: "Regular",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-friends-enyoing-dinner-party_23-2150717851.jpg",
        },
        {
          id: "t3",
          name: "Laila Jassim",
          role: "Design Director",
          company: "Guest",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-salad-cafe_1303-25277.jpg",
        },
        {
          id: "t4",
          name: "Mark Stevens",
          role: "Tourist",
          company: "Traveler",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/laughing-woman-with-dish-menu_23-2147681115.jpg",
        },
        {
          id: "t5",
          name: "Nora Ali",
          role: "Food Enthusiast",
          company: "Local",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-couple-talking-while-eating-lunch-restaurant_637285-9017.jpg",
        },
      ]}
      title="Guest Experiences"
      description="See why our guests return time and again to enjoy the Khayal experience."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Do you accept reservations?",
          content: "Yes, we highly recommend booking a table in advance via our website.",
        },
        {
          id: "q2",
          title: "Are there vegetarian options?",
          content: "Absolutely, we have a dedicated section for vegetarian dishes.",
        },
        {
          id: "q3",
          title: "Do you offer private dining?",
          content: "Yes, we provide private spaces for corporate meetings and special events.",
        },
      ]}
      sideTitle="Common Questions"
      sideDescription="Find answers to our most popular questions."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Contact Us"
      title="Reserve Your Table"
      description="Have questions or need to make a reservation? Get in touch with our team today."
      imageSrc="http://img.b2bpic.net/free-photo/top-view-empty-plate-pinked-brown-rustic-plate-food-kitchen-wood_140725-34253.jpg"
      mediaAnimation="slide-up"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/table-setting_74190-1957.jpg"
      logoText="Khayal"
      columns={[
        {
          title: "Menu",
          items: [
            {
              label: "Starters",
              href: "#menu",
            },
            {
              label: "Main Courses",
              href: "#menu",
            },
            {
              label: "Desserts",
              href: "#menu",
            },
          ],
        },
        {
          title: "Information",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Careers",
              href: "#",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact",
              href: "#contact",
            },
            {
              label: "Reservations",
              href: "#contact",
            },
            {
              label: "FAQs",
              href: "#faq",
            },
          ],
        },
      ]}
      copyrightText="© 2025 | Khayal Restaurant"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
