"use client";

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

export default function VIPPage() {
  return (
    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay 
            navItems={[{ name: "Начало", id: "/" }, { name: "История", id: "/story" }, { name: "Коктейли", id: "/signature-cocktails" }, { name: "Събития", id: "/events" }, { name: "VIP", id: "/vip" }]} 
            brandName="La Habana Beach" 
          />
        </div>
        <div id="vip" data-section="vip" className="pt-32 pb-20">
            <PricingCardEight
              title="VIP Изживяване"
              description="Резервирай своята ексклузивна зона и се наслади на първокласно обслужване, бутикови напитки и най-добрата гледка към морето."
              textboxLayout="split-description"
              useInvertedBackground={true}
              animationType="slide-up"
              plans={[
                { id: "v1", badge: "Premium", price: "150 лв", subtitle: "Резервация на шезлонг с коктейл пакет", buttons: [{text: "Резервирай"}], features: ["Запазено място до брега", "Приоритетно обслужване", "Бутилка просеко"] },
                { id: "v2", badge: "VIP", price: "400 лв", subtitle: "Луксозна lounge зона за компания", buttons: [{text: "Резервирай"}], features: ["Private Cabana", "Пълно обслужване", "Premium селекция напитки"] }
              ]}
            />
        </div>
        <div id="footer" data-section="footer">
          <FooterBaseCard 
              logoText="La Habana Beach" 
              columns={[{ title: "Навигация", items: [{ label: "Начало", href: "/" }, { label: "История", href: "/story" }, { label: "Коктейли", href: "/signature-cocktails" }, { label: "Събития", href: "/events" }] }]} 
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}