"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function SocialMediaProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SnapProfile"
          navItems={[
            { name: "Explore", id: "explore" },
            { name: "Messages", id: "messages" },
            { name: "Notifications", id: "notifications" },
            { name: "Settings", id: "settings" }
          ]}
          button={{ text: "Sign In", href: "#" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="Alexandra"
          description="Content creator | Travel enthusiast | Photography lover | Sharing moments that matter"
          background={{ variant: "aurora" }}
          buttons={[
            { text: "Follow", href: "#" },
            { text: "Message", href: "#" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/serious-beautiful-young-woman-stretches-arms-makes-selfie-walk-urban-setting-wears-casual-green-jumper-has-confident-look-camera-female-blogger-records-video-front-camera_273609-56681.jpg"
          imageAlt="Profile picture of Alexandra"
          frameStyle="card"
        />
      </div>
      
      <div id="stories" data-section="stories">
        <TextAbout
          tag="Stories"
          title="Your Latest Updates Await"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="posts" data-section="posts">
        <ProductCardOne
          products={[
            {
              id: "1",              name: "Sunset at the Beach",              price: "2.4K likes",              imageSrc: "https://img.b2bpic.net/free-photo/happy-people-using-social-media-their-smartphones_53876-102035.jpg",              imageAlt: "Sunset beach post"
            },
            {
              id: "2",              name: "Morning Coffee Vibes",              price: "1.8K likes",              imageSrc: "https://img.b2bpic.net/free-photo/online-matchmaking-dating-sign-up-concept_53876-16094.jpg",              imageAlt: "Coffee moment post"
            },
            {
              id: "3",              name: "Adventures with Friends",              price: "3.2K likes",              imageSrc: "https://img.b2bpic.net/free-vector/flat-social-media-day-instagram-posts-collection_23-2149411687.jpg",              imageAlt: "Friends gathering post"
            }
          ]}
          title="Recent Posts"
          description="Check out my latest content and moments from around the world"
          tag="Posts"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          metrics={[
            {
              id: "1",              value: "125K",              description: "Total Followers"
            },
            {
              id: "2",              value: "2.4M",              description: "Total Likes"
            },
            {
              id: "3",              value: "892",              description: "Posts Published"
            },
            {
              id: "4",              value: "98%",              description: "Engagement Rate"
            }
          ]}
          title="Your Impact"
          description="See how you're connecting with your audience"
          tag="Stats"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
        />
      </div>
      
      <div id="featured-followers" data-section="featured-followers">
        <TeamCardTwo
          members={[
            {
              id: "1",              name: "Sarah Chen",              role: "Top Supporter",              description: "Engaged follower and loyal community member who loves every update",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              imageAlt: "Sarah Chen profile"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "Top Supporter",              description: "Always first to comment and engage with fresh perspectives",              imageSrc: "https://img.b2bpic.net/free-vector/male-female-avatars-flat-design_23-2147528437.jpg",              imageAlt: "Marcus Johnson profile"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Top Supporter",              description: "Passionate supporter who helps amplify your message daily",              imageSrc: "https://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg",              imageAlt: "Emma Rodriguez profile"
            },
            {
              id: "4",              name: "Alex Park",              role: "Top Supporter",              description: "Creative collaborator bringing fresh ideas to conversations",              imageSrc: "https://img.b2bpic.net/free-vector/variety-avatars-flat-design_23-2147662095.jpg",              imageAlt: "Alex Park profile"
            }
          ]}
          title="Top Followers"
          description="Meet your most engaged community members"
          tag="Community"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          testimonials={[
            {
              id: "1",              name: "Jessica Wright",              handle: "@jess_travels",              testimonial: "Following Alexandra has inspired me to travel more and appreciate the little moments in life. Pure inspiration!",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg"
            },
            {
              id: "2",              name: "David Kim",              handle: "@davidkim_photo",              testimonial: "The photography and storytelling are incredible. Alexandra captures moments that speak to the soul.",              imageSrc: "https://img.b2bpic.net/free-vector/male-female-avatars-flat-design_23-2147528437.jpg"
            },
            {
              id: "3",              name: "Lisa Anderson",              handle: "@lisaanderson_art",              testimonial: "Such authentic content that doesn't feel forced. Real moments, real people, real connections.",              imageSrc: "https://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg"
            },
            {
              id: "4",              name: "Miguel Santos",              handle: "@miguel_creates",              testimonial: "The creative energy here is unmatched. Every post is thoughtfully crafted and genuinely inspiring.",              imageSrc: "https://img.b2bpic.net/free-vector/variety-avatars-flat-design_23-2147662095.jpg"
            },
            {
              id: "5",              name: "Sophie Laurent",              handle: "@sophielaurent_",              testimonial: "Alexandra's content motivated me to start my own creative journey. Grateful for the inspiration.",              imageSrc: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg"
            },
            {
              id: "6",              name: "James Mitchell",              handle: "@jamesmitchell_",              testimonial: "A refreshing perspective on social media that focuses on quality over quantity. Absolutely love it.",              imageSrc: "https://img.b2bpic.net/free-vector/male-female-avatars-flat-design_23-2147528437.jpg"
            }
          ]}
          title="What Followers Say"
          description="Real feedback from our amazing community"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to collaborate or have a question? Reach out and let's create something amazing together."
          animationType="entrance-slide"
          buttons={[
            { text: "Get in Touch", href: "#" },
            { text: "View Portfolio", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/serious-beautiful-young-woman-stretches-arms-makes-selfie-walk-urban-setting-wears-casual-green-jumper-has-confident-look-camera-female-blogger-records-video-front-camera_273609-56681.jpg"
          imageAlt="Social media footer background"
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Profile", href: "#" },
                { label: "Posts", href: "#" },
                { label: "Stories", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "#" },
                { label: "Twitter", href: "#" },
                { label: "TikTok", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact", href: "#" },
                { label: "FAQ", href: "#" },
                { label: "Community", href: "#" }
              ]
            }
          ]}
          logoText="SnapProfile"
          copyrightText="© 2025 SnapProfile. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}