"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Heart, Play, Share2, TrendingUp, Users } from "lucide-react";

export default function SocialProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SocialHub"
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Messages", id: "messages" },
            { name: "Notifications", id: "notifications" },
            { name: "Settings", id: "settings" },
            { name: "Explore", id: "explore" }
          ]}
          button={{
            text: "Follow",            href: "#profile"
          }}
        />
      </div>

      <div id="profile" data-section="profile">
        <HeroSplit
          title="Alexandra Mitchell"
          description="Digital creator & content enthusiast | Travel | Photography | Lifestyle"
          background={{ variant: "glowing-orb" }}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="Alexandra Mitchell profile picture"
          imagePosition="right"
          buttons={[
            { text: "Follow", href: "#contact" },
            { text: "Message", href: "#messages" }
          ]}
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardThree
          title="Your Impact"
          description="Real-time engagement metrics showing your influence and reach"
          metrics={[
            { id: "1", icon: Users, title: "Followers", value: "247.5K" },
            { id: "2", icon: Heart, title: "Engagements", value: "32.8K" },
            { id: "3", icon: Share2, title: "Shares", value: "8.2K" },
            { id: "4", icon: TrendingUp, title: "Growth", value: "+12%" }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="stories" data-section="stories">
        <FeatureCardTwentySix
          title="Stories"
          description="Catch up with the latest moments and experiences"
          features={[
            {
              title: "Morning Adventure",              description: "Starting the day with amazing energy and views",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-scooter-travels-takes-pictures-phone_1321-3258.jpg",              imageAlt: "Morning adventure story",              buttonIcon: Play
            },
            {
              title: "Daily Vibes",              description: "Life's beautiful moments captured in real time",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-selfie-mountain-side-view_23-2149737040.jpg",              imageAlt: "Daily vibes story",              buttonIcon: Play
            },
            {
              title: "Creative Flow",              description: "Behind the scenes of content creation magic",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-woman-taking-selfie-mountain_23-2149737058.jpg",              imageAlt: "Creative process story",              buttonIcon: Play
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="posts" data-section="posts">
        <ProductCardTwo
          title="Latest Posts"
          description="Explore the most engaging content from your feed"
          products={[
            {
              id: "1",              brand: "Travel",              name: "Paradise Found: Bali Edition",              price: "⭐ 4.9",              rating: 5,
              reviewCount: "2.3K likes",              imageSrc: "https://img.b2bpic.net/free-photo/happy-people-using-social-media-their-smartphones_53876-102035.jpg",              imageAlt: "Bali travel post"
            },
            {
              id: "2",              brand: "Photography",              name: "Golden Hour Magic",              price: "⭐ 4.8",              rating: 5,
              reviewCount: "1.8K likes",              imageSrc: "https://img.b2bpic.net/free-photo/social-media-communication-community-global-concept_53876-64987.jpg",              imageAlt: "Golden hour photography post"
            },
            {
              id: "3",              brand: "Lifestyle",              name: "Morning Routine Flow",              price: "⭐ 5.0",              rating: 5,
              reviewCount: "3.1K likes",              imageSrc: "https://img.b2bpic.net/free-photo/online-matchmaking-dating-sign-up-concept_53876-16094.jpg",              imageAlt: "Morning routine lifestyle post"
            },
            {
              id: "4",              brand: "Community",              name: "Meet the Creators",              price: "⭐ 4.9",              rating: 5,
              reviewCount: "2.7K likes",              imageSrc: "https://img.b2bpic.net/free-photo/friends-using-smartphones-together-outdoors_53876-26150.jpg",              imageAlt: "Community collaboration post"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Join thousands of engaged followers discovering inspiring content daily. Start your social journey today."
          animationType="reveal-blur"
          buttons={[
            { text: "Subscribe", href: "#subscribe" },
            { text: "View More Posts", href: "#posts" }
          ]}
          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: "Home", href: "/" },
                { label: "Explore", href: "explore" },
                { label: "Trending", href: "trending" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Creators", href: "creators" },
                { label: "Events", href: "events" },
                { label: "Groups", href: "groups" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "privacy" },
                { label: "Terms of Service", href: "terms" },
                { label: "Contact", href: "contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}