"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';

const initialMenuProducts = [
  { id: "1", name: "Spicy Beef Karahi", price: "$18.99", imageSrc: "https://framerusercontent.com/images/kC11vL7j733D6t7vK0pD1o2X1Q.png", imageAlt: "Spicy Beef Karahi" },
  { id: "2", name: "Chicken Biryani", price: "$15.50", imageSrc: "https://framerusercontent.com/images/K1eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Chicken Biryani" },
  { id: "3", name: "Mutton Korma", price: "$22.00", imageSrc: "https://framerusercontent.com/images/qX1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Mutton Korma" },
  { id: "4", name: "Seekh Kebab", price: "$12.99", imageSrc: "https://framerusercontent.com/images/F1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Seekh Kebab" },
  { id: "5", name: "Paya Curry", price: "$19.75", imageSrc: "https://framerusercontent.com/images/T4eR1N6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Paya Curry" },
  { id: "6", name: "Nihari", price: "$16.25", imageSrc: "https://framerusercontent.com/images/V6W2x2k7V7cK1eTqN6Q4B4z0M8y5D2k.png", imageAlt: "Nihari" }
];

const homeSections = [
  {
    id: "hero",    Component: HeroBillboardRotatedCarousel,
    props: {
      title: "Experience the Authentic Flavors of Pakistan",      description: "Bringing the rich culinary heritage of Pakistan to your plate with a modern twist. Savor traditional dishes made with fresh, local ingredients and time-honored recipes.",      background: { variant: "rotated-rays-animated-grid" },
      tag: "Welcome to The Flavorful Cafe",      buttons: [
        { text: "View Menu", href: "#menu" },
        { text: "About Us", href: "#about" }
      ],
      carouselItems: [
        { imageSrc: "https://framerusercontent.com/images/kC11vL7j733D6t7vK0pD1o2X1Q.png", imageAlt: "Spicy Beef Karahi" },
        { imageSrc: "https://framerusercontent.com/images/K1eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Chicken Biryani" },
        { imageSrc: "https://framerusercontent.com/images/qX1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Mutton Korma" },
        { imageSrc: "https://framerusercontent.com/images/F1tP3P5D0F5R8N8V6W2x2k7V7c.png", imageAlt: "Seekh Kebab" },
        { imageSrc: "https://framerusercontent.com/images/T4eR1N6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Paya Curry" },
        { imageSrc: "https://framerusercontent.com/images/V6W2x2k7V7cK1eTqN6Q4B4z0M8y5D2k.png", imageAlt: "Nihari" }
      ]
    }
  },
  {
    id: "menu",    Component: ProductCardThree,
    props: {
      title: "Our Signature Menu",      description: "Discover a diverse array of authentic Pakistani dishes, expertly prepared to tantalize your taste buds. From rich curries to succulent kebabs, every meal is a journey.",      tag: "Taste Tradition",      gridVariant: "three-columns-all-equal-width",      animationType: "entrance-slide",      useInvertedBackground: false,
      buttons: [{ text: "View Full Menu", href: "#" }]
    }
  },
  {
    id: "about",    Component: TextSplitAbout,
    props: {
      useInvertedBackground: false,
      title: "Our Story: A Culinary Journey",      description: [
        "The Flavorful Cafe was born from a deep love for Pakistani cuisine and a desire to share its vibrant flavors with the world. Our founders, inspired by their grandmother's kitchen, envisioned a place where traditional recipes could be celebrated and savored.",        "Every spice, every ingredient, and every cooking technique is chosen with care, ensuring that each dish embodies the authentic taste of Pakistan. We believe in creating more than just food; we create experiences that bring people together, fostering community and connection.",        "Join us as we continue to write our story, one delicious meal at a time. We're committed to preserving our culinary heritage while offering a welcoming space for all to enjoy."
      ],
      buttons: [{ text: "Learn More", href: "/about" }]
    }
  },
  {
    id: "features",    Component: FeatureCardNine,
    props: {
      title: "How We Deliver Authenticity",      description: "Our commitment to genuine Pakistani flavors is reflected in every step of our process, from sourcing ingredients to culinary craftsmanship.",      tag: "Our Pillars",      showStepNumbers: true,
      animationType: "entrance-slide",      textboxLayout: "default",      useInvertedBackground: true,
      features: [
        {
          title: "Hand-Picked Spices",          description: "We source the finest spices directly from local markets in Pakistan, ensuring unparalleled aroma and flavor in every dish.",          phoneOne: { imageSrc: "https://framerusercontent.com/images/0g0U4pQWf64sC15vW2f2x4y3z1Q.png", imageAlt: "Hand-picked spices" },
          phoneTwo: { imageSrc: "https://framerusercontent.com/images/R9eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Spice market" }
        },
        {
          title: "Traditional Recipes",          description: "Our chefs adhere strictly to age-old family recipes passed down through generations, preserving the true essence of Pakistani cuisine.",          phoneOne: { imageSrc: "https://framerusercontent.com/images/X1eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Traditional recipe book" },
          phoneTwo: { imageSrc: "https://framerusercontent.com/images/W2x2k7V7cV6T4eR1N6Q4B4z0M8y5D2k.png", imageAlt: "Chef preparing food traditionally" }
        },
        {
          title: "Fresh Local Ingredients",          description: "We complement our imported spices with fresh, locally sourced ingredients to ensure quality and support our community.",          phoneOne: { imageSrc: "https://framerusercontent.com/images/D1o2X1QkC11vL7j733D6t7vK0pD.png", imageAlt: "Fresh vegetables" },
          phoneTwo: { imageSrc: "https://framerusercontent.com/images/M8y5D2k2k7V7cK1eTqN6Q4B4z0.png", imageAlt: "Farm-fresh produce" }
        }
      ]
    }
  },
  {
    id: "testimonials",    Component: TestimonialCardTwelve,
    props: {
      cardTitle: "What Our Guests Say",      cardTag: "Satisfied Palates",      cardAnimation: "entrance-slide",      useInvertedBackground: false,
      testimonials: [
        { id: "1", name: "Aisha Khan", imageSrc: "https://framerusercontent.com/images/L9eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Aisha Khan" },
        { id: "2", name: "Omar Malik", imageSrc: "https://framerusercontent.com/images/K2x2k7V7cV6T4eR1N6Q4B4z0M8y5D.png", imageAlt: "Omar Malik" },
        { id: "3", name: "Fatima Ali", imageSrc: "https://framerusercontent.com/images/R9eTqN6Q4B4z0M8y5D2k2k7V7c.png", imageAlt: "Fatima Ali" }
      ]
    }
  },
  {
    id: "faq",    Component: FaqBase,
    props: {
      title: "Frequently Asked Questions",      description: "Find answers to common questions about our cafe, menu, and services.",      tag: "Your Queries Answered",      faqsAnimation: "entrance-slide",      textboxLayout: "default",      useInvertedBackground: true,
      faqs: [
        {
          id: "1",          title: "What are your most popular dishes?",          content: "Our Chicken Biryani, Beef Karahi, and Mutton Korma are highly recommended by our regulars. Don't forget to try our freshly baked Naan!"
        },
        {
          id: "2",          title: "Do you offer catering services?",          content: "Yes, we offer catering for events of all sizes. Please contact us directly for customized menus and pricing."
        },
        {
          id: "3",          title: "Are there vegetarian or vegan options?",          content: "We have a selection of delicious vegetarian dishes, and we can often adapt certain items to be vegan-friendly. Please inquire with our staff."
        },
        {
          id: "4",          title: "What are your operating hours?",          content: "We are open from 11 AM to 10 PM, Monday through Saturday. We are closed on Sundays."
        }
      ]
    }
  },
  {
    id: "contact",    Component: ContactCenter,
    props: {
      tag: "Get in Touch",      title: "Contact Us",      description: "Have questions or want to make a reservation? Reach out to us!",      background: { variant: "radial-gradient" },
      useInvertedBackground: false,
      inputPlaceholder: "Your email address",      buttonText: "Send Message",      termsText: "By sending a message, you agree to our Privacy Policy."
    }
  },
  {
    id: "footer",    Component: FooterBase,
    props: {
      logoText: "The Flavorful Cafe",      copyrightText: "© 2024 The Flavorful Cafe. All rights reserved.",      columns: [
        {
          title: "Explore",          items: [
            { label: "Home", href: "/" },
            { label: "Menu", href: "#menu" },
            { label: "About Us", href: "/about" },
            { label: "Features", href: "#features" },
            { label: "Testimonials", href: "#testimonials" }
          ]
        },
        {
          title: "Support",          items: [
            { label: "FAQ", href: "#faq" },
            { label: "Contact", href: "#contact" },
            { label: "Privacy Policy", href: "#" },
            { label: "Terms of Service", href: "#" }
          ]
        },
        {
          title: "Connect",          items: [
            { label: "Facebook", href: "#" },
            { label: "Instagram", href: "#" },
            { label: "Twitter", href: "#" }
          ]
        }
      ]
    }
  }
];

export default function Home() {
  const [menuProducts] = useState(initialMenuProducts);

  const Navbar = NavbarLayoutFloatingInline;

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Menu", id: "#menu" },
    { name: "About Us", id: "/about" },
    { name: "Features", id: "#features" },
    { name: "Testimonials", id: "#testimonials" },
    { name: "FAQ", id: "#faq" },
    { name: "Contact", id: "#contact" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="noise"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <Navbar
            navItems={navItems}
            brandName="The Flavorful Cafe"
            button={{
              text: "Order Now",              href: "#menu"
            }}
          />
        </div>
        {homeSections.map((section, index) => {
          const SectionComponent = section.Component;
          if (section.id === "menu") {
            return (
              <div key={index} id={section.id} data-section={section.id}>
                <SectionComponent {...section.props} products={menuProducts} />
              </div>
            );
          }
          return (
            <div key={index} id={section.id} data-section={section.id}>
              <SectionComponent {...section.props} />
            </div>
          );
        })}
      </ReactLenis>
    </ThemeProvider>
  );
}
