"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import MediaAbout from '@/components/sections/about/MediaAbout';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Camera, Heart } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="SocialHub"
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Posts", id: "posts" },
            { name: "Stories", id: "stories" },
            { name: "Community", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Follow",            href: "contact"
          }}
        />
      </div>

      <div id="profile" data-section="profile">
        <HeroBillboardRotatedCarousel
          title="Welcome to My Social Hub"
          description="Join a growing community of 125K followers. Explore exclusive content, behind-the-scenes stories, and daily inspiration across multiple platforms."
          tag="Creator Profile"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          buttons={[
            { text: "Follow Now", href: "contact" },
            { text: "View Portfolio", href: "posts" }
          ]}
          carouselItems={[
            {
              id: "carousel-1",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              imageAlt: "profile avatar portrait user professional"
            },
            {
              id: "carousel-2",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-facebook-cover_1035-2894.jpg",              imageAlt: "profile banner cover social background"
            },
            {
              id: "carousel-3",              imageSrc: "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg",              imageAlt: "social post content media engagement"
            },
            {
              id: "carousel-4",              imageSrc: "https://img.b2bpic.net/free-psd/listening-podcasts-instagram-posts-template_23-2150044938.jpg",              imageAlt: "social post content media community"
            },
            {
              id: "carousel-5",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-posts_23-2150534859.jpg",              imageAlt: "social post content media lifestyle"
            },
            {
              id: "carousel-6",              imageSrc: "https://img.b2bpic.net/free-vector/cute-pastel-highlights-instagram-story_23-2149572221.jpg",              imageAlt: "story highlight snapshot moment memory"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Tracking the impact of authentic content creation and community building across all platforms."
          tag="Follower Statistics"
          metrics={[
            {
              id: "followers",              value: "125K",              description: "Total followers across Instagram, TikTok, and YouTube combined"
            },
            {
              id: "engagement",              value: "8.5%",              description: "Average engagement rate on posts and stories"
            },
            {
              id: "posts",              value: "485+",              description: "High-quality posts shared with the community"
            },
            {
              id: "months",              value: "24",              description: "Months of consistent growth and daily community engagement"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stories" data-section="stories">
        <MediaAbout
          title="Story Highlights"
          description="Curated collections of my best moments organized by theme. Swipe through travel adventures, lifestyle tips, product reviews, and behind-the-scenes content."
          tag="Featured Stories"
          imageSrc="https://img.b2bpic.net/free-vector/hiking-instagram-stories-collection_23-2148905841.jpg"
          imageAlt="Story highlights preview"
          buttons={[
            { text: "Explore All Stories", href: "#" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="posts" data-section="posts">
        <BlogCardThree
          title="Latest Posts"
          description="Discover my most recent content, trending topics, and exclusive insights shared with the community."
          tag="Posts Feed"
          tagIcon={Camera}
          blogs={[
            {
              id: "post-1",              category: "Lifestyle",              title: "Morning Routine That Changed My Life",              excerpt: "A complete breakdown of how I optimized my mornings for productivity and wellness. From meditation to fitness.",              imageSrc: "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg",              imageAlt: "Morning routine",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              date: "Jan 15, 2025"
            },
            {
              id: "post-2",              category: "Travel",              title: "Hidden Gems in Tokyo You Must Visit",              excerpt: "My favorite undiscovered locations away from the tourist crowds. Local restaurants, quiet temples, and scenic viewpoints.",              imageSrc: "https://img.b2bpic.net/free-psd/listening-podcasts-instagram-posts-template_23-2150044938.jpg",              imageAlt: "Tokyo travel",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              date: "Jan 12, 2025"
            },
            {
              id: "post-3",              category: "Technology",              title: "Best Content Creation Tools for 2025",              excerpt: "My honest review of the top software, apps, and gadgets I use daily for creating high-quality content.",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-posts_23-2150534859.jpg",              imageAlt: "Tech tools",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              date: "Jan 10, 2025"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What My Followers Say"
          description="Real feedback from amazing people in the community who have been inspired and engaged with the content."
          tag="Community"
          tagIcon={Heart}
          testimonials={[
            {
              id: "testimonial-1",              name: "Emma Thompson",              handle: "@emmathompson",              testimonial: "Following Sarah has completely transformed how I approach content creation. Her authenticity is inspiring!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              imageAlt: "Emma Thompson"
            },
            {
              id: "testimonial-2",              name: "Marcus Johnson",              handle: "@marcusj_media",              testimonial: "The quality of posts and consistent engagement keeps me coming back daily. Best creator community ever!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-black-t-shirt-isolated-pink-wall_141793-82450.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "testimonial-3",              name: "Lisa Chen",              handle: "@lisachendesigns",              testimonial: "Amazing travel content and practical lifestyle tips. This is the kind of creator I want to follow.",              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-people-avatar-collection_23-2148074529.jpg",              imageAlt: "Lisa Chen"
            },
            {
              id: "testimonial-4",              name: "David Park",              handle: "@davidpark_co",              testimonial: "The stories shared here are genuine and relatable. Finally found a creator who gets it right!",              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-people-avatar-collection_23-2148251169.jpg",              imageAlt: "David Park"
            },
            {
              id: "testimonial-5",              name: "Jessica Williams",              handle: "@jessicaw_style",              testimonial: "Love the diverse content mix. Every day brings something new and exciting to the feed.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              imageAlt: "Jessica Williams"
            },
            {
              id: "testimonial-6",              name: "Alex Rivera",              handle: "@alex_creative",              testimonial: "The community here is supportive and genuine. This is what social media should be about.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-black-t-shirt-isolated-pink-wall_141793-82450.jpg",              imageAlt: "Alex Rivera"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          speed={40}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to join the community and stay updated with exclusive content? Follow now and never miss a moment."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Follow on Instagram", href: "#" },
            { text: "Subscribe to Newsletter", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="SocialHub"
          columns={[
            {
              title: "Social",              items: [
                { label: "Instagram", href: "#" },
                { label: "TikTok", href: "#" },
                { label: "YouTube", href: "#" }
              ]
            },
            {
              title: "Content",              items: [
                { label: "Blog", href: "#" },
                { label: "Guides", href: "#" },
                { label: "Resources", href: "#" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Discord", href: "#" },
                { label: "Forums", href: "#" },
                { label: "Newsletter", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 SocialHub | Content Creator Platform"
        />
      </div>
    </ThemeProvider>
  );
}