"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, Heart, MapPin, MessageCircle, Share2, Sparkles, Star, ThumbsUp, Users } from "lucide-react";

export default function SocialProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Feed", id: "feed" },
            { name: "Messages", id: "messages" },
            { name: "Notifications", id: "notifications" },
            { name: "Settings", id: "settings" }
          ]}
          button={{ text: "Follow", href: "#" }}
          brandName="SocialHub"
        />
      </div>

      <div id="profile-hero" data-section="profile-hero">
        <HeroLogoBillboardSplit
          logoText="@alexjones"
          description="Creative Director | Photographer | Storyteller. Sharing moments that inspire. Follow for daily inspiration and behind-the-scenes content."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Follow", href: "#" },
            { text: "Message", href: "#" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="Profile avatar"
          frameStyle="card"
        />
      </div>

      <div id="stories" data-section="stories">
        <ProductCardOne
          title="Stories"
          description="Catch up on the latest moments and updates from the community"
          tag="Recent"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          products={[
            {
              id: "story-1",              name: "Beach Vibes",              price: "2h ago",              imageSrc: "https://img.b2bpic.net/free-psd/business-corporation-template-design_23-2151376486.jpg",              imageAlt: "Beach story"
            },
            {
              id: "story-2",              name: "Travel Update",              price: "4h ago",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-business-template_23-2150406530.jpg",              imageAlt: "Travel story"
            },
            {
              id: "story-3",              name: "Creative Work",              price: "6h ago",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-business-template_23-2150406545.jpg",              imageAlt: "Creative story"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Your Impact"
          description="See your engagement and growth metrics at a glance"
          tag="Analytics"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          metrics={[
            {
              id: "1",              value: "52.4K",              title: "Followers",              description: "Engaged community members",              icon: Users
            },
            {
              id: "2",              value: "1.2M",              title: "Likes",              description: "Total engagement on posts",              icon: Heart
            },
            {
              id: "3",              value: "8.9K",              title: "Comments",              description: "Meaningful conversations",              icon: MessageCircle
            },
            {
              id: "4",              value: "156K",              title: "Shares",              description: "Reach and amplification",              icon: Share2
            }
          ]}
        />
      </div>

      <div id="posts-feed" data-section="posts-feed">
        <BlogCardOne
          title="Recent Posts"
          description="Latest content from your timeline"
          tag="Feed"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: "Photography",              title: "Golden Hour Magic",              excerpt: "Captured this stunning sunset during my evening photoshoot. The colors were absolutely perfect!",              imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375361.jpg",              imageAlt: "Golden hour photography",              authorName: "Alex Jones",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 hours ago"
            },
            {
              id: "2",              category: "Travel",              title: "Exploring New Horizons",              excerpt: "Just arrived in this beautiful coastal town. The views are breathtaking and the food is amazing. Already planning my next adventure!",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-geometric-instagram-post-collection-template_23-2148268659.jpg",              imageAlt: "Travel destination",              authorName: "Alex Jones",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "5 hours ago"
            },
            {
              id: "3",              category: "Inspiration",              title: "Creative Process Behind the Scenes",              excerpt: "Sharing my creative workflow and the tools I use to bring ideas to life. Hope this inspires your creative journey!",              imageSrc: "https://img.b2bpic.net/free-vector/instagram-post-pack-template_52683-24033.jpg",              imageAlt: "Creative workspace",              authorName: "Alex Jones",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 day ago"
            },
            {
              id: "4",              category: "Lifestyle",              title: "Coffee and Conversations",              excerpt: "Started my day with a meaningful conversation over coffee. These moments remind me why I love this community so much.",              imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375359.jpg",              imageAlt: "Lifestyle moment",              authorName: "Alex Jones",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 days ago"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Community Feedback"
          description="What followers are saying about the content"
          tag="Reviews"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Photography Enthusiast",              testimonial: "Your photography tutorials have completely transformed the way I approach composition. The tips and tricks are gold!",              icon: Star
            },
            {
              id: "2",              name: "Michael Chen",              role: "Content Creator",              testimonial: "Love the authentic storytelling approach. Your posts inspire me to be more creative with my own content.",              icon: ThumbsUp
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Digital Designer",              testimonial: "The visual aesthetic of your feed is incredible. It's clear you put thought into every detail of your posts.",              icon: Sparkles
            },
            {
              id: "4",              name: "David Kim",              role: "Fellow Traveler",              testimonial: "Your travel posts make me want to explore the world. Thanks for sharing these amazing experiences with us!",              icon: MapPin
            },
            {
              id: "5",              name: "Jessica Green",              role: "Social Media Manager",              testimonial: "Your engagement strategy is next level. I've learned so much from observing how you interact with your community.",              icon: Award
            },
            {
              id: "6",              name: "James Wilson",              role: "Brand Manager",              testimonial: "The authenticity in your content is refreshing. This is how you build a genuine, engaged community online.",              icon: Heart
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="SocialHub"
          columns={[
            {
              title: "Platform",              items: [
                { label: "Explore", href: "#explore" },
                { label: "Trending", href: "#trending" },
                { label: "Discover", href: "#discover" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Guidelines", href: "#guidelines" },
                { label: "Support", href: "#support" },
                { label: "Feedback", href: "#feedback" }
              ]
            },
            {
              title: "Account",              items: [
                { label: "Settings", href: "#settings" },
                { label: "Privacy", href: "#privacy" },
                { label: "Security", href: "#security" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "#twitter" },
                { label: "Instagram", href: "#instagram" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          copyrightText="© 2025 SocialHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}