"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Mail } from "lucide-react";

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="medium"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Latest", id: "featured" },
            { name: "Subscribe", id: "newsletter" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Stories Worth Reading"
          description="Discover insights, ideas, and inspiration from writers and creators exploring design, technology, and digital culture"
          background={{ variant: "sparkles-gradient" }}
          avatars={[
            { src: "/placeholders/placeholder1.webp", alt: "Reader 1" },
            { src: "/placeholders/placeholder1.webp", alt: "Reader 2" },
            { src: "/placeholders/placeholder1.webp", alt: "Reader 3" }
          ]}
          avatarText="Trusted by 50K+ monthly readers"
          buttons={[
            { text: "Read Latest Articles", href: "featured" },
            { text: "Subscribe Now", href: "newsletter" }
          ]}
          ariaLabel="Blog homepage hero section"
        />
      </div>

      <div id="featured" data-section="featured">
        <BlogCardThree
          title="Featured Articles"
          description="Handpicked stories from our most insightful writers and thinkers"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          blogs={[
            {
              id: "1",              category: "Web Design",              title: "The Future of Web Design: Interactive Experiences",              excerpt: "Exploring emerging trends in web design and how interactive elements are reshaping user experiences",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-129.jpg",              imageAlt: "Web design trends article",              authorName: "Sarah Mitchell",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 20, 2025"
            },
            {
              id: "2",              category: "Content Strategy",              title: "Building an Effective Content Calendar",              excerpt: "Master the art of planning and organizing content that resonates with your audience",              imageSrc: "https://img.b2bpic.net/free-photo/view-business-desk-assortment_23-2148128298.jpg",              imageAlt: "Content calendar planning",              authorName: "James Chen",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 18, 2025"
            },
            {
              id: "3",              category: "Writing Tips",              title: "How to Write Compelling Blog Headlines",              excerpt: "Techniques and strategies to create headlines that capture attention and drive engagement",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              imageAlt: "Writing tips and headlines",              authorName: "Emily Rodriguez",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 15, 2025"
            },
            {
              id: "4",              category: "SEO",              title: "SEO Best Practices in 2025",              excerpt: "Updated strategies for optimizing your content and improving search engine visibility",              imageSrc: "https://img.b2bpic.net/free-photo/crop-hands-using-laptop-making-notes-marble-table_23-2147929594.jpg",              imageAlt: "SEO optimization strategies",              authorName: "Michael Park",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 12, 2025"
            },
            {
              id: "5",              category: "Social Media",              title: "Maximizing Reach on Social Platforms",              excerpt: "Proven tactics for increasing visibility and engagement across social media channels",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-113.jpg",              imageAlt: "Social media strategy",              authorName: "Jessica Lee",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 10, 2025"
            },
            {
              id: "6",              category: "Personal Branding",              title: "Establishing Your Voice as a Writer",              excerpt: "Developing a unique writing voice that sets you apart and builds audience loyalty",              imageSrc: "https://img.b2bpic.net/free-photo/hands-male-business-executive-using-laptop_1170-2940.jpg",              imageAlt: "Personal branding for writers",              authorName: "David Anderson",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 8, 2025"
            }
          ]}
          ariaLabel="Featured blog articles section"
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Never Miss a Story"
          description="Subscribe to our weekly newsletter and get the best articles delivered straight to your inbox. Join thousands of readers who get fresh insights every week."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. No spam, ever."
          ariaLabel="Newsletter subscription section"
        />
      </div>

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