"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { User, BarChart3, ImageIcon, Newspaper, TrendingUp, Heart, MessageCircle, Share2, Eye, Users, Clock, Rocket } from "lucide-react";

export default function SocialProfile() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="SocialHub"
          navItems={[
            { name: "Feed", id: "posts" },
            { name: "Stories", id: "stories" },
            { name: "Messages", id: "messages" },
            { name: "Notifications", id: "notifications" },
            { name: "Settings", id: "settings" }
          ]}
          button={{
            text: "Create Post",            href: "posts"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          title="Welcome to Your Profile"
          description="Share your moments, connect with followers, and grow your audience. Your social media presence starts here."
          background={{ variant: "sparkles-gradient" }}
          tag="Your Profile"
          tagIcon={User}
          inputPlaceholder="Enter your email to follow"
          buttonText="Follow Now"
        />
      </div>

      <div id="profile-stats" data-section="profile-stats">
        <MetricCardTwo
          title="Your Follower Stats"
          description="Track your growth and engagement at a glance"
          tag="Analytics"
          tagIcon={BarChart3}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "28.5K", description: "Total Followers" },
            { id: "2", value: "1.2K", description: "Posts Published" },
            { id: "3", value: "4.8K", description: "Avg. Likes per Post" },
            { id: "4", value: "92%", description: "Engagement Rate" }
          ]}
        />
      </div>

      <div id="stories" data-section="stories">
        <TestimonialCardTen
          title="Your Stories"
          description="Ephemeral content that keeps your followers engaged daily"
          tag="Stories"
          tagIcon={ImageIcon}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              title: "Morning Vibes",              quote: "Start your day with me",              name: "Story",              role: "2 hours ago",              imageSrc: "https://img.b2bpic.net/free-vector/instagram-stories-template_23-2148035336.jpg",              imageAlt: "Morning story content"
            },
            {
              id: "2",              title: "Coffee Break",              quote: "Recharge and connect",              name: "Story",              role: "4 hours ago",              imageSrc: "https://img.b2bpic.net/free-vector/sale-instagram-stories-template-collection_23-2148204932.jpg",              imageAlt: "Coffee break story"
            },
            {
              id: "3",              title: "Afternoon Activities",              quote: "Living in the moment",              name: "Story",              role: "6 hours ago",              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-summer-instagram-stories-collection_23-2148951222.jpg",              imageAlt: "Afternoon activity story"
            }
          ]}
        />
      </div>

      <div id="posts" data-section="posts">
        <BlogCardThree
          title="Your Posts Feed"
          description="Explore your published content and audience interactions"
          tag="Feed"
          tagIcon={Newspaper}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: "1",              category: "Lifestyle",              title: "Weekend Adventures",              excerpt: "Exploring new places and making memories with friends. Sometimes the best moments are unplanned.",              imageSrc: "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg",              imageAlt: "Weekend adventure post",              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: "Travel",              title: "Urban Explorer's Guide",              excerpt: "Discovering hidden gems in the city. Every corner tells a story if you take time to look.",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-posts_23-2150534859.jpg",              imageAlt: "Urban exploration post",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 week ago"
            }
          ]}
        />
      </div>

      <div id="engagement" data-section="engagement">
        <FeatureHoverPattern
          title="Engagement Metrics"
          description="Your audience interaction at a glance"
          tag="Performance"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              icon: Heart,
              title: "Likes & Reactions",              description: "Your most liked posts and audience sentiment tracking in real-time"
            },
            {
              icon: MessageCircle,
              title: "Comments & Discussion",              description: "Build community through meaningful conversations and responses"
            },
            {
              icon: Share2,
              title: "Shares & Reach",              description: "Measure viral potential and content distribution across networks"
            },
            {
              icon: Eye,
              title: "Views & Impressions",              description: "Track content visibility and discovery across your audience"
            },
            {
              icon: Users,
              title: "Follower Growth",              description: "Monitor your growing audience and new follower trends weekly"
            },
            {
              icon: Clock,
              title: "Best Posting Times",              description: "Optimize content schedule based on when your audience is most active"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Grow Your Profile?"
          ctaDescription="Connect with more followers and expand your reach today. Start sharing your best content."
          ctaButton={{
            text: "Start Growing",            href: "posts"
          }}
          ctaIcon={Rocket}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          faqs={[
            {
              id: "1",              title: "How do I increase my follower count?",              content: "Consistency is key. Post regularly, engage with your audience, use relevant hashtags, and create valuable content that resonates with your target audience. Collaborate with other creators to expand your reach."
            },
            {
              id: "2",              title: "What's the best time to post?",              content: "Check your analytics to find when your followers are most active. Generally, early mornings (7-9 AM) and evenings (7-9 PM) see higher engagement, but this varies by audience and platform."
            },
            {
              id: "3",              title: "How can I improve engagement on my posts?",              content: "Ask questions in captions, use engaging visuals, respond to comments promptly, use trending sounds or hashtags, and post stories regularly. Quality content that tells a story always performs better."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="SocialHub"
          columns={[
            {
              title: "Platform",              items: [
                { label: "Feed", href: "#posts" },
                { label: "Stories", href: "#stories" },
                { label: "Messages", href: "#messages" },
                { label: "Explore", href: "#explore" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Creators", href: "#creators" },
                { label: "Trends", href: "#trends" },
                { label: "Events", href: "#events" },
                { label: "Support", href: "#support" }
              ]
            },
            {
              title: "Account",              items: [
                { label: "Settings", href: "#settings" },
                { label: "Privacy", href: "#privacy" },
                { label: "Security", href: "#security" },
                { label: "Help", href: "#help" }
              ]
            }
          ]}
          copyrightText="© 2025 SocialHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}