"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Heart, Lightbulb, Mail, Music, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="radialGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Chuchuka"
          navItems={[
            { name: "About", id: "about" },
            { name: "Traits", id: "traits" },
            { name: "Habitat", id: "habitat" },
            { name: "Facts", id: "facts" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Meet Chuchuka", href: "hero" }}
          className="fixed top-0 left-0 right-0 w-screen z-50"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Meet Chuchuka"
          description="A playful, colorful creature celebrating creativity, freedom, diversity, and the joy of being uniquely yourself."
          tag="Imagination Unleashed"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008900768-jkhisinv.jpg"
          imageAlt="Chuchuka the magical creature in full vibrant color"
          buttons={[
            { text: "Explore the World", href: "about" },
            { text: "Learn More", href: "traits" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutMetric
          title="The Origin of Chuchuka"
          description={[
            "Chuchuka was born from pure imagination in a realm where colors dance freely and dreams come true. This whimsical creature emerged from the dreams of children and artists alike, embodying the spirit of self-expression and the celebration of differences. Chuchuka thrives on creativity, curiosity, and the belief that every being deserves to shine in their own unique way."
          ]}
          metrics={[
            { label: "Colors in Chuchuka's Spirit", value: "Infinite" },
            { label: "Friends Around the World", value: "Everyone" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="traits" data-section="traits">
        <FeatureCardEleven
          title="Personality & Traits"
          description="Discover what makes Chuchuka such a special and inspiring friend."
          tag="What Makes Chuchuka Special"
          features={[
            {
              id: 1,
              title: "Wildly Creative",
              description: "Chuchuka's imagination knows no bounds. With every thought, new colors burst into existence and wild ideas spark joy in everyone around. This creature believes art and creativity are the language of the soul.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008902726-eactkoti.jpg",
              imageAlt: "et, extraterrestrial, creature, figure, fantasy"
            },
            {
              id: 2,
              title: "Forever Curious",
              description: "Nothing escapes Chuchuka's wonder-filled gaze. This creature loves exploring new places, meeting new friends, and asking questions that make everyone think differently about the world.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008907422-xb63nsyg.jpg",
              imageAlt: "crystal, mushroom, purple mushroom, crystal mushroom, magical mushroom, fantasy"
            },
            {
              id: 3,
              title: "Celebrates Diversity",
              description: "Chuchuka is a living rainbow, proud of every color that makes up its being. This creature teaches everyone that our differences are our greatest strength and most beautiful feature.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008901622-xjmnof7b.jpg",
              imageAlt: "girl, portrait, neon, cool backgrounds, wallpaper 4k"
            }
          ]}
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          usePrimaryButtonImage={false}
        />
      </div>

      <div id="habitat" data-section="habitat">
        <ProductCardOne
          title="Chuchuka's World"
          description="Step into the magical habitat where Chuchuka lives and thrives in vibrant harmony."
          tag="The Imaginary Realm"
          products={[
            {
              id: "1",
              name: "Rainbow Forest",
              price: "Endless colors",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008907422-xb63nsyg.jpg",
              imageAlt: "Rainbow Forest full of vibrant trees and magical light"
            },
            {
              id: "2",
              name: "Crystal Meadows",
              price: "Sparkling peace",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008901622-xjmnof7b.jpg",
              imageAlt: "Crystal Meadows with glowing flowers and soft gradients"
            },
            {
              id: "3",
              name: "Dream Sky",
              price: "Infinite possibilities",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008902726-eactkoti.jpg",
              imageAlt: "Dream Sky with floating clouds and rainbow light"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="facts" data-section="facts">
        <MetricCardThree
          title="Fun Facts About Chuchuka"
          description="Playful tidbits that bring Chuchuka's spirit to life."
          metrics={[
            {
              id: "1",
              icon: Heart,
              title: "Love",
              value: "Overflowing"
            },
            {
              id: "2",
              icon: Music,
              title: "Songs",
              value: "150+"
            },
            {
              id: "3",
              icon: Lightbulb,
              title: "Ideas",
              value: "Infinite"
            },
            {
              id: "4",
              icon: Star,
              title: "Magic",
              value: "Pure"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="Meeting Chuchuka changed how I see the world. This magical creature taught me that being different isn't just okay—it's absolutely beautiful and worth celebrating every single day."
          rating={5}
          author="Artist & Dream Keeper"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008903612-8nft1oe9.jpg", alt: "Happy friend 1" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008904505-s8gewsan.jpg", alt: "Happy friend 2" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008905353-y1jjk09k.jpg", alt: "Happy friend 3" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008906226-pi2hlcao.jpg", alt: "Happy friend 4" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Join the Magic"
          title="Connect with Chuchuka"
          description="Subscribe to Chuchuka's newsletter and receive colorful inspiration, creative stories, and magical moments delivered straight to your inbox."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767008900768-jkhisinv.jpg"
          imageAlt="Chuchuka celebrating with joy and color"
          mediaPosition="right"
          tagIcon={Mail}
          inputPlaceholder="Enter your email"
          buttonText="Subscribe Now"
          termsText="We celebrate your privacy. Unsubscribe anytime to spread your own magic elsewhere."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Chuchuka"
          columns={[
            {
              title: "Explore",
              items: [
                { label: "About", href: "#about" },
                { label: "Traits", href: "#traits" },
                { label: "Habitat", href: "#habitat" },
                { label: "Fun Facts", href: "#facts" }
              ]
            },
            {
              title: "Community",
              items: [
                { label: "Share Your Story", href: "#contact" },
                { label: "Join Us", href: "#contact" },
                { label: "Celebrate Diversity", href: "#traits" },
                { label: "Creative Hub", href: "#habitat" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Blog", href: "#" },
                { label: "Guides", href: "#" },
                { label: "Gallery", href: "#" },
                { label: "Support", href: "#contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Chuchuka | Celebrating Imagination & Diversity"
        />
      </div>
    </ThemeProvider>
  );
}