"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, TrendingUp, ImageStack } from 'lucide-react';

export default function SocialMediaProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="SocialHub"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Explore", id: "explore" },
            { name: "Messages", id: "messages" },
            { name: "Notifications", id: "notifications" },
            { name: "Profile", id: "profile" }
          ]}
          button={{
            text: "Share Post",            href: "create"
          }}
        />
      </div>

      <div id="profile-header" data-section="profile-header">
        <InlineImageSplitTextAbout
          heading={[
            { type: "image", src: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg", alt: "Profile Avatar" },
            { type: "text", content: "Alexandra Chen" }
          ]}
          buttons={[
            { text: "Follow", href: "#" },
            { text: "Message", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stories" data-section="stories">
        <HeroBillboardCarousel
          title="Your Stories"
          description="Share moments from your day"
          tag="Stories"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/young-woman-sitting-blanket-with-coffee-croissant_23-2147912455.jpg", imageAlt: "Story moment" },
            { imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-coffee-fruits-with-smartphone_23-2147912451.jpg", imageAlt: "Travel story" },
            { imageSrc: "https://img.b2bpic.net/free-photo/young-woman-lying-bed-with-mobile-phone-coffee_23-2147911494.jpg", imageAlt: "Lifestyle story" },
            { imageSrc: "https://img.b2bpic.net/free-photo/baked-croissant-cup-coffee-with-couple-sitting-bed_23-2147966391.jpg", imageAlt: "Food story" },
            { imageSrc: "https://img.b2bpic.net/free-photo/woman-sitting-blanket-with-mobile-phone-making-juice_23-2147911518.jpg", imageAlt: "Fitness story" }
          ]}
          buttons={[
            { text: "Add Story", href: "create-story" }
          ]}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardEleven
          title="Your Impact"
          description="Community engagement and growth metrics"
          tag="Statistics"
          tagIcon={TrendingUp}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "12.5K",              title: "Followers",              description: "Active community members",              imageSrc: "https://img.b2bpic.net/free-photo/landscape-hills-covered-greenery-fog-sunset-countryside_181624-60457.jpg",              imageAlt: "Followers metric"
            },
            {
              id: "2",              value: "3.2K",              title: "Likes",              description: "Total engagement this month",              imageSrc: "https://img.b2bpic.net/free-photo/autumn-mountain-with-lake_649448-1300.jpg",              imageAlt: "Likes metric"
            },
            {
              id: "3",              value: "847",              title: "Comments",              description: "Community interaction",              imageSrc: "https://img.b2bpic.net/free-photo/central-bohemia-high_181624-55759.jpg",              imageAlt: "Comments metric"
            }
          ]}
        />
      </div>

      <div id="posts-feed" data-section="posts-feed">
        <BlogCardThree
          title="Recent Posts"
          description="Check out what I've been up to"
          tag="Feed"
          tagIcon={ImageStack}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: "1",              category: "Travel",              title: "Sunset at the Mountains",              excerpt: "A breathtaking evening captured during my mountain hiking adventure last weekend.",              imageSrc: "https://img.b2bpic.net/free-photo/landscape-hills-covered-greenery-fog-sunset-countryside_181624-60457.jpg",              imageAlt: "Mountain sunset",              authorName: "Alexandra Chen",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "2 hours ago"
            },
            {
              id: "2",              category: "Urban",              title: "City Lights at Night",              excerpt: "Exploring the vibrant streets and architecture of downtown after dark.",              imageSrc: "https://img.b2bpic.net/free-photo/autumn-mountain-with-lake_649448-1300.jpg",              imageAlt: "City lights",              authorName: "Alexandra Chen",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "1 day ago"
            },
            {
              id: "3",              category: "Personal",              title: "Coffee & Reflections",              excerpt: "Morning thoughts over a perfect cup of coffee at my favorite local café.",              imageSrc: "https://img.b2bpic.net/free-photo/central-bohemia-high_181624-55759.jpg",              imageAlt: "Coffee moment",              authorName: "Alexandra Chen",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "3 days ago"
            },
            {
              id: "4",              category: "Community",              title: "Friends Gathering",              excerpt: "Quality time with amazing people who make every moment memorable.",              imageSrc: "https://img.b2bpic.net/free-photo/mountain-peak-view-panorama_649448-948.jpg",              imageAlt: "Group photo",              authorName: "Alexandra Chen",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "1 week ago"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Platform",              items: [
                { label: "Home", href: "home" },
                { label: "Explore", href: "explore" },
                { label: "Messages", href: "messages" },
                { label: "Notifications", href: "notifications" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Browse Profiles", href: "#" },
                { label: "Discover Content", href: "#" },
                { label: "Trending Topics", href: "#" },
                { label: "Recommendations", href: "#" }
              ]
            },
            {
              title: "Account",              items: [
                { label: "Settings", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact Support", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 SocialHub | Connecting People Worldwide"
        />
      </div>
    </ThemeProvider>
  );
}