"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function SocialProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SocialHub"
          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: "#"
          }}
        />
      </div>

      <div id="profile-hero" data-section="profile-hero">
        <HeroCentered
          title="Welcome to Your Profile"
          description="Connect, share, and engage with your community. Discover new stories and stay updated with friends."
          background={{ variant: "downward-rays-animated" }}
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              alt: "Profile Avatar"
            }
          ]}
          avatarText="Joined 2 years ago"
          buttons={[
            {
              text: "Edit Profile",              href: "#"
            },
            {
              text: "Share Profile",              href: "#"
            }
          ]}
        />
      </div>

      <div id="stories" data-section="stories">
        <FeatureCardThree
          title="Your Stories"
          description="Share moments that matter with your followers. Create engaging stories and watch them come to life."
          tag="Stories"
          features={[
            {
              id: "01",              title: "Morning Vibes",              description: "Start your day by sharing your morning routine and inspire others to seize the day.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-writing-notebook_23-2148960419.jpg",              imageAlt: "Morning Vibes Story"
            },
            {
              id: "02",              title: "Travel Updates",              description: "Document your adventures and let your followers experience the world with you.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-picture-coffee-with-smartphone_23-2147912449.jpg",              imageAlt: "Travel Updates Story"
            },
            {
              id: "03",              title: "Daily Life",              description: "Capture the everyday moments that make life special and build deeper connections.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-hands-holding-device_23-2149294453.jpg",              imageAlt: "Daily Life Story"
            }
          ]}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="statistics" data-section="statistics">
        <MetricCardFourteen
          title="Your Growing Community"
          tag="Statistics"
          metrics={[
            {
              id: "1",              value: "12.5K",              description: "Total followers who trust and engage with your content daily"
            },
            {
              id: "2",              value: "2.8M",              description: "Impressions across all your posts and stories this month"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="posts-feed" data-section="posts-feed">
        <ProductCardOne
          title="Your Feed"
          description="Explore the latest posts from your community. Like, comment, and share what resonates with you."
          tag="Feed"
          products={[
            {
              id: "post-1",              name: "Summer Adventure",              price: "2.4K Likes",              imageSrc: "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg",              imageAlt: "Summer Adventure Post",              isFavorited: false
            },
            {
              id: "post-2",              name: "Food & Culture",              price: "1.8K Likes",              imageSrc: "https://img.b2bpic.net/free-psd/listening-podcasts-instagram-posts-template_23-2150044938.jpg",              imageAlt: "Food & Culture Post",              isFavorited: false
            },
            {
              id: "post-3",              name: "Nature Escape",              price: "3.2K Likes",              imageSrc: "https://img.b2bpic.net/free-psd/flat-design-business-strategy-instagram-posts_23-2150534859.jpg",              imageAlt: "Nature Escape Post",              isFavorited: false
            }
          ]}
          animationType="scale-rotate"
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Community Love"
          description="Hear from followers who love your content and engage with your journey"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Alex Johnson",              handle: "@alexjohn",              testimonial: "Your stories inspire me every single day. The way you capture moments is absolutely amazing!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-black-t-shirt-isolated-pink-wall_141793-82450.jpg",              imageAlt: "Alex Johnson"
            },
            {
              id: "2",              name: "Sarah Chen",              handle: "@sarahchencreates",              testimonial: "Following your content has completely changed my perspective on life and travel. Keep it up!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "Marcus Rivera",              handle: "@marcusrivera",              testimonial: "The authenticity in your posts is refreshing. You create a real community here.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-redhead-ginger-girl-with-freckles-isolated-olive-green-wall-with-copy-space_141793-117849.jpg",              imageAlt: "Marcus Rivera"
            },
            {
              id: "4",              name: "Emma Wilson",              handle: "@emmawilson",              testimonial: "Your feed is always the first thing I check in the morning. Love everything you share!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",              imageAlt: "Emma Wilson"
            },
            {
              id: "5",              name: "David Lee",              handle: "@davidlee",              testimonial: "The quality of your content is unmatched. Absolutely love being part of your community!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-black-t-shirt-isolated-pink-wall_141793-82450.jpg",              imageAlt: "David Lee"
            },
            {
              id: "6",              name: "Lisa Zhang",              handle: "@lisazhang",              testimonial: "Your posts make me smile and think differently about the world. Thank you for sharing!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",              imageAlt: "Lisa Zhang"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          speed={40}
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Get Connected"
          title="Ready to Join the Community?"
          description="Don't miss out on exclusive content, stories, and updates. Follow and stay in the loop with everything happening in our vibrant community."
          buttons={[
            {
              text: "Follow Now",              href: "#"
            },
            {
              text: "Send Message",              href: "#"
            }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#" },
                { label: "Profile", href: "#" },
                { label: "Messages", href: "#" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Trending", href: "#" },
                { label: "Discover", href: "#" },
                { label: "Events", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Contact Us", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" },
                { label: "Cookies", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 SocialHub. All rights reserved."
          bottomRightText="Made with passion"
        />
      </div>
    </ThemeProvider>
  );
}