"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function MenuPage() {
  const navItems = [{"name":"Home","id":"/"},{"name":"Menu","id":"/menu"},{"name":"About","id":"/about"},{"name":"Order Ahead","id":"/order"},{"name":"Shop","id":"/shop"}];
  const footerColumns = [{"items":[{"label":"Home","href":"/"},{"label":"Menu","href":"/menu"},{"label":"About","href":"/about"},{"label":"Order Ahead","href":"/order"}]},{"items":[{"label":"Hours","href":"/about"},{"label":"Instagram","href":"https://instagram.com/midnightcafe"}]}];
  
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="inset"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          navItems={navItems.map(item => ({ ...item, id: item.id }))}
          brandName="Midnight Cafe"
        />
      </div>

      <div id="espresso-coffee" data-section="espresso-coffee">
        <ProductCardOne
          title="Signature Espresso & Coffee"
          description="Perfectly crafted espresso drinks, from classic to contemporary."
          products={[
            { id: "e1", name: "Classic Latte", price: "$4.50", imageSrc: "https://img.b2bpic.net/free-photo/hot-cup-hot-chocolate_140725-7519.jpg", imageAlt: "A classic latte with art" },
            { id: "e2", name: "Rich Americano", price: "$3.75", imageSrc: "https://img.b2bpic.net/free-photo/top-view-tasty-espresso-served-cup-with-coffee_24972-2324.jpg", imageAlt: "A rich Americano coffee" },
            { id: "e3", name: "Velvet Cappuccino", price: "$4.50", imageSrc: "https://img.b2bpic.net/free-photo/talanted-barista-is-pouring-milk-jug-latte-cappuchino-his-cafe_613910-3236.jpg", imageAlt: "A velvety cappuccino" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="teas-more" data-section="teas-more">
        <ProductCardOne
          title="Elevated Teas & More"
          description="Explore our curated selection of fine teas and specialty drinks."
          products={[
            { id: "t1", name: "Ceremonial Matcha Latte", price: "$5.50", imageSrc: "https://img.b2bpic.net/free-photo/matcha-latte-cup_417767-46.jpg", imageAlt: "A ceremonial grade matcha latte" },
            { id: "t2", name: "Bold Dirt Chai", price: "$5.25", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-woman-with-coffee-cup_23-2150244095.jpg", imageAlt: "A bold and spicy dirt chai" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="pastries-food" data-section="pastries-food">
        <ProductCardOne
          title="Artisan Pastries & Food"
          description="Freshly baked daily, with options for everyone."
          products={[
            { id: "p1", name: "Daily Croissants", price: "$4.00", imageSrc: "https://img.b2bpic.net/free-photo/tasty-croissant-muffins-with-coffee_23-2147693692.jpg", imageAlt: "Freshly baked croissants" },
            { id: "p2", name: "Gluten-Free Muffins", price: "$4.25", imageSrc: "https://img.b2bpic.net/free-photo/bakery-with-display-pastries-pastries_188544-40882.jpg", imageAlt: "A selection of gluten-free muffins" },
            { id: "p3", name: "Vegan Scones", price: "$4.25", imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-grain-food-assortmet-with-coffee-milk-plain-background_23-2148267628.jpg", imageAlt: "A delicious vegan scone" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="Midnight Cafe"
        />
      </div>
    </ThemeProvider>
  );
}