"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import ContactForm from '@/components/form/ContactForm';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Calendar, Heart, Smile, Star, Sun } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="noiseDiagonalGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About You", id: "about" },
        { name: "Timeline", id: "features" },
        { name: "Wishes", id: "birthday-wishes" },
        { name: "Messages", id: "testimonials" },
      ]}
      brandName="Happy Birthday babeee"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardScroll
      background={{ variant: "gradient-bars" }}
      title="Happy birthdayy Stevenn! "
      description="Celebrating the most incredible human being I know. Today is all about you."
      buttons={[{ text: "See the celebration", href: "#about" }]}
      imageSrc="http://img.b2bpic.net/free-photo/white-pink-birthday-balloons-against-white-background_23-2148092606.jpg"
      imageAlt="Birthday celebration background"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Why You're Amazing"
      metrics={[
        { icon: Heart, label: "Years of Joy", value: "Forever" },
        { icon: Smile, label: "Smiles Caused", value: "Millions" },
        { icon: Star, label: "Your Magic", value: "Infinite" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "The Beginning",          description: "The day everything changed for the better.",          bentoComponent: "media-stack",          items: [
            { imageSrc: "http://img.b2bpic.net/free-photo/coffee-cafe-calm-chill-beverage-resting-enjoy-concept_53876-42609.jpg", imageAlt: "Our early days" },
            { imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hipster-couple-love-walking-by-river-wild-nature-winter-vacation_285396-2037.jpg", imageAlt: "Adventure 1" },
            { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-women-their-graduation-night_23-2149106120.jpg", imageAlt: "Adventure 2" },
          ],
        },
        {
          title: "Growing Together",          description: "Learning, laughing, and building a life we love.",          bentoComponent: "reveal-icon",          icon: Sun,
        },
        {
          title: "Many More",          description: "Looking forward to all the birthdays ahead.",          bentoComponent: "reveal-icon",          icon: Calendar,
        },
      ]}
      title="Our Journey Together"
      description="A look back at the beautiful moments which made ours days and kept us together still <3"
    />
  </div>

  <div id="birthday-wishes" data-section="birthday-wishes">
      <ContactForm
        title="A Birthday Wish from everyone"
        description=" i hope they make your day! ✨🥹🫶🏻 "
        tag="Birthday Guestbook"
        buttonText="Send Wish"
        inputPlaceholder="Type your wish here..."
        termsText=""
        useInvertedBackground={false}
      />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Love of my Life", imageSrc: "http://img.b2bpic.net/free-photo/front-view-relaxing-couple-with-wooden-background_23-2148243297.jpg" },
        { id: "2", name: "Best Friend", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-model-with-golden-light_23-2148905622.jpg" },
        { id: "3", name: "My Favorite Person", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151916039.jpg" },
        { id: "4", name: "Adventure Partner", imageSrc: "http://img.b2bpic.net/free-photo/view-gay-couple-being-affectionate-spending-time-together-beach_23-2150168611.jpg" },
        { id: "5", name: "My Everything", imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-boy-against-blue-wall_23-2148184865.jpg" },
      ]}
      cardTitle=" "
      cardTag="Through the Years"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{ variant: "sparkles-gradient" }}
      tag="Let's Celebrate"
      title="Ready for your surprise?"
      description="I have something special planned for you later today."
      buttons={[{ text: "theres nothing here dont click, i'll give you the surprise in the chat", href: "#surprise" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Celebrate",          items: [
            { label: "Surprise", href: "#" },
            { label: "Memories", href: "#" },
          ],
        },
        {
          title: "Links",          items: [
            { label: "Contact", href: "#" },
            { label: "Privacy", href: "#" },
          ],
        },
      ]}
      bottomLeftText="Built with love"
      bottomRightText="Happy Birthday!"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
