"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Heart, ImageIcon, Play, TrendingUp, UserPlus, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Profile", id: "profile" },
            { name: "Feed", id: "feed" },
            { name: "Messages", id: "messages" },
            { name: "Settings", id: "settings" },
            { name: "Logout", id: "logout" }
          ]}
          brandName="SocialHub"
          bottomLeftText="Connect with friends"
          bottomRightText="support@socialhub.com"
        />
      </div>

      <div id="profile" data-section="profile">
        <InlineImageSplitTextAbout
          heading={[
            { type: "image", src: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg", alt: "Profile Avatar" },
            { type: "text", content: "Alexandra Mitchell" }
          ]}
          buttons={[
            { text: "Edit Profile", href: "#edit" },
            { text: "Share Profile", href: "#share" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardOne
          metrics={[
            { id: "posts", value: "482", title: "Posts", description: "Content shared", icon: ImageIcon },
            { id: "followers", value: "24.5K", title: "Followers", description: "Community members", icon: Users },
            { id: "following", value: "1.2K", title: "Following", description: "Accounts followed", icon: UserPlus },
            { id: "engagement", value: "8.3K", title: "Likes", description: "Total engagement", icon: Heart }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          title="Your Stats"
          description="Track your engagement and growth"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stories" data-section="stories">
        <FeatureCardTwentySix
          title="Your Stories"
          description="Share moments from your day. Stories disappear after 24 hours."
          features={[
            { title: "Morning Adventure", description: "Posted 2 hours ago", imageSrc: "https://img.b2bpic.net/free-photo/group-friends-reading-cell-phone-messages_23-2150409968.jpg", imageAlt: "Story 1", buttonIcon: Play, buttonHref: "#view-story-1" },
            { title: "Coffee Break", description: "Posted 4 hours ago", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-girls-taking-selfie-with-old-phone_23-2149550617.jpg", imageAlt: "Story 2", buttonIcon: Play, buttonHref: "#view-story-2" },
            { title: "Creative Session", description: "Posted 6 hours ago", 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: "Story 3", buttonIcon: Play, buttonHref: "#view-story-3" },
            { title: "Evening Vibes", description: "Posted 8 hours ago", imageSrc: "https://img.b2bpic.net/free-photo/group-friends-reading-cell-phone-messages_23-2150409968.jpg", imageAlt: "Story 4", buttonIcon: Play, buttonHref: "#view-story-4" }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="feed" data-section="feed">
        <BlogCardThree
          title="Your Feed"
          description="Latest posts from your network and following"
          blogs={[
            {
              id: "post-1",              category: "Lifestyle",              title: "Exploring the City",              excerpt: "Discovered an amazing new coffee shop in downtown. The ambiance is perfect for creative work.",              imageSrc: "https://img.b2bpic.net/free-photo/easter-holiday-photo-from-your-phone-beautifully-preserved-table-festive-easter-lunch-breakfast_169016-4234.jpg",              imageAlt: "City exploration post",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 hours ago"
            },
            {
              id: "post-2",              category: "Creative",              title: "New Design Project",              excerpt: "Just launched a redesign project. Excited to share the process and learnings with the community.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-people-using-social-media-their-smartphones_53876-102035.jpg",              imageAlt: "Design project post",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "5 hours ago"
            },
            {
              id: "post-3",              category: "Community",              title: "Met Amazing People",              excerpt: "Attended a networking event today and had great conversations about the future of digital design.",              imageSrc: "https://img.b2bpic.net/free-photo/lovely-girlfriend-boyfriend-cuddle-while-sit-together_273609-28652.jpg",              imageAlt: "Community event post",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "1 day ago"
            },
            {
              id: "post-4",              category: "Inspiration",              title: "Learning Something New",              excerpt: "Started a new course on advanced UI patterns. It's challenging but rewarding to expand my skillset.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-female-best-friends-pose-selfie-use-modern-cell-phone-sit-restaurant-have-funny-expressions-share-photos-social-networks-connected-wireless-internet-friendship-concept_273609-2427.jpg",              imageAlt: "Learning post",              authorName: "You",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg",              date: "2 days ago"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="engagement" data-section="engagement">
        <TestimonialCardTwelve
          testimonials={[
            { id: "follower-1", name: "Emma", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg" },
            { id: "follower-2", name: "James", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg" },
            { id: "follower-3", name: "Sarah", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg" },
            { id: "follower-4", name: "Michael", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg" },
            { id: "follower-5", name: "Jessica", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg" },
            { id: "follower-6", name: "David", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg" }
          ]}
          cardTitle="24.5K people follow you and love your content"
          cardTag="Top Engagement"
          cardTagIcon={TrendingUp}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactSplitForm
          title="Connect with Us"
          description="Got a question or want to collaborate? Send us a message and we'll get back to you soon."
          inputs={[
            { name: "email", type: "email", placeholder: "Your email", required: true },
            { name: "subject", type: "text", placeholder: "Subject", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Your message", rows: 5, required: true }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-vector/abstract-modern-background-with-waves_1361-1452.jpg"
          imageAlt="Contact section"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="SocialHub"
          leftLink={{ text: "Privacy Policy", href: "#privacy" }}
          rightLink={{ text: "Terms of Service", href: "#terms" }}
        />
      </div>
    </ThemeProvider>
  );
}