"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Heart, Palette, Sun, TrendingUp, UserPlus, Users, Zap } from 'lucide-react';

export default function SocialProfile() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="SocialHub"
          navItems={[
            { name: "Explore", id: "explore" },
            { name: "Messages", id: "messages" },
            { name: "Notifications", id: "notifications" },
            { name: "Settings", id: "settings" }
          ]}
          button={{
            text: "Follow",            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Jordan Mitchell"
          description="Creative photographer & content creator | Building authentic connections one post at a time"
          buttons={[
            { text: "Follow", href: "#" },
            { text: "Message", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"
          imageAlt="Jordan Mitchell profile picture"
          showDimOverlay={true}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "followers",              value: "124.5K",              title: "Followers",              description: "Growing community of engaged followers",              icon: Users
            },
            {
              id: "following",              value: "3.2K",              title: "Following",              description: "Accounts we follow for inspiration",              icon: UserPlus
            },
            {
              id: "posts",              value: "487",              title: "Posts",              description: "Content shared with our community",              icon: Zap
            },
            {
              id: "engagement",              value: "8.9%",              title: "Engagement",              description: "Average engagement rate",              icon: TrendingUp
            }
          ]}
          title="Profile Statistics"
          description="Key metrics showcasing community engagement and growth"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stories" data-section="stories">
        <FeatureCardTwentyFive
          features={[
            {
              title: "Weekend Vibes",              description: "A collection of moments from this weekend's adventures and relaxation",              icon: Sun,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/beautiful-smiling-brunette-girl-summer-hipster-jacket-jeans-model-taking-selfie-smartphone_158538-1648.jpg",                  imageAlt: "Weekend moment 1"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-girl-summer-hipster-jacket-jeans-model-taking-selfie-smartphone_158538-1649.jpg",                  imageAlt: "Weekend moment 2"
                }
              ]
            },
            {
              title: "Creative Projects",              description: "Behind-the-scenes look at current creative endeavors and workflows",              icon: Palette,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-girl-summer-hipster-jacket-jeans-model-taking-selfie-smartphone_158538-1643.jpg",                  imageAlt: "Creative project 1"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/beautiful-smiling-brunette-girl-summer-hipster-jacket-jeans-model-taking-selfie-smartphone_158538-1648.jpg",                  imageAlt: "Creative project 2"
                }
              ]
            }
          ]}
          title="Stories"
          description="Explore recent stories and moments from our journey"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="posts" data-section="posts">
        <BlogCardThree
          blogs={[
            {
              id: "1",              category: "Photography",              title: "Golden Hour Magic",              excerpt: "Captured the most beautiful sunset reflections at the beach. Nature is the best canvas for creativity.",              imageSrc: "https://img.b2bpic.net/free-photo/family-enjoying-stop-their-road-trip_23-2149401852.jpg",              imageAlt: "Golden hour sunset photography",              authorName: "Jordan Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "2 days ago"
            },
            {
              id: "2",              category: "Travel",              title: "Mountain Adventure",              excerpt: "Trekked to 8,000 feet and discovered this breathtaking panoramic view. The journey was worth every step.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-multiracial-people-talking-outdoors_74855-2913.jpg",              imageAlt: "Mountain landscape view",              authorName: "Jordan Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "5 days ago"
            },
            {
              id: "3",              category: "Lifestyle",              title: "Foodie Discoveries",              excerpt: "Found this amazing local restaurant with authentic cuisine. Supporting small businesses one meal at a time.",              imageSrc: "https://img.b2bpic.net/free-photo/serious-multiracial-people-talking-outdoors_74855-3098.jpg",              imageAlt: "Local restaurant food",              authorName: "Jordan Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "1 week ago"
            },
            {
              id: "4",              category: "Wellness",              title: "Morning Fitness Routine",              excerpt: "Started the day with energizing yoga and meditation. Mental clarity and physical wellness go hand in hand.",              imageSrc: "https://img.b2bpic.net/free-photo/group-friends-together-with-drinks_23-2148270858.jpg",              imageAlt: "Fitness and wellness moment",              authorName: "Jordan Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "1 week ago"
            }
          ]}
          title="Feed"
          description="Latest posts and updates from the community"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Connect"
          tagIcon={Heart}
          title="Stay Updated"
          description="Subscribe to get the latest posts, stories, and exclusive content delivered directly to you"
          buttons={[
            { text: "Subscribe", href: "#" },
            { text: "Share Profile", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="SocialHub"
          copyrightText="© 2025 SocialHub. All rights reserved."
          columns={[
            {
              title: "Platform",              items: [
                { label: "Explore", href: "explore" },
                { label: "Trends", href: "trends" },
                { label: "Creator Program", href: "creators" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Messages", href: "messages" },
                { label: "Notifications", href: "notifications" },
                { label: "Communities", href: "communities" }
              ]
            },
            {
              title: "Account",              items: [
                { label: "Settings", href: "settings" },
                { label: "Privacy", href: "#" },
                { label: "Terms", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}