"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { MapPin, Palette, Heart } from "lucide-react";

export default function SocialProfile() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Posts", id: "posts" },
            { name: "Stories", id: "stories" },
            { name: "Messages", id: "messages" },
            { name: "Settings", id: "settings" }
          ]}
          button={{ text: "Follow", href: "#contact" }}
          brandName="SocialHub"
        />
      </div>
      
      <div id="profile-header" data-section="profile-header">
        <MediaSplitTabsAbout
          title="Sarah Anderson"
          description="Creative Designer & Content Creator | 📍 Los Angeles, CA"
          tabs={[
            {
              id: "bio",              label: "Bio",              description: "Passionate about creating engaging visual content and connecting with communities through authentic storytelling and creative expression."
            },
            {
              id: "highlights",              label: "Highlights",              description: "Featured collections including travel adventures, design projects, lifestyle moments, and collaborative creative work with fellow creators."
            },
            {
              id: "collaborations",              label: "Collaborations",              description: "Working with brands and creators to produce innovative content. Open to partnerships that align with creative vision and audience values."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="Sarah Anderson Profile"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="follower-stats" data-section="follower-stats">
        <MetricCardTwo
          title="Follower Statistics"
          description="Your community growth and engagement overview"
          metrics={[
            { id: "followers", value: "248.5K", description: "Total Followers" },
            { id: "following", value: "1,240", description: "Accounts Following" },
            { id: "posts", value: "342", description: "Total Posts" },
            { id: "engagement", value: "8.4%", description: "Average Engagement Rate" }
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="stories" data-section="stories">
        <FeatureCardTwentyFive
          title="Your Stories"
          description="24-hour moments from your day"
          tag="Stories"
          features={[
            {
              title: "Monday Adventure",              description: "Exploring the city and discovering new cafes",              icon: MapPin,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-picture-coffee-with-smartphone_23-2147912449.jpg",                  imageAlt: "City exploration moment"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/close-up-people-with-smartphone_23-2149005019.jpg",                  imageAlt: "Cafe discovery"
                }
              ]
            },
            {
              title: "Design Session",              description: "Creative work and inspiration for new projects",              icon: Palette,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-psd/colorful-modern-dynamic-sport-social-media-instagram-template_125755-934.jpg",                  imageAlt: "Design workspace"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375361.jpg",                  imageAlt: "Design inspiration"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="posts-feed" data-section="posts-feed">
        <BlogCardThree
          title="Recent Posts"
          description="Latest updates from your feed"
          tag="Feed"
          blogs={[
            {
              id: "post-1",              category: "Travel",              title: "Summer Vibes in Bali",              excerpt: "Exploring tropical paradise and discovering hidden gems along the coast",              imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375361.jpg",              imageAlt: "Bali landscape",              authorName: "Sarah Anderson",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 days ago"
            },
            {
              id: "post-2",              category: "Design",              title: "New Brand Identity Launch",              excerpt: "Unveiling a complete redesign for our latest creative project with fresh aesthetics",              imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-outdoors-adventure-travel_23-2150288932.jpg",              imageAlt: "Brand identity showcase",              authorName: "Sarah Anderson",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "5 days ago"
            },
            {
              id: "post-3",              category: "Lifestyle",              title: "Morning Meditation Routine",              excerpt: "Starting each day with mindfulness and gratitude practices for mental wellness",              imageSrc: "https://img.b2bpic.net/free-psd/gradient-travel-adventure-instagram-posts_23-2150767855.jpg",              imageAlt: "Meditation moment",              authorName: "Sarah Anderson",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 week ago"
            },
            {
              id: "post-4",              category: "Inspiration",              title: "Collaborating with Fellow Creators",              excerpt: "Teaming up to produce amazing content and share creative energy with the community",              imageSrc: "https://img.b2bpic.net/free-vector/outdoor-adventure-template-social-media-post_53876-119107.jpg",              imageAlt: "Collaboration moment",              authorName: "Sarah Anderson",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 week ago"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="engagement" data-section="engagement">
        <TestimonialCardThirteen
          title="Community Feedback"
          description="What your followers are saying"
          testimonials={[
            {
              id: "1",              name: "James Wilson",              handle: "@jameswilson",              testimonial: "Your content always inspires me! The creative direction is impeccable and your storytelling is engaging.",              rating: 5,
              icon: Heart
            },
            {
              id: "2",              name: "Emma Davis",              handle: "@emmadavis",              testimonial: "Absolutely love following your journey. The design work is stunning and your posts brighten my day!",              rating: 5,
              icon: Heart
            },
            {
              id: "3",              name: "Michael Chen",              handle: "@michaelchen",              testimonial: "Your aesthetic is unmatched. Keep creating amazing content - your followers are here for every post!",              rating: 5,
              icon: Heart
            },
            {
              id: "4",              name: "Lisa Rodriguez",              handle: "@lisarodriguez",              testimonial: "Thank you for sharing your creative process. It's helpful and inspiring for other creators like me.",              rating: 5,
              icon: Heart
            },
            {
              id: "5",              name: "Alex Thompson",              handle: "@alexthompson",              testimonial: "One of my favorite accounts to follow. Your content quality is consistently excellent!",              rating: 5,
              icon: Heart
            },
            {
              id: "6",              name: "Nina Patel",              handle: "@ninapatel",              testimonial: "The way you engage with your community is admirable. Keep building this amazing space!",              rating: 5,
              icon: Heart
            }
          ]}
          showRating={false}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to collaborate or connect? Reach out and let's create something amazing together!"
          animationType="entrance-slide"
          buttons={[
            { text: "Send Message", href: "#" },
            { text: "View Portfolio", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="SocialHub"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}