"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Users, Image, Heart, Coffee, Droplet, Leaf, MapPin, Palette, Sparkles, Zap, Star, Mail } from "lucide-react";

export default function SocialMediaPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SocialHub"
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Stories", id: "stories" },
            { name: "Feed", id: "feed" },
            { name: "Stats", id: "stats" },
            { name: "Settings", id: "settings" }
          ]}
          button={{
            text: "Follow",            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="@jessica.chen"
          description="Creative director | Travel enthusiast | Coffee lover ☕ Sharing moments that inspire"
          buttons={[
            { text: "Follow", href: "#" },
            { text: "Message", href: "#" }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/social-media-cover-with-geometric-design_1048-7641.jpg"
          imageAlt="Profile banner background"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="About Me"
          description="Documenting life's beautiful moments through creative storytelling and authentic connections"
          tag="Profile Bio"
          bulletPoints={[
            {
              title: "2.5M Followers",              description: "Growing community of inspired creators and adventure seekers",              icon: Users
            },
            {
              title: "420+ Posts",              description: "Consistent content sharing travel, lifestyle, and creative projects",              icon: Image
            },
            {
              title: "15K+ Likes Daily",              description: "Engaged audience supporting every new story and update",              icon: Heart
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg"
          imageAlt="Profile avatar"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stories" data-section="stories">
        <FeatureBento
          title="Stories Highlights"
          description="Explore curated moments from my recent adventures and daily life"
          tag="Latest Stories"
          features={[
            {
              title: "Tokyo Adventure",              description: "Urban exploration and cultural discoveries",              bentoComponent: "media-stack",              items: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/attractive-man-enjoying-view-mountains-landscape-water-surface_146671-15622.jpg",                  imageAlt: "Tokyo street"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/attractive-man-enjoying-view-mountains-landscape-water-surface_146671-15622.jpg",                  imageAlt: "Tokyo landmark"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/attractive-man-enjoying-view-mountains-landscape-water-surface_146671-15622.jpg",                  imageAlt: "Tokyo night"
                }
              ]
            },
            {
              title: "Coffee Culture",              description: "Best cafes and coffee moments around the world",              bentoComponent: "marquee",              centerIcon: Coffee,
              variant: "icon",              icons: [Coffee, Droplet, Leaf, MapPin]
            },
            {
              title: "Creative Work",              description: "Behind-the-scenes of my design and content creation process",              bentoComponent: "orbiting-icons",              centerIcon: Palette,
              items: [
                { icon: Sparkles, ring: 1 },
                { icon: Zap, ring: 1 },
                { icon: Star, ring: 2 },
                { icon: Heart, ring: 2 }
              ]
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Profile Performance This Month"
          tag="Growth Metrics"
          metrics={[
            {
              id: "1",              value: "2.5M",              description: "Total followers across all platforms and growing daily"
            },
            {
              id: "2",              value: "15K+",              description: "Average likes per post with high engagement rate"
            },
            {
              id: "3",              value: "98%",              description: "Audience satisfaction rate based on comments and shares"
            },
            {
              id: "4",              value: "45%",              description: "Monthly growth in follower count year over year"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="posts" data-section="posts">
        <BlogCardThree
          title="Recent Posts"
          description="Check out my latest content and moments shared with the community"
          tag="Posts Feed"
          blogs={[
            {
              id: "1",              category: "Travel",              title: "Hidden Gems in Kyoto - A Local's Guide",              excerpt: "Discovering the serene temples, traditional gardens, and authentic tea houses that make Kyoto magical beyond the tourist trails.",              imageSrc: "https://img.b2bpic.net/free-photo/stylish-girl-taking-pictures-with-apple-notebook-whie-table_176420-11555.jpg",              imageAlt: "Kyoto temple",              authorName: "Jessica Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg",              date: "2 days ago"
            },
            {
              id: "2",              category: "Lifestyle",              title: "My Creative Process - From Idea to Content",              excerpt: "Sharing my workflow for ideating, shooting, editing, and publishing content that resonates with my audience and tells authentic stories.",              imageSrc: "https://img.b2bpic.net/free-photo/easter-holiday-photo-from-your-phone-beautifully-preserved-table-festive-easter-lunch-breakfast_169016-4234.jpg",              imageAlt: "Creative workspace",              authorName: "Jessica Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg",              date: "5 days ago"
            },
            {
              id: "3",              category: "Community",              title: "Celebrating 2.5M Followers - Thank You!",              excerpt: "Grateful for every follower, comment, and share. This milestone wouldn't be possible without this incredible community of creators.",              imageSrc: "https://img.b2bpic.net/free-photo/cropped-picture-woman-hands-holding-little-perfume-bottle_176420-11553.jpg",              imageAlt: "Community celebration",              authorName: "Jessica Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg",              date: "1 week ago"
            },
            {
              id: "4",              category: "Photography",              title: "Essential Photography Tips for Mobile Creators",              excerpt: "Master smartphone photography with these practical techniques for lighting, composition, and editing that elevate your visual storytelling.",              imageSrc: "https://img.b2bpic.net/free-photo/stylish-girl-taking-pictures-with-apple-notebook-whie-table_176420-11555.jpg",              imageAlt: "Photography tips",              authorName: "Jessica Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/outdoor-shot-young-caucasian-man-with-beard-relaxing-open-air-surrounded-by-beautiful-mountain-setting-rainforest_273609-1855.jpg",              date: "2 weeks ago"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          uniformGridCustomHeightClasses="min-h-[500px]"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Want to Collaborate?"
          ctaDescription="Get in touch for brand partnerships, sponsored content, or creative collaborations"
          ctaButton={{
            text: "Send a Message",            href: "#"
          }}
          ctaIcon={Mail}
          faqs={[
            {
              id: "1",              title: "How can I use your content?",              content: "All content is available for personal use and sharing. For commercial use or reprints, please contact me directly with details about your project."
            },
            {
              id: "2",              title: "Do you accept brand partnerships?",              content: "Yes! I work with brands that align with my values and audience. Send collaboration proposals to partnerships@socialhub.com with details about your brand."
            },
            {
              id: "3",              title: "How often do you post?",              content: "I post new content 4-5 times per week across different platforms. Follow my stories for daily updates and behind-the-scenes moments."
            },
            {
              id: "4",              title: "Can I repost your content?",              content: "Personal sharing with proper credits is welcome! For commercial reposting or large-scale distribution, please ask permission first."
            }
          ]}
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#" },
                { label: "Profile", href: "#profile" },
                { label: "Posts", href: "#posts" },
                { label: "Stories", href: "#stories" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "YouTube", href: "https://youtube.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#" },
                { label: "Settings", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Jessica Chen. All content rights reserved."
          bottomRightText="Follow for daily inspiration and creativity"
        />
      </div>
    </ThemeProvider>
  );
}