"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';

export default function ProductsPage() {
  const updatedNavItems = [
    { name: "Home", id: "#hero" },
    { name: "About", id: "#about" },
    { name: "Products", id: "/products" },
    { name: "Reviews", id: "#reviews" },
    { name: "Services", id: "/services" },
    { name: "Contact", id: "#contact" },
  ];

  const updatedFooterColumns = [
    {
      items: [
        { label: "Home", href: "#hero" },
        { label: "About Us", href: "#about" },
        { label: "Products", href: "/products" },
      ],
    },
    {
      items: [
        { label: "Reviews", href: "#reviews" },
        { label: "Contact", href: "#contact" },
        { label: "Reservations", href: "/services" },
      ],
    },
    {
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
      ],
    },
  ];

  const imagePlaceholder = "http://img.b2bpic.net/free-photo/menu-restaurant-still-life_23-2149405629.jpg";

  const milkshakes = [
    { id: "ms1", name: "Nutella", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms2", name: "Café", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms3", name: "Chocolat", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms4", name: "Vanille", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms5", name: "Cornflakes", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms6", name: "Fraise", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms7", name: "Caramel", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms8", name: "Lotus", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms9", name: "Kinder", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms10", name: "Oreo", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms11", name: "Kitkat", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms12", name: "M&M's", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder },
    { id: "ms13", name: "Snickers", price: "dh35.00", variant: "Milk-Shake", imageSrc: imagePlaceholder }
  ];

  const jusNaturels = [
    { id: "jn1", name: "Orange", price: "dh25.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
    { id: "jn2", name: "Mangue", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
    { id: "jn3", name: "Citron", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
    { id: "jn4", name: "Ananas", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
    { id: "jn5", name: "Fraise", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
    { id: "jn6", name: "Avocat", price: "dh30.00", variant: "Jus Naturels", imageSrc: imagePlaceholder },
    { id: "jn7", name: "Panaché", price: "dh35.00", variant: "Jus Naturels", imageSrc: imagePlaceholder }
  ];

  const mojitos = [
    { id: "mj1", name: "Virgin Mojito", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj2", name: "Blue Mojito", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj3", name: "Fraise", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj4", name: "Mangue", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj5", name: "Blueberry", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj6", name: "Ananas", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj7", name: "Pina Colada", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj8", name: "Passion Fruit", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj9", name: "Tropical", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder },
    { id: "mj10", name: "Red Mix Fruit", price: "dh30.00", variant: "Mojito", imageSrc: imagePlaceholder }
  ];

  const sodas = [
    { id: "s1", name: "Coca-Cola", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
    { id: "s2", name: "Fanta", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
    { id: "s3", name: "Hawai", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
    { id: "s4", name: "Schweppes Citron", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
    { id: "s5", name: "Cura-Calès", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
    { id: "s6", name: "Sprite", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder },
    { id: "s7", name: "Poms", price: "dh10.00", variant: "Sodas", imageSrc: imagePlaceholder }
  ];

  const eauMineral = [
    { id: "em1", name: "Eau Minéral (33 cl)", price: "dh10.00", variant: "Eau Minéral", imageSrc: imagePlaceholder }
  ];

  const kidsCombo = [
    { id: "kc1", name: "Cheese Burger, Frites, Jus", price: "Price varies", variant: "Kids Combo", imageSrc: imagePlaceholder }
  ];

  const icedCoffee = [
    { id: "ic1", name: "Iced Coffee Aromatisé (Caramel, chocolate, vanilla)", price: "dh30.00", variant: "Iced Coffee", imageSrc: imagePlaceholder },
    { id: "ic2", name: "Iced Latte (Sans sucre, sans saveur)", price: "dh30.00", variant: "Iced Coffee", imageSrc: imagePlaceholder },
    { id: "ic3", name: "Iced Americano", price: "Price varies", variant: "Iced Coffee", imageSrc: imagePlaceholder }
  ];

  const nespresso = [
    { id: "n1", name: "Ispirazione Roma", price: "dh20.00", variant: "Nespresso", imageSrc: imagePlaceholder },
    { id: "n2", name: "Ispirazione Napoli", price: "dh20.00", variant: "Nespresso", imageSrc: imagePlaceholder },
    { id: "n3", name: "Decaffeinato Ispirazione Ristretto Italiano", price: "dh20.00", variant: "Nespresso", imageSrc: imagePlaceholder }
  ];

  const meatDishes = [
    { id: "m1", name: "Mixed Beef And Chicken With Choice Of Sauce", price: "dh130.00", variant: "Meat", imageSrc: imagePlaceholder },
    { id: "m2", name: "Sliced Beef Tenderloin With Choice Of Sauce", price: "dh130.00", variant: "Meat", imageSrc: imagePlaceholder },
    { id: "m3", name: "Veal Fillet Medallion With Three Mushrooms", price: "dh160.00", variant: "Meat", imageSrc: imagePlaceholder },
    { id: "m4", name: "Veal Tenderloin With Choice Of Sauce", price: "dh180.00", variant: "Meat", imageSrc: imagePlaceholder },
    { id: "m5", name: "Ribeye Steak Of Beef Bordelaise", price: "dh150.00", variant: "Meat", imageSrc: imagePlaceholder },
    { id: "m6", name: "Confit Lamb Shank", price: "dh190.00", variant: "Meat", imageSrc: imagePlaceholder }
  ];

  const chickenDishes = [
    { id: "c1", name: "Sliced Chicken With Choice Of Sauce (Whole grain mustard, mushrooms)", price: "dh100.00", variant: "Chicken", imageSrc: imagePlaceholder },
    { id: "c2", name: "Pollo Parmigiana (Breaded chicken with tomato sauce and gratinated cheese)", price: "dh100.00", variant: "Chicken", imageSrc: imagePlaceholder },
    { id: "c3", name: "Chicken Breast Stuffed With Spinach And Ricotta", price: "dh100.00", variant: "Chicken", imageSrc: imagePlaceholder }
  ];

  const fishDishes = [
    { id: "f1", name: "Skewers Fish Marinated Of Herbs", price: "dh130.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f2", name: "John Dory Fish Normandy Style", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f3", name: "Prawns With Charmoula Sauce", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f4", name: "Fisherman's Skillet Provençal Style", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f5", name: "Sautéed Calamari With Garlic, Parsley & Lemon", price: "dh140.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f6", name: "Salmon Fillet With Lemon Butter", price: "dh150.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f7", name: "Trio Of Grilled Fish/Provençal Style", price: "dh170.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f8", name: "Sole Fillet Stuffed With Prawns", price: "dh170.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f9", name: "Spring Fish Stew", price: "dh190.00", variant: "Fish", imageSrc: imagePlaceholder },
    { id: "f10", name: "Assortment Of Grilled Fish Vanisca Style", price: "dh200.00", variant: "Fish", imageSrc: imagePlaceholder }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="blurBottom"
      cardStyle="gradient-radial"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={updatedNavItems}
            brandName="VANISCA"
          />
        </div>

        <div id="products-hero" data-section="products-hero">
          <ContactCTA
            useInvertedBackground={false}
            background={{ variant: "radial-gradient" }}
            tag="Our Full Offerings"
            title="Explore Our Diverse Menu"
            description="From refreshing beverages to exquisite main courses, discover the culinary delights crafted by VANISCA."
            buttons={[]}
            buttonAnimation="slide-up"
          />
        </div>

        <div id="milkshakes" data-section="milkshakes">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={milkshakes}
            title="Milk-Shakes"
            description="Indulge in our creamy and delightful milk-shakes, available in a variety of classic and unique flavors."
            tag="Drinks"
          />
        </div>

        <div id="jus-naturels" data-section="jus-naturels">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={jusNaturels}
            title="Jus Naturels (Natural Juices)"
            description="Freshly squeezed juices to invigorate your senses, made with the finest natural ingredients."
            tag="Drinks"
          />
        </div>

        <div id="mojitos" data-section="mojitos">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={mojitos}
            title="Mojitos"
            description="Our refreshing mojitos, crafted with a perfect blend of mint, lime, and your favorite fruit flavors."
            tag="Drinks"
          />
        </div>

        <div id="sodas" data-section="sodas">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={sodas}
            title="Sodas"
            description="A selection of popular sodas to quench your thirst."
            tag="Drinks"
          />
        </div>

        <div id="eau-mineral" data-section="eau-mineral">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={eauMineral}
            title="Eau Minéral (Mineral Water)"
            description="Refreshing mineral water, available in convenient sizes."
            tag="Drinks"
          />
        </div>

        <div id="kids-combo" data-section="kids-combo">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={kidsCombo}
            title="Kids Combo"
            description="Delicious and fun meal combinations perfect for our younger guests."
            tag="Kids Menu"
          />
        </div>

        <div id="iced-coffee" data-section="iced-coffee">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={icedCoffee}
            title="Iced Coffee"
            description="Cool down with our selection of expertly crafted iced coffees, from classic lattes to flavored delights."
            tag="Coffee"
          />
        </div>

        <div id="nespresso" data-section="nespresso">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={nespresso}
            title="Nespresso"
            description="Experience the rich and aromatic flavors of our premium Nespresso selections."
            tag="Coffee"
          />
        </div>

        <div id="meat" data-section="meat">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={meatDishes}
            title="Meat Dishes"
            description="Savor our succulent meat dishes, prepared with the finest cuts and your choice of delicious sauces."
            tag="Main Courses"
          />
        </div>

        <div id="chicken" data-section="chicken">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={chickenDishes}
            title="Chicken Dishes"
            description="Enjoy our tender and flavorful chicken creations, from classic recipes to unique culinary twists."
            tag="Main Courses"
          />
        </div>

        <div id="fish" data-section="fish">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={fishDishes}
            title="Fish Dishes"
            description="Delight in our fresh and exquisitely prepared fish and seafood, featuring the best catches of the day."
            tag="Main Courses"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCTA
            useInvertedBackground={false}
            background={{ variant: "radial-gradient" }}
            tag="Reservations & Location"
            title="Your Table Awaits at VANISCA"
            description="Ready for an unforgettable dining experience in Agadir Bay? Make a reservation or find us using the directions below. We look forward to welcoming you!"
            buttons={[
              { text: "Get Directions", href: "https://maps.app.goo.gl/example" },
              { text: "Call Now", href: "tel:+212528202202" },
            ]}
            buttonAnimation="slide-up"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={updatedFooterColumns}
            logoText="VANISCA"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
