"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, BookOpen } from "lucide-react";

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Articles", id: "articles" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="BlogHub"
          bottomLeftText="Stay Updated"
          bottomRightText="hello@bloghub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Welcome to BlogHub"
          description="Discover insightful articles on technology, design, business, and lifestyle. Stay informed with our latest stories and perspectives."
          background={{ variant: "animated-grid" }}
          tag="Featured Content"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/hands-writing-notebook_1150-162.jpg"
          imageAlt="Blog homepage hero"
          buttons={[
            { text: "Browse Articles", href: "#articles" },
            { text: "Subscribe", href: "#newsletter" }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardThree
          title="Featured Articles"
          description="Explore our latest insights and stories curated for you"
          tag="Blog"
          tagIcon={BookOpen}
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of Web Development: AI-Powered Tools",              excerpt: "Explore how artificial intelligence is transforming the way developers build and deploy web applications.",              imageSrc: "https://img.b2bpic.net/free-vector/abstract-technology-science-background-with-connecting-lines_1017-22915.jpg",              imageAlt: "AI and web development",              authorName: "Sarah Johnson",              date: "Jan 28, 2025"
            },
            {
              id: "2",              category: "Design",              title: "Mastering Color Psychology in Digital Design",              excerpt: "Learn how to leverage color theory to create emotionally resonant and effective digital experiences.",              imageSrc: "https://img.b2bpic.net/free-photo/digital-blue-hud-interface-laptop-concept_53876-64973.jpg",              imageAlt: "Color design theory",              authorName: "Michael Chen",              date: "Jan 25, 2025"
            },
            {
              id: "3",              category: "Business",              title: "Data-Driven Marketing Strategies for Startups",              excerpt: "Discover how to use analytics and data insights to optimize your marketing efforts and drive growth.",              imageSrc: "https://img.b2bpic.net/free-vector/digital-scientific-technology-banner-design_1055-8058.jpg",              imageAlt: "Business analytics",              authorName: "Emily Rodriguez",              date: "Jan 22, 2025"
            },
            {
              id: "4",              category: "Lifestyle",              title: "Building Healthy Work-Life Balance as a Remote Developer",              excerpt: "Practical tips and strategies for maintaining wellness while working from home in the tech industry.",              imageSrc: "https://img.b2bpic.net/free-photo/abstract-techno-background-with-connecting-dots-lines_1048-5771.jpg",              imageAlt: "Work life balance",              authorName: "David Kim",              date: "Jan 20, 2025"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactText
          text="Subscribe to Our Newsletter and Never Miss a Story"
          animationType="entrance-slide"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Get Weekly Insights", href: "#subscribe" },
            { text: "Browse Categories", href: "#categories" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/3-banners-blurry-style_1017-6887.jpg"
          imageAlt="Footer gradient"
          columns={[
            {
              title: "Content",              items: [
                { label: "Latest Articles", href: "#articles" },
                { label: "Categories", href: "#categories" },
                { label: "Popular Posts", href: "#popular" },
                { label: "Archive", href: "#archive" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Team", href: "#team" },
                { label: "Careers", href: "#careers" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" },
                { label: "Newsletter", href: "#newsletter" }
              ]
            }
          ]}
          logoText="BlogHub"
          copyrightText="© 2025 BlogHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}