"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Heart, Lightbulb, MapPin, Star, ThumbsUp, Zap } from "lucide-react";

export default function SocialProfilePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="SocialHub"
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Feed", id: "feed" },
            { name: "Messages", id: "messages" },
            { name: "Settings", id: "settings" },
            { name: "Explore", id: "explore" }
          ]}
          button={{ text: "Follow", href: "contact" }}
        />
      </div>

      <div id="profile" data-section="profile">
        <HeroBillboardScroll
          title="Creative Professional & Content Creator"
          description="Sharing moments, ideas, and inspiration. Join 45K+ followers exploring a journey of creativity, travel, and personal growth."
          background={{ variant: "plain" }}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg"
          imageAlt="Profile avatar"
          buttons={[
            { text: "Follow", href: "#contact" },
            { text: "Message" }
          ]}
        />
      </div>

      <div id="stories" data-section="stories">
        <ProductCardTwo
          title="Story Highlights"
          description="Browse through featured story collections and moments"
          products={[
            {
              id: "story-travel",              brand: "Stories",              name: "Travel Diaries",              price: "15 Stories",              rating: 5,
              reviewCount: "324",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-writing-notebook_23-2148960419.jpg",              imageAlt: "Travel story highlight"
            },
            {
              id: "story-creative",              brand: "Stories",              name: "Creative Projects",              price: "28 Stories",              rating: 5,
              reviewCount: "542",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-coffee-fruits-with-smartphone_23-2147912451.jpg",              imageAlt: "Creative story highlight"
            },
            {
              id: "story-lifestyle",              brand: "Stories",              name: "Daily Life",              price: "42 Stories",              rating: 5,
              reviewCount: "876",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-picture-coffee-with-smartphone_23-2147912449.jpg",              imageAlt: "Lifestyle story highlight"
            },
            {
              id: "story-behind",              brand: "Stories",              name: "Behind the Scenes",              price: "31 Stories",              rating: 5,
              reviewCount: "456",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-selfie-while-holding-autumn-leaf_23-2148647567.jpg",              imageAlt: "Behind the scenes story highlight"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="statistics" data-section="statistics">
        <MetricCardTen
          title="Performance & Engagement"
          description="Key metrics showing your profile's impact and audience connection"
          metrics={[
            {
              id: "followers",              title: "Total Followers",              subtitle: "Growing community of engaged users",              category: "Followers",              value: "45,230"
            },
            {
              id: "engagement",              title: "Average Engagement Rate",              subtitle: "Per post across all content",              category: "Engagement",              value: "8.5%"
            },
            {
              id: "posts",              title: "Total Posts",              subtitle: "Content shared with community",              category: "Content",              value: "342"
            },
            {
              id: "reach",              title: "Monthly Reach",              subtitle: "Total unique profile views",              category: "Reach",              value: "156K"
            },
            {
              id: "stories",              title: "Stories Published",              subtitle: "Ephemeral content shared",              category: "Stories",              value: "1,240"
            },
            {
              id: "interactions",              title: "Total Interactions",              subtitle: "Likes, comments, and shares combined",              category: "Interactions",              value: "28.5K"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="feed" data-section="feed">
        <BlogCardOne
          title="Recent Posts"
          description="Latest content from the feed, showcasing recent moments and creative work"
          blogs={[
            {
              id: "post-001",              category: "Lifestyle",              title: "Golden Hour Moments in the City",              excerpt: "Capturing the beauty of sunset reflections across urban architecture. A visual journey through light and shadow.",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-woman-with-short-hair-yellow-glasses-laughs-lies-grass-outside-woman-denim-jacket-making-selfie-outdoors_197531-19357.jpg",              imageAlt: "Golden hour city photography",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 days ago"
            },
            {
              id: "post-002",              category: "Creative",              title: "New Design System Exploration",              excerpt: "Diving deep into modern UI patterns and component-based design thinking. Sharing research and process.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-selfie-while-holding-autumn-leaf_23-2148647567.jpg",              imageAlt: "Design system mockups",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "5 days ago"
            },
            {
              id: "post-003",              category: "Travel",              title: "Mountain Trails and Alpine Views",              excerpt: "Exploring hidden trails in the Rockies. Nature photography and adventure stories from the summit.",              imageSrc: "https://img.b2bpic.net/free-photo/crop-woman-with-retro-camera-near-breakfast-food_23-2147911464.jpg",              imageAlt: "Mountain landscape photography",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 week ago"
            },
            {
              id: "post-004",              category: "Collaboration",              title: "Working Together on Creative Vision",              excerpt: "Excited to announce our collaboration project. Behind-the-scenes of teamwork and creative synergy.",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-girls-taking-selfie-with-old-phone_23-2149550617.jpg",              imageAlt: "Team collaboration project",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "10 days ago"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured" data-section="featured">
        <FeatureCardTwentyTwo
          title="Featured Work"
          description="Highlights of most appreciated content and collaborative projects"
          features={[
            {
              id: "featured-1",              category: ["Photography", "Award-Winning"],
              title: "Desert Landscape Series - International Recognition",              imageSrc: "https://img.b2bpic.net/free-vector/abstract-instagram-highlights-set_23-2148882324.jpg",              imageAlt: "Featured landscape photography"
            },
            {
              id: "featured-2",              category: ["Design", "UI/UX"],
              title: "Interactive Web Design Project - Client Showcase",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-selfie-while-holding-autumn-leaf_23-2148647567.jpg",              imageAlt: "Featured design project"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Followers Say"
          description="Community feedback and testimonials from engaged followers"
          showRating={true}
          testimonials={[
            {
              id: "testimonial-1",              name: "Alex Martinez",              handle: "@alexmartinez",              testimonial: "Your content is always inspiring! The creativity and effort you put into every post really shines through.",              rating: 5,
              icon: Heart
            },
            {
              id: "testimonial-2",              name: "Jordan Kim",              handle: "@jordankim",              testimonial: "Love following your journey. Your storytelling combined with stunning visuals makes my day every time.",              rating: 5,
              icon: Star
            },
            {
              id: "testimonial-3",              name: "Casey Brooks",              handle: "@caseybrooks",              testimonial: "The design insights you share are incredibly valuable. Thank you for consistently creating quality content!",              rating: 5,
              icon: ThumbsUp
            },
            {
              id: "testimonial-4",              name: "Morgan Davis",              handle: "@morgandavis",              testimonial: "Your travel stories make me want to explore the world. The photography is absolutely breathtaking.",              rating: 5,
              icon: MapPin
            },
            {
              id: "testimonial-5",              name: "Taylor Reed",              handle: "@taylorreed",              testimonial: "Following you has been such a positive influence on my creative work. Keep up the amazing content!",              rating: 5,
              icon: Zap
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Connect"
          tagIcon={Lightbulb}
          title="Ready to Collaborate?"
          description="Whether it's a partnership, feature, or just to say hi—I'd love to hear from you. Drop a message or DM me directly."
          background={{ variant: "animated-grid" }}
          buttons={[
            { text: "Send Message", href: "#" },
            { text: "View Contact Info", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </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"
          columns={[
            {
              title: "Profile",              items: [
                { label: "About", href: "#profile" },
                { label: "Posts", href: "#feed" },
                { label: "Stories", href: "#stories" },
                { label: "Saved", href: "#" }
              ]
            },
            {
              title: "Social",              items: [
                { label: "Instagram", href: "#" },
                { label: "Twitter", href: "#" },
                { label: "LinkedIn", href: "#" },
                { label: "Pinterest", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Portfolio", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#" }
              ]
            }
          ]}
          logoText="SocialHub"
          copyrightText="© 2025 SocialHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}