"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function MenuPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="none"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              { name: "Home", id: "/" },
              { name: "Menu", id: "#menu" },
              { name: "Contact", id: "/#contact" },
            ]}
            brandName="Jeff & Company"
          />
        </div>

        <div id="menu" data-section="menu">
          <PricingCardEight
            animationType="slide-up"
            title="Our Menu & Pricing"
            description="Explore our grooming packages tailored to your pet's needs."
            textboxLayout="default"
            useInvertedBackground={false}
            plans={[
              {
                id: "1",                badge: "Basic",                price: "£35",                subtitle: "Bath & Brush",                features: ["Deep clean bath", "Gentle brush out", "Nail trim", "Ear cleaning"],
                buttons: [{ text: "Book Now", href: "/#contact" }]
              },
              {
                id: "2",                badge: "Popular",                price: "£55",                subtitle: "Full Groom",                features: ["Full bath & dry", "Breed specific haircut", "Nail trim", "Ear cleaning", "Sanitary trim"],
                buttons: [{ text: "Book Now", href: "/#contact" }]
              },
              {
                id: "3",                badge: "Premium",                price: "£65",                subtitle: "The Works",                features: ["Full groom package", "Dematting treatment", "Teeth brushing", "Paw balm", "Luxury fragrance"],
                buttons: [{ text: "Book Now", href: "/#contact" }]
              }
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterMedia
            imageSrc="http://img.b2bpic.net/free-photo/high-angle-woman-washing-dog_23-2149872954.jpg?_wi=1"
            logoText="Jeff & Company Grooming"
            columns={[
              { title: "Contact", items: [{ label: "Greystoke Dr, Ruislip", href: "#" }, { label: "07598 206450", href: "tel:07598206450" }] },
              { title: "Opening Hours", items: [{ label: "Mon-Fri: 9am-5pm", href: "#" }, { label: "Sat: 9am-5pm", href: "#" }] },
              { title: "Follow", items: [{ label: "Instagram", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}