"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import ProductCardThree from "@/components/sections/product/ProductCardThree";

export default function MenuPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="Webild"
            navItems={[
              { name: "Home", id: "/" },
              { name: "Menu", id: "/menu" },
            ]}
          />
        </div>
        <div className="pt-32 pb-16" id="menu" data-section="menu">
          <ProductCardThree
            title="Steakhouse Menu"
            description="Fine cuts prepared to perfection."
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              { id: "1", name: "Ribeye Steak", price: "$45", imageSrc: "https://images.unsplash.com/photo-1600891964092-4316c288032e?auto=format&fit=crop&w=800&q=80" },
              { id: "2", name: "Filet Mignon", price: "$55", imageSrc: "https://images.unsplash.com/photo-1558030006-450675383462?auto=format&fit=crop&w=800&q=80" },
              { id: "3", name: "T-Bone Steak", price: "$65", imageSrc: "https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=800&q=80" },
            ]}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterBaseCard
            logoText="Webild"
            columns={[
              { title: "Company", items: [{ label: "Home", href: "/" }] },
              { title: "Menu", items: [{ label: "Steak", href: "/menu" }] },
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}