"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function ProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="ProfileHub"
          navItems={[
            { name: "Home", id: "profile-header" },
            { name: "Stats", id: "follower-stats" },
            { name: "Stories", id: "stories-section" },
            { name: "Posts", id: "posts-feed" },
            { name: "Contact", id: "footer" }
          ]}
        />
      </div>

      <div id="profile-header" data-section="profile-header">
        <TextSplitAbout
          title="alex.creative"
          description={[
            "Digital creator & visual designer exploring the intersection of art and technology",            "Sharing moments of inspiration, work in progress, and creative adventures. Follow along for daily content and exclusive behind-the-scenes stories."
          ]}
          buttons={[
            { text: "Follow", href: "#" },
            { text: "Message", href: "#" }
          ]}
          showBorder={false}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="follower-stats" data-section="follower-stats">
        <MetricCardSeven
          title="Engagement Overview"
          description="Track your profile performance and audience growth metrics in real-time"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "248.5K",              title: "Total Followers",              items: ["Growing 2.3K monthly", "94% engagement rate", "Active community"]
            },
            {
              id: "2",              value: "1.2M",              title: "Total Likes",              items: ["2,847 average per post", "Highest: 48.3K", "Strong audience interest"]
            },
            {
              id: "3",              value: "3,842",              title: "Posts Published",              items: ["Posting consistency", "Archive of 5+ years", "Diverse content themes"]
            },
            {
              id: "4",              value: "847",              title: "Following",              items: ["Curated network", "Collaborative partners", "Industry leaders"]
            }
          ]}
        />
      </div>

      <div id="stories-section" data-section="stories-section">
        <ProductCardTwo
          title="Stories"
          description="Explore daily moments and behind-the-scenes content from the past 24 hours"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "story-1",              brand: "Today",              name: "Morning Inspiration",              price: "8:45 AM",              rating: 5,
              reviewCount: "156 views",              imageSrc: "https://img.b2bpic.net/free-photo/woman-hiking-mountains-making-photo_1303-11178.jpg",              imageAlt: "Morning inspiration story"
            },
            {
              id: "story-2",              brand: "Today",              name: "Creative Process",              price: "1:23 PM",              rating: 5,
              reviewCount: "312 views",              imageSrc: "https://img.b2bpic.net/free-photo/happy-woman-having-fun-while-walking-through-nature-with-her-arms-outstretched_637285-2206.jpg",              imageAlt: "Creative process story"
            },
            {
              id: "story-3",              brand: "Today",              name: "Nature Walk",              price: "4:56 PM",              rating: 5,
              reviewCount: "428 views",              imageSrc: "https://img.b2bpic.net/free-photo/hipster-young-girl-with-backpack-enjoying-sunset-peak-rock-mountain_146671-15747.jpg",              imageAlt: "Nature walk story"
            },
            {
              id: "story-4",              brand: "Yesterday",              name: "Celebration Night",              price: "7:30 PM",              rating: 5,
              reviewCount: "892 views",              imageSrc: "https://img.b2bpic.net/free-photo/attractive-man-enjoying-view-mountains-landscape-water-surface_146671-15622.jpg",              imageAlt: "Celebration night story"
            }
          ]}
        />
      </div>

      <div id="posts-feed" data-section="posts-feed">
        <BlogCardThree
          title="Recent Posts"
          description="Discover the latest content and updates from the profile feed"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          blogs={[
            {
              id: "post-1",              category: "Photography",              title: "Golden Hour Captures",              excerpt: "A collection of stunning sunset photographs from last weekend's adventure. Each shot tells a unique story of light and shadow.",              imageSrc: "https://img.b2bpic.net/free-photo/stylish-girl-taking-pictures-with-apple-notebook-whie-table_176420-11555.jpg",              imageAlt: "Golden hour photography",              authorName: "alex.creative",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "2 days ago"
            },
            {
              id: "post-2",              category: "Design",              title: "New Web Design Project",              excerpt: "Excited to share my latest web design project featuring modern aesthetics and seamless user experience. Collaboration made this possible.",              imageSrc: "https://img.b2bpic.net/free-photo/easter-holiday-photo-from-your-phone-beautifully-preserved-table-festive-easter-lunch-breakfast_169016-4234.jpg",              imageAlt: "Web design project",              authorName: "alex.creative",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "5 days ago"
            },
            {
              id: "post-3",              category: "Insights",              title: "The Art of Visual Storytelling",              excerpt: "Exploring how visual elements communicate narratives. Learn the principles of effective design composition and audience engagement strategies.",              imageSrc: "https://img.b2bpic.net/free-photo/cropped-picture-woman-hands-holding-little-perfume-bottle_176420-11553.jpg",              imageAlt: "Visual storytelling concepts",              authorName: "alex.creative",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "1 week ago"
            },
            {
              id: "post-4",              category: "Lifestyle",              title: "Creative Studio Setup Tour",              excerpt: "A behind-the-scenes look at my creative workspace. Discover the tools, inspiration, and environment that fuel daily creative work.",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-writing-her-journal_23-2150416367.jpg",              imageAlt: "Creative studio workspace",              authorName: "alex.creative",              authorAvatar: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",              date: "10 days ago"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="ProfileHub"
          copyrightText="© 2025 ProfileHub. All rights reserved."
          columns={[
            {
              title: "Platform",              items: [
                { label: "Explore", href: "explore" },
                { label: "Trending", href: "trending" },
                { label: "Discover", href: "discover" }
              ]
            },
            {
              title: "Account",              items: [
                { label: "Profile", href: "profile" },
                { label: "Settings", href: "settings" },
                { label: "Saved", href: "saved" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "help" },
                { label: "Contact Us", href: "contact" },
                { label: "Community", href: "community" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}