"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from "next/link";

export default function MenusPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Menus", id: "/menu" }
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Menus", href: "/menu" }
      ]
    },
    {
      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" },
        { label: "Directions", href: "https://maps.google.com" }
      ]
    },
    {
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="blurBottom"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Ginger and Baker"
          button={{ text: "Reserve Table", href: "/reserve" }}
        />
      </div>

      <div id="menu-intro" data-section="menu-intro">
        <TextSplitAbout
          title="Our Culinary Journey"
          description={[
            "At Ginger and Baker, every dish tells a story. We believe in farm-to-table freshness, handcrafted techniques, and a passion for bringing people together through exceptional food. Explore our diverse menus, crafted with care for every taste and occasion."
          ]}
          buttons={[
            { text: "View All Menus", href: "/menu" }
          ]}
          showBorder={false}
          useInvertedBackground={false}
          buttonAnimation="entrance-slide"
        />
      </div>

      <div id="menu-categories" data-section="menu-categories">
        <ProductCardTwo
          title="Explore Our Menus"
          description="From hearty breakfasts to elegant dinners and delightful pastries, our kitchen is always creating something special."
          products={[
            {
              id: "breakfast",              brand: "Ginger & Baker",              name: "Breakfast & Brunch",              price: "View Menu",              rating: 5,
              reviewCount: "500+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=famous-biscuits",              imageAlt: "Hearty breakfast spread"
            },
            {
              id: "dinner",              brand: "Ginger & Baker",              name: "Dinner & Drinks",              price: "View Menu",              rating: 5,
              reviewCount: "800+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oioti4&_wi=2",              imageAlt: "Elegant dinner setting"
            },
            {
              id: "bakery",              brand: "Ginger & Baker",              name: "Bakery & Desserts",              price: "View Menu",              rating: 5,
              reviewCount: "600+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=csb5ll&_wi=2",              imageAlt: "Assortment of fresh pastries"
            },
            {
              id: "drinks",              brand: "Ginger & Baker",              name: "Coffee & Beverages",              price: "View Menu",              rating: 5,
              reviewCount: "400+",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h4o79l&_wi=2",              imageAlt: "Gourmet coffee and chai"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground={false}
        />
      </div>

      <div id="dietary-faq" data-section="dietary-faq">
        <FaqSplitMedia
          title="Menu & Dietary Questions"
          description="We're here to accommodate your needs. Find answers to common questions about our ingredients and options."
          faqs={[
            {
              id: "allergens",              title: "Do you offer options for dietary restrictions and allergies?",              content: "Yes, our culinary team is happy to accommodate most dietary restrictions and allergies. Please inform your server, and they will guide you through our menu or suggest suitable modifications."
            },
            {
              id: "vegetarian-vegan",              title: "Are there vegetarian and vegan options available?",              content: "We offer a selection of vegetarian dishes across our menus, and our chefs can often adapt other dishes to be vegetarian or vegan upon request. Please consult with your server."
            },
            {
              id: "source-ingredients",              title: "Where do you source your ingredients?",              content: "We pride ourselves on using fresh, seasonal, and locally sourced ingredients whenever possible, supporting our community and ensuring the highest quality in every dish."
            },
            {
              id: "reservations",              title: "Do I need a reservation to dine in?",              content: "While walk-ins are welcome, we highly recommend making a reservation, especially for dinner or on weekends, to ensure you get a table at your preferred time."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c9elbr&_wi=2"
          imageAlt="Diverse restaurant spaces interiors"
          mediaPosition="left"
          textboxLayout="default"
          faqsAnimation="slide-up"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Ginger and Baker"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}
