"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Camera, Zap, Mail, Images } from "lucide-react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="medium"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="SnapCircle"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Stories", id: "stories" },
            { name: "Posts", id: "feed" },
            { name: "Stats", id: "metrics" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Follow",            onClick: () => console.log('Follow clicked')
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Welcome to My Profile"
          description="Join me on this creative journey and discover amazing content, stories, and moments that inspire."
          tag="Creator Profile"
          tagIcon={Camera}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg"
          imageAlt="Profile hero image"
          buttons={[
            {
              text: "Follow Now",              onClick: () => console.log('Follow clicked')
            },
            {
              text: "View Gallery",              href: "#feed"
            }
          ]}
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Growing Community & Engagement"
          tag="Stats"
          metrics={[
            {
              id: "1",              value: "245.8K",              description: "Active followers engaging with my content daily"
            },
            {
              id: "2",              value: "12.5M",              description: "Total impressions and reach across all platforms"
            },
            {
              id: "3",              value: "98%",              description: "Audience engagement rate and interaction quality"
            },
            {
              id: "4",              value: "847",              description: "Posts shared showcasing creative work and moments"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="stories" data-section="stories">
        <ProductCardFour
          title="Latest Stories"
          description="Check out my recent stories capturing moments from my daily life and creative endeavors"
          tag="24H Content"
          tagIcon={Zap}
          products={[
            {
              id: "story-1",              name: "Morning Adventures",              price: "New",              variant: "8 hours ago",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-inspirational-quotes-instagram-story-collection_23-2148952973.jpg",              imageAlt: "Morning adventures story"
            },
            {
              id: "story-2",              name: "Creative Studio Time",              price: "Hot",              variant: "12 hours ago",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-web-designer-instagram-stories_23-2150397672.jpg",              imageAlt: "Creative studio story"
            },
            {
              id: "story-3",              name: "Behind The Scenes",              price: "Trending",              variant: "1 day ago",              imageSrc: "https://img.b2bpic.net/free-vector/advertising-agency-instagram-stories-template_23-2150737965.jpg",              imageAlt: "Behind the scenes story"
            },
            {
              id: "story-4",              name: "Collaboration Moment",              price: "New",              variant: "1 day ago",              imageSrc: "https://img.b2bpic.net/free-psd/gradient-business-solutions-instagram-stories_23-2150027289.jpg",              imageAlt: "Collaboration story"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
        />
      </div>
      
      <div id="feed" data-section="feed">
        <BlogCardThree
          title="Posts Feed"
          description="Explore my latest creations and posts from the community"
          tag="Gallery"
          tagIcon={Images}
          blogs={[
            {
              id: "post-1",              category: "Photography",              title: "Golden Hour Captures",              excerpt: "Beautiful sunset moments frozen in time with creative compositions and vibrant lighting techniques.",              imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375361.jpg",              imageAlt: "Golden hour photography",              authorName: "Sarah Creator",              authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",              date: "Jan 14, 2025",              onBlogClick: () => console.log('Post 1 clicked')
            },
            {
              id: "post-2",              category: "Lifestyle",              title: "Coffee & Creativity",              excerpt: "A day in my life exploring the perfect blend of inspiration and daily routines that fuel creativity.",              imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-luxurious-yacht-party-celebration_23-2150375359.jpg",              imageAlt: "Lifestyle moments",              authorName: "Sarah Creator",              authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",              date: "Jan 12, 2025",              onBlogClick: () => console.log('Post 2 clicked')
            },
            {
              id: "post-3",              category: "Design",              title: "Color Theory Exploration",              excerpt: "Diving deep into color palettes and visual harmony creating stunning visual experiences.",              imageSrc: "https://img.b2bpic.net/free-psd/instagram-posts-collection-outdoors-adventure-travel_23-2150288932.jpg",              imageAlt: "Design exploration",              authorName: "Sarah Creator",              authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",              date: "Jan 10, 2025",              onBlogClick: () => console.log('Post 3 clicked')
            },
            {
              id: "post-4",              category: "Travel",              title: "Wanderlust Diaries",              excerpt: "Exploring new destinations and documenting the beauty of the world through my lens.",              imageSrc: "https://img.b2bpic.net/free-psd/holiday-travel-template-design_23-2150263002.jpg",              imageAlt: "Travel adventures",              authorName: "Sarah Creator",              authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",              date: "Jan 8, 2025",              onBlogClick: () => console.log('Post 4 clicked')
            },
            {
              id: "post-5",              category: "Inspiration",              title: "Creative Collaborations",              excerpt: "Working with amazing creators and brands to bring unique projects to life with shared vision.",              imageSrc: "https://img.b2bpic.net/free-psd/world-photography-day-instagram-posts_23-2150543910.jpg",              imageAlt: "Collaboration projects",              authorName: "Sarah Creator",              authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",              date: "Jan 6, 2025",              onBlogClick: () => console.log('Post 5 clicked')
            },
            {
              id: "post-6",              category: "Culture",              title: "Street Art Stories",              excerpt: "Discovering vibrant street art and cultural expressions that celebrate urban creativity worldwide.",              imageSrc: "https://img.b2bpic.net/free-psd/world-photography-day-instagram-posts_23-2150543912.jpg",              imageAlt: "Street art culture",              authorName: "Sarah Creator",              authorAvatar: "https://img.b2bpic.net/free-photo/pleased-young-brunette-caucasian-girl-looks-camera_141793-103873.jpg",              date: "Jan 4, 2025",              onBlogClick: () => console.log('Post 6 clicked')
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          uniformGridCustomHeightClasses="min-h-[500px]"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Connect"
          tagIcon={Mail}
          title="Stay Updated With My Latest Content"
          description="Subscribe to receive notifications about new posts, stories, and exclusive behind-the-scenes content directly in your inbox."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#hero" },
                { label: "Stories", href: "#stories" },
                { label: "Feed", href: "#feed" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "About", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Privacy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 SnapCircle. All rights reserved."
          bottomRightText="Made with creativity and passion"
        />
      </div>
    </ThemeProvider>
  );
}