"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Heart, Instagram, Twitter, Linkedin } from 'lucide-react';

export default function ProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="ProfileHub"
          navItems={[
            { name: "Explore", id: "explore" },
            { name: "Messages", id: "messages" },
            { name: "Notifications", id: "notifications" },
            { name: "Profile", id: "profile" },
            { name: "Settings", id: "settings" }
          ]}
        />
      </div>

      <div id="profile-hero" data-section="profile-hero">
        <HeroBillboardScroll
          title="Welcome to My Profile"
          description="Discover my latest updates, stories, and creations. Stay connected and follow my journey."
          background={{ variant: "radial-gradient" }}
          tag="Social Media Profile"
          tagIcon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-vertical-image-smiling-african-man-looking_171337-9837.jpg"
          imageAlt="profile hero person professional portrait"
          buttons={[
            { text: "Follow" },
            { text: "Message", href: "contact" }
          ]}
        />
      </div>

      <div id="stories" data-section="stories">
        <TextSplitAbout
          title="My Stories"
          description={[
            "Explore my daily moments and recent adventures shared through interactive stories.",            "Stories highlight the highlights of my day-to-day life, travel experiences, and special moments worth sharing.",            "Swipe through my latest stories or tap to view full experiences with photos, videos, and personal commentary."
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Stories" }
          ]}
        />
      </div>

      <div id="posts-feed" data-section="posts-feed">
        <ProductCardOne
          title="Latest Posts"
          description="Browse through my recent posts, updates, and shared content from across my social network."
          tag="Posts Feed"
          products={[
            {
              id: "post-1",              name: "Summer Vibes",              price: "24 likes",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-coffee-fruits-with-smartphone_23-2147912451.jpg",              imageAlt: "social post lifestyle moment share"
            },
            {
              id: "post-2",              name: "Creative Projects",              price: "156 likes",              imageSrc: "https://img.b2bpic.net/free-photo/various-cookies-with-tea-magazine-table_140725-5588.jpg",              imageAlt: "social post creativity inspiration content"
            },
            {
              id: "post-3",              name: "Wellness Journey",              price: "89 likes",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-drinking-coffee_52683-119034.jpg",              imageAlt: "social post wellness lifestyle healthy"
            },
            {
              id: "post-4",              name: "Nature Escape",              price: "342 likes",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-picture-coffee-with-smartphone_23-2147912449.jpg",              imageAlt: "social post nature outdoor scenery"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="follower-stats" data-section="follower-stats">
        <MetricCardTen
          title="Profile Statistics"
          description="Track engagement and growth across your social media presence with real-time metrics."
          tag="Analytics"
          metrics={[
            {
              id: "1",              title: "Total Followers",              subtitle: "Your follower community growing daily",              category: "Growth",              value: "12,847"
            },
            {
              id: "2",              title: "Average Engagement",              subtitle: "Posts, comments, and shares per week",              category: "Engagement",              value: "428"
            },
            {
              id: "3",              title: "Profile Views",              subtitle: "Weekly profile visits from followers",              category: "Analytics",              value: "2,156"
            },
            {
              id: "4",              title: "Save Rate",              subtitle: "Percentage of posts saved by followers",              category: "Performance",              value: "32.8%"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured-content" data-section="featured-content">
        <TestimonialCardSix
          title="Community Highlights"
          description="Hear from followers and community members who engage with my content."
          tag="Community"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen",              testimonial: "Love the authentic content and positive vibes! Your stories always brighten my day.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Johnson",              handle: "@marcusj",              testimonial: "The creativity and effort you put into every post is truly inspiring. Keep up the amazing work!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              name: "Emma Wilson",              handle: "@emmaw",              testimonial: "Your profile is my go-to for daily inspiration and lifestyle tips. So glad I found you!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: "Emma Wilson"
            },
            {
              id: "4",              name: "Alex Rodriguez",              handle: "@alexrod",              testimonial: "Following your journey has been incredible. The engagement and community you've built is amazing.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: "Alex Rodriguez"
            },
            {
              id: "5",              name: "Jessica Liu",              handle: "@jessical",              testimonial: "Your authentic storytelling sets you apart. This is the kind of content the world needs more of!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: "Jessica Liu"
            },
            {
              id: "6",              name: "David Park",              handle: "@davidpark",              testimonial: "Impressed by the consistency and quality of your posts. You're building something special here.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              imageAlt: "David Park"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have a question or collaboration idea? Reach out directly and let's connect. I'd love to hear from you!"
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-lying-bed-with-mobile-phone-coffee_23-2147911494.jpg"
          imageAlt="contact communication message connect community"
          mediaPosition="right"
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Your message here...",            rows: 5,
            required: true
          }}
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="ProfileHub"
          copyrightText="© 2025 ProfileHub. All rights reserved."
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",              ariaLabel: "Instagram"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",              ariaLabel: "Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}