"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function PricingPage() {
  return (
    <ThemeProvider>
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="GourmetAgency"
            navItems={[
              { name: "Home", id: "/" },
              { name: "Pricing", id: "pricing" },
              { name: "Enroll", id: "/enrollment" },
              { name: "Contact", id: "/" }
            ]}
          />
        </div>
        <div id="pricing" data-section="pricing">
          <PricingCardThree
            title="Flexible Learning Plans"
            description="Choose the perfect path for your hospitality career advancement."
            animationType="slide-up"
            textboxLayout="split"
            plans={[
              { id: "starter", price: "$299", name: "Essential Course", features: ["Access to basic modules", "Community support", "PDF resources"], buttons: [{ text: "Select Plan", href: "/enrollment" }] },
              { id: "pro", badge: "Most Popular", price: "$599", name: "Professional Certification", features: ["Everything in Starter", "1-on-1 Mentorship", "Certification Exam", "Lifetime access"], buttons: [{ text: "Select Plan", href: "/enrollment" }] }
            ]}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoText="GourmetAgency"
            columns={[
              { items: [{ label: "Home", href: "/" }, { label: "Pricing", href: "/pricing" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}