"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Articles", id: "articles" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Digital Stories"
          bottomRightText="hello@bloghub.com"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroLogoBillboard 
          logoText="BlogHub"
          description="Discover insights, stories, and perspectives on digital culture, design, and innovation. Your source for thoughtful content that matters."
          buttons={[
            { text: "Explore Articles", href: "#articles" },
            { text: "Subscribe Now", href: "#newsletter" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/hands-writing-notebook_1150-162.jpg"
          imageAlt="Blog articles and writing workspace"
          frameStyle="card"
        />
      </div>
      
      <div id="articles" data-section="articles">
        <BlogCardThree 
          title="Latest Articles"
          description="Explore our most recent insights and stories"
          tag="Featured"
          blogs={[
            {
              id: "1",              category: "Digital Marketing",              title: "Mastering Content Strategy in 2025",              excerpt: "Learn how to craft compelling content that resonates with your audience and drives meaningful engagement.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-129.jpg",              imageAlt: "Content strategy illustration",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/working-office_1150-129.jpg",              date: "Jan 22, 2025"
            },
            {
              id: "2",              category: "Web Design",              title: "The Future of User Experience Design",              excerpt: "Explore emerging trends and best practices that are shaping the next generation of digital interfaces.",              imageSrc: "https://img.b2bpic.net/free-photo/view-business-desk-assortment_23-2148128298.jpg",              imageAlt: "Web design trends",              authorName: "Marcus Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/view-business-desk-assortment_23-2148128298.jpg",              date: "Jan 20, 2025"
            },
            {
              id: "3",              category: "Content Creation",              title: "Storytelling That Converts",              excerpt: "Discover the narrative techniques that transform readers into loyal customers and brand advocates.",              imageSrc: "https://img.b2bpic.net/free-photo/from-notebook-glasses-near-laptop_23-2147768820.jpg",              imageAlt: "Storytelling and narrative",              authorName: "Emma Wilson",              authorAvatar: "https://img.b2bpic.net/free-photo/from-notebook-glasses-near-laptop_23-2147768820.jpg",              date: "Jan 18, 2025"
            },
            {
              id: "4",              category: "SEO & Analytics",              title: "Data-Driven SEO Strategies",              excerpt: "Leverage analytics to optimize your content visibility and reach your target audience more effectively.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              imageAlt: "SEO optimization analytics",              authorName: "James Park",              authorAvatar: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              date: "Jan 15, 2025"
            },
            {
              id: "5",              category: "Social Media",              title: "Building Community Through Social Content",              excerpt: "Strategies for creating authentic social media presence that fosters genuine connections with your audience.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              imageAlt: "Social media community",              authorName: "Lisa Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              date: "Jan 12, 2025"
            },
            {
              id: "6",              category: "Visual Content",              title: "The Power of Visual Storytelling",              excerpt: "How compelling imagery and video content can elevate your message and captivate your audience instantly.",              imageSrc: "https://img.b2bpic.net/free-photo/laptop-notebook-wooden-desk_181624-22372.jpg",              imageAlt: "Visual content creation",              authorName: "Alex Thompson",              authorAvatar: "https://img.b2bpic.net/free-photo/laptop-notebook-wooden-desk_181624-22372.jpg",              date: "Jan 10, 2025"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          uniformGridCustomHeightClasses="min-h-[600px]"
        />
      </div>
      
      <div id="newsletter" data-section="newsletter">
        <ContactSplit 
          tag="Newsletter"
          title="Stay Updated with Fresh Content"
          description="Join our community of readers and get weekly updates on the latest articles, insights, and stories delivered to your inbox."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-vector/computer-with-social-profile-social-community_24877-53905.jpg"
          imageAlt="Newsletter subscription"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. Read our privacy policy."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSimple 
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#home" },
                { label: "Articles", href: "#articles" },
                { label: "Categories", href: "#categories" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Categories",              items: [
                { label: "Digital Marketing", href: "#marketing" },
                { label: "Web Design", href: "#design" },
                { label: "Content Strategy", href: "#content" },
                { label: "SEO & Analytics", href: "#seo" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Newsletter", href: "#newsletter" },
                { label: "About Us", href: "#about" },
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" }
              ]
            }
          ]}
          bottomLeftText="© 2025 BlogHub. All rights reserved."
          bottomRightText="Crafted with passion for content creators"
        />
      </div>
    </ThemeProvider>
  );
}