"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
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="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "blog" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Subscribe",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="BlogHub"
          description="Discover insightful articles on technology, design, and digital strategy"
          buttons={[
            { text: "Start Reading", href: "#blog" },
            { text: "Subscribe", href: "#contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/working-office_1150-120.jpg"
          imageAlt="Blog hero background with creative workspace"
          showDimOverlay={true}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardThree
          title="Featured Articles"
          description="Explore our latest insights and in-depth analysis on digital trends"
          tag="Latest"
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of AI in Web Development",              excerpt: "How artificial intelligence is revolutionizing the way we build and optimize web applications.",              imageSrc: "https://img.b2bpic.net/free-photo/early-mornings-office_1122-2727.jpg",              imageAlt: "AI and technology illustration",              authorName: "Sarah Chen",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 18, 2025"
            },
            {
              id: "2",              category: "Design",              title: "Mastering Modern UI Design Principles",              excerpt: "Essential design concepts and frameworks that every designer should understand in 2025.",              imageSrc: "https://img.b2bpic.net/free-photo/cute-desktop-with-office-appliances-keyboard_23-2147830062.jpg",              imageAlt: "Modern UI design mockup",              authorName: "Michael Rodriguez",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 16, 2025"
            },
            {
              id: "3",              category: "Marketing",              title: "Content Strategy That Drives Real Growth",              excerpt: "Proven tactics for creating content that resonates with your audience and converts.",              imageSrc: "https://img.b2bpic.net/free-photo/workspace-with-office-supplies_140725-23238.jpg",              imageAlt: "Content marketing analytics",              authorName: "Emma Watson",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 14, 2025"
            },
            {
              id: "4",              category: "Business",              title: "Building a Productive Remote Team Culture",              excerpt: "Best practices for fostering collaboration and maintaining team morale in distributed environments.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-112.jpg",              imageAlt: "Remote team collaboration",              authorName: "James Morrison",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 12, 2025"
            },
            {
              id: "5",              category: "Writing",              title: "The Art of Compelling Blog Headlines",              excerpt: "Craft headlines that capture attention and encourage readers to dive into your content.",              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-working-cafe_1157-30929.jpg",              imageAlt: "Writing and publishing workspace",              authorName: "Lisa Park",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 10, 2025"
            },
            {
              id: "6",              category: "Lifestyle",              title: "Work-Life Balance in the Digital Age",              excerpt: "Practical strategies for maintaining wellness while staying productive in an always-on world.",              imageSrc: "https://img.b2bpic.net/free-photo/topview-workplace-with-laptop-coffee-wooden-background_23-2148205621.jpg",              imageAlt: "Wellness and mindfulness",              authorName: "David Kumar",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 8, 2025"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated with Our Latest Articles"
          description="Join thousands of readers who receive our weekly digest of the best insights on technology, design, and digital strategy."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/laptop-notebook-writing-from-view-wooden-background_482257-35213.jpg"
          imageAlt="Newsletter subscription illustration"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime with one click."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "#hero" },
                { label: "Articles", href: "#blog" },
                { label: "Categories", href: "#blog" }
              ]
            },
            {
              title: "Categories",              items: [
                { label: "Technology", href: "#blog" },
                { label: "Design", href: "#blog" },
                { label: "Marketing", href: "#blog" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Privacy Policy", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Newsletter", href: "#contact" }
              ]
            }
          ]}
          bottomLeftText="© 2025 BlogHub. All rights reserved."
          bottomRightText="Made with passion for writers and readers"
        />
      </div>
    </ThemeProvider>
  );
}