"use client";
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function SurprisePage() {
  const navItems = [{ name: "Home", id: "/" }, { name: "Surprise", id: "/surprise" }];
  
  return (
    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay navItems={navItems} />
      </div>
      <div id="surprise" data-section="surprise">
        <ContactText 
          text="Surprise! You are the best."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBase 
          logoText="Webild 2025"
          columns={[{ title: "Links", items: navItems.map(i => ({ label: i.name, href: i.id })) }]}
        />
      </div>
    </ThemeProvider>
  );
}