"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles } from 'lucide-react';

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "articles" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" }
          ]}
          button={{
            text: "Subscribe",            href: "newsletter"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Stories, Insights, and Ideas"
          description="Discover thoughtfully crafted articles on technology, design, business, and digital transformation. Stay updated with the latest trends and expert perspectives."
          background={{ variant: "sparkles-gradient" }}
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              alt: "Featured author"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg",              alt: "Featured author"
            },
            {
              src: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",              alt: "Featured author"
            }
          ]}
          avatarText="By talented writers and experts"
          buttons={[
            { text: "Explore Articles", href: "#articles" },
            { text: "Subscribe for Updates", href: "#newsletter" }
          ]}
        />
      </div>

      <div id="articles" data-section="articles">
        <BlogCardThree
          title="Latest Articles"
          description="Explore our curated collection of in-depth articles covering technology, design, business strategy, and digital innovation."
          tag="Featured Content"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of AI in Web Development",              excerpt: "Explore how artificial intelligence is transforming the way we build and optimize web applications, from automated testing to intelligent design systems.",              imageSrc: "https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg",              imageAlt: "AI and web development",              authorName: "Sarah Johnson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "Mar 15, 2025"
            },
            {
              id: "2",              category: "Design",              title: "Minimalist UI Design Principles",              excerpt: "Learn how to create elegant interfaces by embracing simplicity, reducing cognitive load, and focusing on what truly matters to users.",              imageSrc: "https://img.b2bpic.net/free-photo/binary-code-digits-technology-software-concept_53876-120040.jpg",              imageAlt: "Minimalist design",              authorName: "Michael Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg",              date: "Mar 12, 2025"
            },
            {
              id: "3",              category: "Business",              title: "Building a Sustainable Growth Strategy",              excerpt: "Discover proven frameworks and strategies for scaling your business sustainably while maintaining product quality and team culture.",              imageSrc: "https://img.b2bpic.net/free-photo/cybersecurity-expert-using-laptop-look-company-security-vulnerabilities_482257-101130.jpg",              imageAlt: "Business growth strategy",              authorName: "Emily Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",              date: "Mar 10, 2025"
            },
            {
              id: "4",              category: "Productivity",              title: "Tools Every Developer Should Know in 2025",              excerpt: "We've compiled a comprehensive guide of essential tools that enhance developer productivity, from code editors to deployment platforms.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-writing-code-laptop_158595-5166.jpg",              imageAlt: "Developer tools",              authorName: "Sarah Johnson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "Mar 8, 2025"
            },
            {
              id: "5",              category: "Trends",              title: "Web3 and the Evolution of Digital Identity",              excerpt: "Understanding decentralized identity systems and how blockchain technology is reshaping digital privacy and authentication.",              imageSrc: "https://img.b2bpic.net/free-photo/working-code_1098-19858.jpg",              imageAlt: "Web3 technology",              authorName: "Michael Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg",              date: "Mar 5, 2025"
            },
            {
              id: "6",              category: "Tutorial",              title: "Advanced React Patterns for Scalable Apps",              excerpt: "Master advanced React patterns and best practices for building large-scale applications that are maintainable and performant.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-editing-video-her-laptop-microphone-table-working-from-home_1268-17364.jpg",              imageAlt: "React development",              authorName: "Emily Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",              date: "Mar 1, 2025"
            }
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactText
          text="Stay informed with our weekly newsletter. Get the latest articles, insights, and industry trends delivered directly to your inbox."
          animationType="entrance-slide"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Subscribe Now", href: "#" },
            { text: "View Archives", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="BlogHub"
          columns={[
            {
              title: "Categories",              items: [
                { label: "Technology", href: "#" },
                { label: "Design", href: "#" },
                { label: "Business", href: "#" },
                { label: "Productivity", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog Archive", href: "#" },
                { label: "Search Articles", href: "#" },
                { label: "Topic Guide", href: "#" },
                { label: "Subscribe", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Contact", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Media Kit", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "#" },
                { label: "LinkedIn", href: "#" },
                { label: "GitHub", href: "#" },
                { label: "RSS Feed", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 BlogHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}