"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function SocialMediaProfile() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="large"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="SocialHub"
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Explore", id: "explore" },
            { name: "Messages", id: "messages" },
            { name: "Settings", id: "settings" },
            { name: "Help", id: "help" }
          ]}
          button={{
            text: "Sign Out",            href: "#contact"
          }}
        />
      </div>

      <div id="profile-header" data-section="profile-header">
        <MediaSplitTabsAbout
          title="Alexandra Morgan"
          description="Creative Director | Photography Enthusiast | Storyteller"
          tabs={[
            {
              id: "about",              label: "About",              description: "Passionate about capturing moments and sharing stories through visual content. Based in New York, exploring the intersection of creativity and technology."
            },
            {
              id: "interests",              label: "Interests",              description: "Photography, travel, design, sustainable living, and connecting with amazing people from around the world."
            },
            {
              id: "highlights",              label: "Highlights",              description: "Featured in Design Weekly, 50K+ engaged followers, collaborations with international brands, travel documentarian."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"
          imageAlt="Alexandra Morgan Profile Photo"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="follower-stats" data-section="follower-stats">
        <MetricCardSeven
          title="Your Impact"
          description="Key metrics showcasing your social presence and engagement"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "followers",              value: "52.4K",              title: "Followers",              items: ["Growing 8% monthly", "Engaged community", "Global reach"]
            },
            {
              id: "following",              value: "1.2K",              title: "Following",              items: ["Curated accounts", "Industry leaders", "Creative peers"]
            },
            {
              id: "posts",              value: "324",              title: "Posts",              items: ["Consistent posting", "Quality content", "Visual storytelling"]
            },
            {
              id: "engagement",              value: "8.3%",              title: "Engagement Rate",              items: ["Above average", "Strong connection", "Active followers"]
            }
          ]}
        />
      </div>

      <div id="stories" data-section="stories">
        <BlogCardTwo
          title="Stories"
          description="Catch up on my latest stories and moments"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          blogs={[
            {
              id: "story-1",              category: "Current",              title: "Morning Coffee",              excerpt: "Starting the day right with inspiration and creativity. New York mornings never disappoint.",              imageSrc: "https://img.b2bpic.net/free-vector/fashion-sale-instagram-stories-collection_23-2148182167.jpg",              imageAlt: "Morning coffee story",              authorName: "Alexandra",              authorAvatar: "/placeholders/placeholder1.webp",              date: "2 hours ago"
            },
            {
              id: "story-2",              category: "Adventure",              title: "Exploring New Vibes",              excerpt: "Found an amazing new spot in Brooklyn. The light here is absolutely perfect for photography.",              imageSrc: "https://img.b2bpic.net/free-vector/instagram-stories-templates-with-empty-frame_52683-6083.jpg",              imageAlt: "Brooklyn exploration story",              authorName: "Alexandra",              authorAvatar: "/placeholders/placeholder1.webp",              date: "5 hours ago"
            },
            {
              id: "story-3",              category: "Reflection",              title: "Gratitude Moment",              excerpt: "Taking time to appreciate the journey so far. Every moment shapes the story we create.",              imageSrc: "https://img.b2bpic.net/free-vector/instagram-stories-templates_52683-6731.jpg",              imageAlt: "Gratitude reflection story",              authorName: "Alexandra",              authorAvatar: "/placeholders/placeholder1.webp",              date: "12 hours ago"
            }
          ]}
        />
      </div>

      <div id="posts-feed" data-section="posts-feed">
        <ProductCardFour
          title="Posts"
          description="My latest creations and shared moments"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "post-1",              name: "Sunset in Tokyo",              price: "2.3K likes",              variant: "Photography • Travel",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-picture-coffee-with-smartphone_23-2147912449.jpg",              imageAlt: "Sunset in Tokyo post",              isFavorited: false
            },
            {
              id: "post-2",              name: "Brooklyn Studio Tour",              price: "3.8K likes",              variant: "Behind the Scenes • Studio",              imageSrc: "https://img.b2bpic.net/free-photo/easter-holiday-photo-from-your-phone-beautifully-preserved-table-festive-easter-lunch-breakfast_169016-4234.jpg",              imageAlt: "Brooklyn studio tour post",              isFavorited: true
            },
            {
              id: "post-3",              name: "Weekend Reflections",              price: "1.9K likes",              variant: "Lifestyle • Personal",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-coffee-fruits-with-smartphone_23-2147912451.jpg",              imageAlt: "Weekend reflections post",              isFavorited: false
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="SocialHub"
          copyrightText="© 2025 SocialHub. All rights reserved."
          columns={[
            {
              title: "Platform",              items: [
                { label: "Explore", href: "explore" },
                { label: "Discover", href: "discover" },
                { label: "Trends", href: "trends" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Guidelines", href: "guidelines" },
                { label: "Safety", href: "safety" },
                { label: "Support", href: "support" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "contact" },
                { label: "Business", href: "business" },
                { label: "Partnerships", href: "partnerships" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}