"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Heart, Send } from "lucide-react";

export default function ProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="ProfileHub"
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Explore", id: "explore" },
            { name: "Messages", id: "messages" },
            { name: "Settings", id: "settings" },
            { name: "About", id: "about" }
          ]}
          button={{ text: "Follow", href: "contact" }}
        />
      </div>

      <div id="profile" data-section="profile">
        <HeroLogo
          logoText="@SocialProfile"
          description="Curating moments, inspiring connections, and sharing stories that matter"
          buttons={[
            { text: "View Gallery", href: "#posts" },
            { text: "Message", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="Profile avatar"
          showDimOverlay={true}
        />
      </div>

      <div id="stories" data-section="stories">
        <MetricCardEleven
          title="Your Story Highlights"
          description="Explore visual moments from my journey and daily adventures"
          tag="Stories"
          metrics={[
            {
              id: "1",              value: "Travel",              title: "Adventures Around the World",              description: "Documenting journeys and destinations",              imageSrc: "https://img.b2bpic.net/free-vector/cute-pastel-highlights-instagram-story_23-2149572221.jpg",              imageAlt: "Travel stories collection"
            },
            {
              id: "2",              value: "Daily",              title: "Life Moments & Experiences",              description: "Everyday highlights and cherished moments",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-instagram-highlights-collection_23-2148881720.jpg",              imageAlt: "Daily life moments"
            },
            {
              id: "3",              value: "Creative",              title: "Inspiration & Ideas",              description: "Artistic pursuits and creative inspiration",              imageSrc: "https://img.b2bpic.net/free-psd/black-lives-matter-instagram-stories-template_23-2148584915.jpg",              imageAlt: "Creative inspiration board"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardEleven
          title="Follower Statistics"
          description="Track engagement and growth across my social presence"
          tag="Analytics"
          metrics={[
            {
              id: "1",              value: "127K",              title: "Total Followers",              description: "Growing community of engaged followers",              imageSrc: "https://img.b2bpic.net/free-vector/digital-marketing-social-media-post-corporate-web-banner-template_632498-562.jpg",              imageAlt: "Follower growth visualization"
            },
            {
              id: "2",              value: "8.4K",              title: "Post Engagements",              description: "Average interactions per post",              imageSrc: "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg",              imageAlt: "Engagement metrics"
            },
            {
              id: "3",              value: "96%",              title: "Audience Satisfaction",              description: "Positive feedback and community sentiment",              imageSrc: "https://img.b2bpic.net/free-vector/digital-marketing-social-media-post-corporate-web-banner-template_632498-567.jpg",              imageAlt: "Satisfaction metrics"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
        />
      </div>

      <div id="posts" data-section="posts">
        <BlogCardTwo
          title="Recent Posts"
          description="Latest updates and content from my feed"
          tag="Posts"
          blogs={[
            {
              id: "1",              category: ["Travel", "Photography"],
              title: "Sunrise Over Mountain Peaks",              excerpt: "Capturing the golden hour in the majestic mountains. An unforgettable moment that reminds us of nature's beauty and our place in it.",              imageSrc: "https://img.b2bpic.net/free-vector/digital-marketing-social-media-post-corporate-web-banner-template_632498-562.jpg",              imageAlt: "Mountain sunrise",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 days ago"
            },
            {
              id: "2",              category: ["Lifestyle", "Wellness"],
              title: "Finding Balance in a Chaotic World",              excerpt: "Sharing my personal journey towards wellness and mindfulness. Tips and tricks that have transformed my daily routine and mental health.",              imageSrc: "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33999.jpg",              imageAlt: "Wellness lifestyle",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 week ago"
            },
            {
              id: "3",              category: ["Creative", "Design"],
              title: "The Art of Visual Storytelling",              excerpt: "Exploring how design and creativity combine to tell compelling stories. From concept to execution, a deep dive into the creative process.",              imageSrc: "https://img.b2bpic.net/free-vector/digital-marketing-social-media-post-corporate-web-banner-template_632498-567.jpg",              imageAlt: "Creative design work",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 weeks ago"
            },
            {
              id: "4",              category: ["Community", "Connection"],
              title: "Building Authentic Connections Online",              excerpt: "How meaningful conversations and genuine interactions create lasting relationships in the digital space. A celebration of our incredible community.",              imageSrc: "https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33994.jpg",              imageAlt: "Community engagement",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "3 weeks ago"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About Me"
          description="Digital creator passionate about inspiring others through authentic storytelling, creative content, and meaningful connections. Join me on this journey of discovery and growth."
          tag="Bio"
          tagIcon={Heart}
          buttons={[
            { text: "View My Work", href: "#posts" },
            { text: "Collaborate", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/professional-marketing-agency-customer-review-linkedin-post_742173-7337.jpg"
          imageAlt="About me visual"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Connect"
          tagIcon={Send}
          title="Get in Touch"
          description="Connect with me for collaborations, inquiries, or just to say hello. I'd love to hear from you and explore how we can create something amazing together."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-psd/online-courses-social-media-post-collection-set_47987-33994.jpg"
          imageAlt="Connect with me"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="By connecting, you agree to receive updates and messages. We respect your privacy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="Profile footer image"
          logoText="ProfileHub"
          copyrightText="© 2025 Social Profile Hub. All rights reserved."
          columns={[
            {
              title: "Profile",              items: [
                { label: "My Stories", href: "#stories" },
                { label: "My Posts", href: "#posts" },
                { label: "About", href: "#about" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact Me", href: "contact" },
                { label: "Collaborate", href: "contact" },
                { label: "Message", href: "contact" }
              ]
            },
            {
              title: "Social",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}