"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { User, Heart, Mail } from "lucide-react";

export default function SocialMediaProfile() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SocialHub"
          navItems={[
            {"name": "Home", "id": "hero"},
            {"name": "Stories", "id": "stories"},
            {"name": "Posts", "id": "posts"},
            {"name": "Profile", "id": "profile"}
          ]}
          button={{
            "text": "Follow",            "href": "#contact"
          }}
          className="backdrop-blur-md bg-white/80"
          navItemClassName="text-foreground font-medium"
          buttonClassName="bg-primary-cta hover:bg-primary-cta/90"
          buttonTextClassName="text-white font-semibold"
        />
      </div>

      <div id="profile" data-section="profile">
        <TestimonialAboutCard
          tag="Profile"
          tagIcon={User}
          title="Alexandra Chen"
          description="Digital Creator & Content Strategist"
          subdescription="📍 San Francisco, CA • 2.3M followers"
          icon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="profile avatar user portrait headshot"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardSeven
          metrics={[
            {
              "id": "1",              "value": "2.3M",              "title": "Total Followers",              "items": ["+45K this month", "10% engagement rate"]
            },
            {
              "id": "2",              "value": "847",              "title": "Posts Published",              "items": ["Consistent daily content", "98% like rate"]
            },
            {
              "id": "3",              "value": "89.2K",              "title": "Average Likes",              "items": ["High engagement", "Growing audience"]
            },
            {
              "id": "4",              "value": "12.5K",              "title": "Comments Per Post",              "items": ["Active community", "Strong interaction"]
            }
          ]}
          title="Your Stats"
          description="Track your growth and engagement metrics"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="stories" data-section="stories">
        <FeatureCardOne
          features={[
            {
              "title": "Morning Vibes",              "description": "Fresh start to the day with coffee and creativity",              "imageSrc": "https://img.b2bpic.net/free-photo/young-woman-sitting-blanket-with-coffee-croissant_23-2147912455.jpg",              "imageAlt": "story lifestyle daily moment snapshot"
            },
            {
              "title": "Travel Adventure",              "description": "Exploring new places and capturing memories",              "imageSrc": "https://img.b2bpic.net/free-photo/woman-sitting-blanket-with-mobile-phone-making-juice_23-2147911518.jpg",              "imageAlt": "story adventure travel experience moment"
            },
            {
              "title": "Creative Projects",              "description": "Behind-the-scenes look at design process",              "imageSrc": "https://img.b2bpic.net/free-photo/close-up-view-cute-woman-with-book-home_197531-32317.jpg",              "imageAlt": "story creative art inspiration design"
            }
          ]}
          title="Stories"
          description="Watch what's happening now"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="posts" data-section="posts">
        <BlogCardThree
          blogs={[
            {
              "id": "1",              "category": "Lifestyle",              "title": "Finding Balance in a Digital World",              "excerpt": "Tips and tricks for maintaining mental health while staying connected online",              "imageSrc": "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg",              "imageAlt": "social post content media engagement",              "authorName": "Alexandra Chen",              "authorAvatar": "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              "date": "Yesterday"
            },
            {
              "id": "2",              "category": "Travel",              "title": "Hidden Gems of Tokyo",              "excerpt": "Discovering local favorites and authentic experiences in Japan's vibrant capital",              "imageSrc": "https://img.b2bpic.net/free-psd/listening-podcasts-instagram-posts-template_23-2150044938.jpg",              "imageAlt": "social post viral trending content",              "authorName": "Alexandra Chen",              "authorAvatar": "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              "date": "2 days ago"
            },
            {
              "id": "3",              "category": "Design",              "title": "Designing for Web 3.0",              "excerpt": "Exploring new design paradigms for decentralized applications",              "imageSrc": "https://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-posts_23-2150534859.jpg",              "imageAlt": "social post engagement community interaction",              "authorName": "Alexandra Chen",              "authorAvatar": "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              "date": "3 days ago"
            },
            {
              "id": "4",              "category": "Lifestyle",              "title": "Morning Routine for Productivity",              "excerpt": "How I structure my mornings to maximize creative output",              "imageSrc": "https://img.b2bpic.net/free-psd/instagram-posts-collection-with-female-podcaster-microphone_23-2148845613.jpg",              "imageAlt": "social post lifestyle daily moment",              "authorName": "Alexandra Chen",              "authorAvatar": "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              "date": "5 days ago"
            },
            {
              "id": "5",              "category": "Creative",              "title": "AI and Creativity: A Collaboration",              "excerpt": "How artificial intelligence is changing the creative landscape",              "imageSrc": "https://img.b2bpic.net/free-vector/digital-marketing-social-media-post-corporate-web-banner-template_632498-562.jpg",              "imageAlt": "social post creative inspiration content",              "authorName": "Alexandra Chen",              "authorAvatar": "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              "date": "1 week ago"
            },
            {
              "id": "6",              "category": "Community",              "title": "Building Authentic Connections",              "excerpt": "Growing a community that values real engagement over vanity metrics",              "imageSrc": "https://img.b2bpic.net/free-psd/flat-design-press-kit-template_23-2150278048.jpg",              "imageAlt": "social post community followers engagement",              "authorName": "Alexandra Chen",              "authorAvatar": "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              "date": "1 week ago"
            }
          ]}
          title="Feed"
          description="Latest posts from your timeline"
          textboxLayout="default"
          animationType="slide-up"
          carouselMode="buttons"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Connected"
          tagIcon={Mail}
          title="Subscribe to Updates"
          description="Get notified about new posts, stories, and exclusive content. Join our community of engaged followers."
          background={{
            "variant": "sparkles-gradient"
          }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="SocialHub"
          columns={[
            {
              "items": [
                {"label": "Home", "href": "/"},
                {"label": "Explore", "href": "explore"},
                {"label": "Trending", "href": "trending"}
              ]
            },
            {
              "items": [
                {"label": "Profile", "href": "profile"},
                {"label": "Settings", "href": "settings"},
                {"label": "Saved", "href": "saved"}
              ]
            },
            {
              "items": [
                {"label": "Help Center", "href": "#"},
                {"label": "Privacy Policy", "href": "#"},
                {"label": "Terms of Service", "href": "#"}
              ]
            },
            {
              "items": [
                {"label": "Twitter", "href": "https://twitter.com"},
                {"label": "Instagram", "href": "https://instagram.com"},
                {"label": "TikTok", "href": "https://tiktok.com"}
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}