"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Users, Award, Wine, Calendar } from "lucide-react";

export default function MenuPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="radialGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Menu", id: "/menu" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Steak & Vine"
          bottomLeftText="Fine Dining Since 2015"
          bottomRightText="hello@steakandvine.com"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          title="Signature Dishes"
          description="Hand-selected premium beef cuts aged to perfection"
          features={[
            {
              id: "ribeye",
              label: "Ribeye",
              title: "Our Most Beloved Premium Cut",
              items: ["24-month aged beef", "Bone-in perfection", "Rich marbling throughout"],
              buttons: [{ text: "View Menu", href: "/menu" }]
            },
            {
              id: "filet",
              label: "Filet Mignon",
              title: "The Epitome of Tenderness",
              items: ["Buttery texture", "Sous-vide perfection", "Truffle-infused butter"],
              buttons: [{ text: "Reserve Table", href: "/contact" }]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tag="Signature Selections"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Exceptional Menu Items"
          description="Explore our curated selection of premium dishes"
          products={[
            {
              id: "1",
              name: "Prime Ribeye 16oz",
              price: "$52",
              imageSrc: "https://img.b2bpic.net/free-photo/view-delicious-steak-dish_23-2150777653.jpg",
              imageAlt: "Prime Ribeye Steak"
            },
            {
              id: "2",
              name: "Filet Mignon 8oz",
              price: "$58",
              imageSrc: "https://img.b2bpic.net/free-photo/fried-steak-table_140725-44194.jpg",
              imageAlt: "Filet Mignon"
            },
            {
              id: "3",
              name: "Wine Flight Selection",
              price: "$35",
              imageSrc: "https://img.b2bpic.net/free-photo/tuna-salad-with-vegetables-plate_140725-5555.jpg",
              imageAlt: "Wine Pairing Flight"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Excellence"
          description="Trusted by fine dining enthusiasts across the region"
          metrics={[
            { id: "1", icon: Users, title: "Happy Guests", value: "15,000+" },
            { id: "2", icon: Award, title: "Michelin Stars", value: "2" },
            { id: "3", icon: Wine, title: "Wine Bottles", value: "5,000+" },
            { id: "4", icon: Calendar, title: "Years Operating", value: "9" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",
              items: [
                { label: "Home", href: "/" },
                { label: "Menu", href: "/menu" },
                { label: "About", href: "/about" }
              ]
            },
            {
              title: "Dine With Us",
              items: [
                { label: "Make Reservation", href: "/contact" },
                { label: "View Menu", href: "/menu" },
                { label: "Wine Selection", href: "/menu" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "Email", href: "mailto:hello@steakandvine.com" },
                { label: "Phone", href: "tel:+1-555-0123" }
              ]
            },
            {
              title: "Hours",
              items: [
                { label: "Mon-Thu: 5PM-11PM" },
                { label: "Fri-Sat: 5PM-12AM" },
                { label: "Sunday: 5PM-10PM" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Steak & Vine. All rights reserved."
          bottomRightText="Fine Dining Excellence Since 2015"
        />
      </div>
    </ThemeProvider>
  );
}