"use client";
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function Page() {
  const navItems = [{ name: "Home", id: "/" }];
  
  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"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay navItems={navItems} />
      </div>
      <div id="password" data-section="password">
        <HeroSplitDoubleCarousel 
          title="Happy Birthday Ruoooo" 
          description="A heartfelt birthday celebration for the cutest girl in the world." 
          background={{ variant: "sparkles-gradient" }} 
          leftCarouselItems={[]} 
          rightCarouselItems={[]} 
        />
      </div>
      <div id="readiness" data-section="readiness">
        <SplitAbout 
          title="Why you are the cutest" 
          description="You bring joy, laughter, and so much light to everyone around you." 
          bulletPoints={[{ title: "Kindness", description: "You are the kindest soul." }, { title: "Smile", description: "Your smile lights up the room." }]} 
          textboxLayout="default" 
          mediaAnimation="none" 
          useInvertedBackground={false}
        />
      </div>
      <div id="letter" data-section="letter">
        <FeatureCardTwentyOne 
          title="A Special Letter" 
          description="Every day with you is a gift, and today is the most special one of all." 
          accordionItems={[{ id: "1", title: "Message", content: "Happy Birthday!" }]} 
          mediaAnimation="none" 
          videoSrc="https://example.com/video.mp4"
          useInvertedBackground={false}
        />
      </div>
      <div id="reasons" data-section="reasons">
        <FaqSplitText 
          faqs={[{ id: "1", title: "Why today?", content: "It is your birthday!" }]} 
          sideTitle="Reasons to smile" 
          faqsAnimation="none" 
          useInvertedBackground={false}
        />
      </div>
      <div id="surprise" data-section="surprise">
        <ContactText 
          text="Hope your day is filled with love and surprise!" 
          background={{ variant: "sparkles-gradient" }} 
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBase 
          logoText="Ruoooo 2025" 
          columns={[{ title: "Explore", items: [{ label: "Home", href: "/" }] }]} 
        />
      </div>
    </ThemeProvider>
  );
}