"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCenter from '@/components/sections/contact/ContactCenter';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="grid"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Bella Italia"
          navItems={[
            { name: "Menu", id: "menu" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Reserve a Table", href: "#contact" }}
          className="py-4 px-6"
          buttonClassName="px-5 py-2"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          background={{ variant: "plain" }}
          tag="Authentic Italian Flavors"
          title="Experience the Taste of Italy at Bella Italia"
          description="Savor traditional Italian cuisine crafted with passion and the freshest ingredients. From classic pasta to delectable desserts, every dish tells a story."
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-large-tube-pasta-with-chicken-cherry-tomato-with-chopped-parsley_141793-1840.jpg?_wi=1",              imageAlt: "Gourmet Italian pasta dish"},
            {
              imageSrc: "https://img.b2bpic.net/free-photo/wicker-gray-table-with-glass-gray-chairs_140725-3025.jpg",              imageAlt: "Cozy Italian restaurant interior"},
          ]}
          rating={5}
          ratingText="Loved by Our Guests"
          buttons={[
            { text: "View Our Menu", href: "#menu" },
            { text: "Book a Table", href: "#contact" },
          ]}
          mediaAnimation="slide-up"
          tagAnimation="blur-reveal"
          buttonAnimation="slide-up"
          className="py-20"
          textBoxClassName="text-center lg:text-left"
          titleClassName="text-4xl md:text-5xl lg:text-6xl leading-tight font-headingFontWeight"
          descriptionClassName="text-lg md:text-xl"
          tagClassName="text-primary-cta font-medium"
          buttonContainerClassName="flex flex-col sm:flex-row justify-center lg:justify-start gap-4 mt-6"
          buttonClassName="min-w-[180px]"
          mediaWrapperClassName="grid grid-cols-1 gap-4 lg:grid-cols-2"
          mediaItemClassName="rounded-lg overflow-hidden shadow-lg"
          ratingClassName="text-accent"
          ratingTextClassName="text-sm text-foreground/70"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Story"
          title="Where Tradition Meets Culinary Excellence"
          buttons={[{ text: "Learn More", href: "#" }]}
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
          buttonAnimation="slide-up"
          className="py-20"
          titleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight text-center"
          buttonContainerClassName="flex justify-center mt-8"
          buttonClassName="min-w-[180px]"
        />
         <p className="text-lg md:text-xl max-w-3xl mx-auto text-center -mt-12 text-foreground/80">
          At Bella Italia, we're dedicated to bringing the authentic taste of Italy to your table. Our chefs use time-honored recipes passed down through generations, combined with fresh, locally sourced ingredients to create an unforgettable dining experience. Every visit is a journey to the heart of Italy.
        </p>
      </div>

      <div id="menu" data-section="menu">
        <ProductCardOne
          title="Our Delicious Menu"
          description="Explore a symphony of flavors, from classic pasta dishes to fresh, wood-fired pizzas and decadent desserts."
          products={[
            {
              id: "1",              name: "Classic Margherita Pizza",              price: "$18.00",              imageSrc: "https://img.b2bpic.net/free-photo/homemade-pizza-food-photography-recipe-idea_53876-38.jpg",              imageAlt: "Fresh Margherita pizza"},
            {
              id: "2",              name: "Homemade Ravioli with Sage Butter",              price: "$22.00",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-fresh-ingredients-dark-surface_23-2147606593.jpg",              imageAlt: "Homemade Ravioli"},
            {
              id: "3",              name: "Tiramisu Classico",              price: "$10.00",              imageSrc: "https://img.b2bpic.net/free-photo/tasty-homemade-tiramisu-cake_114579-43338.jpg",              imageAlt: "Classic Tiramisu"},
            {
              id: "4",              name: "Spaghetti Carbonara",              price: "$20.00",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-large-tube-pasta-with-chicken-cherry-tomato-with-chopped-parsley_141793-1840.jpg?_wi=2",              imageAlt: "Spaghetti Carbonara"},
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          className="py-20"
          textBoxClassName="text-center"
          textBoxTitleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
          textBoxDescriptionClassName="text-lg md:text-xl max-w-3xl mx-auto mb-10"
          cardClassName="rounded-lg overflow-hidden shadow-md group"
          imageClassName="w-full h-60 object-cover transform transition-transform duration-300 group-hover:scale-105"
          cardNameClassName="text-xl font-medium mt-4 px-4"
          cardPriceClassName="text-lg text-primary-cta font-semibold px-4 pb-4"
          gridClassName="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Guests Say"
          description="Hear from our cherished customers about their dining experiences at Bella Italia."
          testimonials={[
            {
              id: "1",              name: "Sofia Rossi",              handle: "@sofiar",              testimonial: "Bella Italia is a true gem! The pasta is divine, and the ambiance makes you feel like you're in Rome. Highly recommend the tiramisu!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=1",              imageAlt: "Sofia Rossi avatar"},
            {
              id: "2",              name: "Marco Bianchi",              handle: "@marcob",              testimonial: "An exquisite culinary journey. Every dish was perfectly crafted, and the service was impeccable. My new favorite Italian restaurant!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=2",              imageAlt: "Marco Bianchi avatar"},
            {
              id: "3",              name: "Elena Ricci",              handle: "@elenar",              testimonial: "The best authentic Italian food I've had outside of Italy. The flavors are incredible, and the staff are so welcoming. A must-visit!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=3",              imageAlt: "Elena Ricci avatar"},
            {
              id: "4",              name: "Giovanni Esposito",              handle: "@giovannie",              testimonial: "From appetizers to dessert, everything was fantastic. The wine selection is superb, and the atmosphere is perfect for a special evening.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=4",              imageAlt: "Giovanni Esposito avatar"},
          ]}
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          className="py-20 bg-background-accent/20"
          textBoxClassName="text-center"
          textBoxTitleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
          textBoxDescriptionClassName="text-lg md:text-xl max-w-3xl mx-auto mb-10"
          cardClassName="bg-card p-6 rounded-lg shadow-lg flex flex-col items-center text-center h-full"
          imageWrapperClassName="w-20 h-20 rounded-full overflow-hidden mb-4 border-2 border-primary-cta"
          imageClassName="w-full h-full object-cover"
          nameClassName="font-semibold text-lg"
          handleClassName="text-sm text-foreground/60 mb-2"
          testimonialClassName="text-foreground/80 italic mb-4"
          ratingClassName="text-accent"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Common Questions"
          sideDescription="Find answers to the most frequently asked questions about Bella Italia."
          faqs={[
            {
              id: "1",              title: "Do you take reservations?",              content: "Yes, we highly recommend making a reservation, especially for weekend evenings. You can book through our website or by calling us directly."},
            {
              id: "2",              title: "What are your opening hours?",              content: "We are open for dinner from Tuesday to Sunday, 5:00 PM - 10:00 PM. Closed on Mondays."},
            {
              id: "3",              title: "Do you offer vegetarian or vegan options?",              content: "Absolutely! Our menu includes a variety of vegetarian and vegan dishes, and our chefs are happy to accommodate dietary restrictions. Please inform your server."},
            {
              id: "4",              title: "Can you host private events?",              content: "Yes, we have private dining options available for special occasions and events. Please contact us for more details and availability."},
          ]}
          textPosition="left"
          faqsAnimation="slide-up"
          useInvertedBackground={false}
          className="py-20"
          textContainerClassName="pr-4 lg:pr-8"
          faqsContainerClassName="pl-4 lg:pl-8"
          sideTitleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
          sideDescriptionClassName="text-lg text-foreground/80 mt-4"
          accordionClassName="rounded-lg shadow-sm border border-border/20"
          accordionTitleClassName="font-semibold text-lg"
          accordionContentClassName="text-foreground/70"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Visit Us"
          title="Book Your Table or Send a Message"
          description="We'd love to welcome you to Bella Italia. Make a reservation online or reach out with any questions. We look forward to serving you!"
          background={{ variant: "plain" }}
          inputPlaceholder="Your Email Address"
          buttonText="Send Message"
          termsText="By sending a message, you agree to our privacy policy."
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
          className="py-20 bg-background-accent/20"
          contentClassName="max-w-xl mx-auto text-center"
          tagClassName="text-primary-cta font-medium mb-4"
          titleClassName="text-3xl md:text-4xl lg:text-5xl leading-tight font-headingFontWeight"
          descriptionClassName="text-lg md:text-xl mt-4"
          formWrapperClassName="mt-8"
          formClassName="flex flex-col gap-4 items-center"
          inputClassName="w-full max-w-md p-3 rounded-md border border-accent/50 focus:ring-2 focus:ring-primary-cta focus:border-primary-cta transition-colors"
          buttonClassName="w-full max-w-md p-3 rounded-md text-white font-semibold"
          termsClassName="text-sm text-foreground/60 mt-4"
        />
      </div>
    </ThemeProvider>
  );
}