"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="large"
        background="none"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="Ruoooo"
            navItems={[
              { name: "Password", id: "password" },
              { name: "Readiness", id: "readiness" },
              { name: "Letter", id: "letter" },
              { name: "Reasons", id: "reasons" },
              { name: "Surprise", id: "surprise" }
            ]}
          />
        </div>

        <div id="password" data-section="password">
          <HeroSplitDoubleCarousel
            background={{ variant: "sparkles-gradient" }}
            title="ENTER THE SECRET PASSWORD"
            description="Please enter the password to begin your birthday journey."
            leftCarouselItems={[
              { imageSrc: "http://img.b2bpic.net/free-vector/flat-valentine-elements-collection_23-2148021219.jpg", imageAlt: "Flat valentine elements collection" },
              { imageSrc: "http://img.b2bpic.net/free-vector/vintage-valentine-s-day-element-collection_23-2148386201.jpg", imageAlt: "Vintage valentine's day element collection" },
              { imageSrc: "http://img.b2bpic.net/free-vector/flat-valentine-s-day-elements-collection_23-2148015517.jpg", imageAlt: "Flat valentine's day elements collection" },
              { imageSrc: "http://img.b2bpic.net/free-vector/valentine-s-day-element-collection_23-2147736440.jpg", imageAlt: "Valentine's day element collection" },
              { imageSrc: "http://img.b2bpic.net/free-vector/set-valentine-elements-flat-design_23-2147589695.jpg", imageAlt: "cute pink envelope illustration" }
            ]}
            rightCarouselItems={[
              { imageSrc: "http://img.b2bpic.net/free-photo/colorful-candles-with-confetti-blue-background_23-2147870656.jpg", imageAlt: "Colorful candles with confetti on blue background" },
              { imageSrc: "http://img.b2bpic.net/free-photo/confetti-waffle-cone_23-2147654688.jpg", imageAlt: "Confetti in waffle cone" },
              { imageSrc: "http://img.b2bpic.net/free-photo/confetti-green-table_23-2147595127.jpg", imageAlt: "Confetti on a green table" },
              { imageSrc: "http://img.b2bpic.net/free-photo/cute-new-year-colourful-accessories-white-background_23-2148348255.jpg", imageAlt: "Cute new year colourful accessories on white background" },
              { imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-confetti_23-2149140043.jpg", imageAlt: "colorful confetti falling isolated" }
            ]}
            avatars={[
              { src: "http://img.b2bpic.net/free-vector/flat-valentine-elements-collection_23-2148021219.jpg", alt: "Avatar 1" },
              { src: "http://img.b2bpic.net/free-vector/vintage-valentine-s-day-element-collection_23-2148386201.jpg", alt: "Avatar 2" },
              { src: "http://img.b2bpic.net/free-vector/flat-valentine-s-day-elements-collection_23-2148015517.jpg", alt: "Avatar 3" },
              { src: "http://img.b2bpic.net/free-vector/valentine-s-day-element-collection_23-2147736440.jpg", alt: "Avatar 4" },
              { src: "http://img.b2bpic.net/free-vector/set-valentine-elements-flat-design_23-2147589695.jpg", alt: "Avatar 5" }
            ]}
            marqueeItems={[
              { type: "image", src: "http://img.b2bpic.net/free-photo/colorful-candles-with-confetti-blue-background_23-2147870656.jpg", alt: "icon 1" },
              { type: "image", src: "http://img.b2bpic.net/free-photo/confetti-waffle-cone_23-2147654688.jpg", alt: "icon 2" },
              { type: "image", src: "http://img.b2bpic.net/free-photo/confetti-green-table_23-2147595127.jpg", alt: "icon 3" },
              { type: "image", src: "http://img.b2bpic.net/free-photo/cute-new-year-colourful-accessories-white-background_23-2148348255.jpg", alt: "icon 4" },
              { type: "text", text: "Happy Birthday Ruoooo!" }
            ]}
          />
        </div>

        <div id="readiness" data-section="readiness">
          <SplitAbout
            textboxLayout="default"
            useInvertedBackground={false}
            title="Are you ready yaa ruoooo! 💕"
            description="A journey made especially for you."
            bulletPoints={[
              { title: "Heartfelt Journey", description: "We will explore memories and love." },
              { title: "Special Birthday", description: "Celebrating the cutest person ever." }
            ]}
            mediaAnimation="slide-up"
            imageSrc="http://img.b2bpic.net/free-vector/set-valentine-elements-flat-design_23-2147589695.jpg"
            imageAlt="Romantic envelope"
          />
        </div>

        <div id="letter" data-section="letter">
          <FeatureCardTwentyOne
            useInvertedBackground={true}
            title="Message for you"
            description="On this very day, the cutest girl I’ve ever met was born. From the first moment I saw you on that trip, I thought to myself, 'Who is this moon? She is so incredibly cute.' I really wish we could have spent more time together; those six hours flew by!\n\nI still remember when we played arm wrestling—I beat you three times in every way possible! And please, try to focus a little more so you don't keep hitting your head on the swing chains every minute.\n\nIt has been 26 days since we completed our first year of friendship, and today is your special day, Ruooo. I love you so so much. I hope I get to see you very soon, Yarohyy.\n\nEnjoy your day, and I wish you nothing but the absolute best!\n\nSend my best regards to your mom, Sara, Amal, and your little sister."
            accordionItems={[
              { id: "1", title: "Our first meeting", content: "That trip six hours flew by too fast." },
              { id: "2", title: "The arm wrestling", content: "I still remember winning 3 times!" }
            ]}
            mediaAnimation="blur-reveal"
            imageSrc="http://img.b2bpic.net/free-photo/close-up-beautiful-confetti_23-2149140043.jpg"
            imageAlt="Celebration confetti"
          />
        </div>

        <div id="reasons" data-section="reasons">
          <FaqSplitText
            useInvertedBackground={false}
            faqs={[
              { id: "1", title: "You are the cutest girl in the world", content: "No doubt about it!" },
              { id: "2", title: "You have a very big biceps", content: "You are strong!" },
              { id: "3", title: "You're 156 cm tall", content: "Perfect size for hugs." },
              { id: "4", title: "Everything about you is just lovely", content: "Truly amazing." },
              { id: "5", title: "You have such a positive soul", content: "Always shining." }
            ]}
            sideTitle="Reasons I Love You"
            faqsAnimation="slide-up"
          />
        </div>

        <div id="surprise" data-section="surprise">
          <ContactText
            useInvertedBackground={true}
            background={{ variant: "sparkles-gradient" }}
            text="happy birthday day yaa ruoooo 🎂❤️\n\nI hope you love it wish you all the best ya katkott enjoy your day"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              { title: "Celebration", items: [{ label: "Love Messages", href: "#" }, { label: "My Reasons", href: "#" }] }
            ],
            logoText="Ruoooo"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}