"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { MessageCircle } from "lucide-react";

export default function SocialProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="medium"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Feed", id: "feed" },
            { name: "Stories", id: "stories" },
            { name: "Messages", id: "messages" },
            { name: "Settings", id: "settings" }
          ]}
          brandName="SocialHub"
          bottomLeftText="Social Media Profile"
          bottomRightText="hello@socialhub.com"
        />
      </div>

      <div id="profile-header" data-section="profile-header">
        <MediaSplitTabsAbout
          title="Your Profile"
          description="Showcase your content and connect with your audience"
          tabs={[
            {
              id: "bio",              label: "Bio",              description: "Creative content creator and digital storyteller sharing moments, inspiration, and daily adventures with a community of like-minded individuals."
            },
            {
              id: "highlights",              label: "Highlights",              description: "Featured collections of your best moments, travel adventures, creative projects, and memorable experiences organized by theme and timeframe."
            },
            {
              id: "achievements",              label: "Achievements",              description: "Milestones reached including verified badge status, partnership collaborations, awards, and recognition from the community."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="Your profile avatar"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stories" data-section="stories">
        <ProductCardOne
          title="Your Stories"
          description="Share moments that matter - your stories disappear after 24 hours"
          products={[
            {
              id: "1",              name: "Weekend Getaway",              price: "4h ago",              imageSrc: "https://img.b2bpic.net/free-photo/woman-hiking-mountains-making-photo_1303-11178.jpg",              imageAlt: "Weekend getaway story"
            },
            {
              id: "2",              name: "Coffee & Work",              price: "8h ago",              imageSrc: "https://img.b2bpic.net/free-photo/happy-woman-having-fun-while-walking-through-nature-with-her-arms-outstretched_637285-2206.jpg",              imageAlt: "Coffee and work story"
            },
            {
              id: "3",              name: "Sunset View",              price: "12h ago",              imageSrc: "https://img.b2bpic.net/free-photo/hipster-young-girl-with-backpack-enjoying-sunset-peak-rock-mountain_146671-15747.jpg",              imageAlt: "Sunset view story"
            },
            {
              id: "4",              name: "Creative Session",              price: "20h ago",              imageSrc: "https://img.b2bpic.net/free-photo/attractive-man-enjoying-view-mountains-landscape-water-surface_146671-15622.jpg",              imageAlt: "Creative session story"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="feed" data-section="feed">
        <BlogCardTwo
          title="Your Feed"
          description="Latest posts from your profile and followed accounts"
          blogs={[
            {
              id: "1",              category: ["Lifestyle", "Photography"],
              title: "Golden Hour Magic",              excerpt: "Capturing the perfect sunset moment with beautiful light and shadows. Nature's way of reminding us to slow down and appreciate the simple beauty around us.",              imageSrc: "https://img.b2bpic.net/free-photo/crop-woman-with-retro-camera-near-breakfast-food_23-2147911464.jpg",              imageAlt: "Golden hour photography",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 days ago"
            },
            {
              id: "2",              category: ["Creative", "Design"],
              title: "New Design Project Launch",              excerpt: "Excited to share my latest design project! This collaboration combines modern aesthetics with user-centered functionality. Check out the creative process behind every detail.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-man-taking-photos-with-camera_23-2149735256.jpg",              imageAlt: "Design project showcase",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "4 days ago"
            },
            {
              id: "3",              category: ["Travel", "Adventure"],
              title: "Exploring Hidden Gems",              excerpt: "Discovered amazing local spots while traveling. Sometimes the best experiences come from wandering off the beaten path and embracing the unexpected.",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-taking-picture-his-breakfast-using-his-smartphone_23-2149240396.jpg",              imageAlt: "Travel destination",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 week ago"
            },
            {
              id: "4",              category: ["Wellness", "Lifestyle"],
              title: "Morning Routine Transformation",              excerpt: "Started a new wellness routine and it's changing my perspective on productivity. Small daily habits compound into meaningful lifestyle changes over time.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-selfie-while-holding-autumn-leaf_23-2148647567.jpg",              imageAlt: "Wellness and lifestyle",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "10 days ago"
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTen
          title="Your Engagement"
          description="Track your profile performance and audience interaction metrics"
          metrics={[
            {
              id: "1",              title: "Total Followers",              subtitle: "Your growing community",              category: "Followers",              value: "24,358",              buttons: [
                { text: "View Followers", href: "#followers" }
              ]
            },
            {
              id: "2",              title: "Total Likes",              subtitle: "Across all posts this month",              category: "Engagement",              value: "12,847",              buttons: [
                { text: "View Analytics", href: "#analytics" }
              ]
            },
            {
              id: "3",              title: "Comments & Interactions",              subtitle: "Active community engagement",              category: "Interaction",              value: "3,592",              buttons: [
                { text: "View Insights", href: "#insights" }
              ]
            },
            {
              id: "4",              title: "Story Views",              subtitle: "24-hour story engagement",              category: "Stories",              value: "8,264",              buttons: [
                { text: "View Reports", href: "#reports" }
              ]
            },
            {
              id: "5",              title: "Saved Posts",              subtitle: "Content bookmarked by followers",              category: "Saved",              value: "2,146",              buttons: [
                { text: "View Saved", href: "#saved" }
              ]
            },
            {
              id: "6",              title: "Share Count",              subtitle: "Posts shared by your audience",              category: "Shared",              value: "1,873",              buttons: [
                { text: "View Shares", href: "#shares" }
              ]
            }
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Connect"
          tagIcon={MessageCircle}
          title="Ready to Engage?"
          description="Join our community and start following for daily updates, behind-the-scenes content, and exclusive stories."
          buttons={[
            { text: "Follow Now", href: "#follow" },
            { text: "Send Message", href: "#dm" }
          ]}
          background={{ variant: "animated-grid" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Profile", href: "#profile" },
                { label: "Feed", href: "#feed" },
                { label: "Stories", href: "#stories" },
                { label: "Messages", href: "#messages" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Community Guidelines", href: "#guidelines" },
                { label: "Help Center", href: "#help" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "LinkedIn", href: "https://linkedin.com" }
              ]
            }
          ]}
          bottomLeftText="© 2025 SocialHub. All rights reserved."
          bottomRightText="Made with passion for creators"
        />
      </div>
    </ThemeProvider>
  );
}