"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, BookOpen, Mail } from "lucide-react";

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "categories" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Subscribe",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Discover Stories That Inspire"
          description="Explore insightful articles on design, technology, business, and lifestyle. Stay informed with expert perspectives and actionable insights."
          background={{ variant: "sparkles-gradient" }}
          tag="Welcome to BlogHub"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/working-office_1150-120.jpg"
          imageAlt="Blog homepage hero image"
          buttons={[
            { text: "Read Latest", href: "blog" },
            { text: "Browse Categories", href: "#" }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardTwo
          title="Latest Articles"
          description="Stay updated with our newest content covering design trends, technology insights, business strategies, and lifestyle tips."
          tag="Blog"
          tagIcon={BookOpen}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: ["Design", "Inspiration"],
              title: "The Future of Web Design: Trends to Watch in 2025",              excerpt: "Explore emerging design trends that are shaping the digital landscape, from minimalism to interactive experiences.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              imageAlt: "Web design trends article",              authorName: "Sarah Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/woman-with-blond-short-hair-tanned-smiling-cute-gazing-camera-with-friendly_176420-44610.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: ["Technology", "Innovation"],
              title: "AI Tools Revolutionizing Creative Work",              excerpt: "Discover how artificial intelligence is transforming creative processes and opening new possibilities for creators.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-129.jpg",              imageAlt: "AI and creativity article",              authorName: "James Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/teenage-girl-with-wavy-hairstyle-posing_344912-2825.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: ["Business", "Strategy"],
              title: "Building a Sustainable Growth Strategy for Startups",              excerpt: "Learn key principles for scaling your startup sustainably while maintaining company culture and values.",              imageSrc: "https://img.b2bpic.net/free-photo/overhead-view-businesswoman-working-computer-office-place-your-text-ideal-blog-flat-lay-white-background_639032-1378.jpg",              imageAlt: "Startup growth strategy article",              authorName: "Emma Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/side-view-business-woman-portrait-outdoors_23-2148603027.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: ["Productivity", "Tips"],
              title: "Mastering Time Management: 5 Proven Techniques",              excerpt: "Boost your productivity with science-backed time management techniques that actually work for remote teams.",              imageSrc: "https://img.b2bpic.net/free-photo/crop-hands-using-laptop-making-notes-marble-table_23-2147929594.jpg",              imageAlt: "Time management tips article",              authorName: "Sarah Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/woman-with-blond-short-hair-tanned-smiling-cute-gazing-camera-with-friendly_176420-44610.jpg",              date: "8 Jan 2025"
            },
            {
              id: "5",              category: ["Lifestyle", "Wellness"],
              title: "Work-Life Balance: Creating Healthy Boundaries",              excerpt: "Practical strategies for maintaining well-being while pursuing ambitious professional goals.",              imageSrc: "https://img.b2bpic.net/free-photo/man-is-using-laptop-books-notebook-top-view_169016-49211.jpg",              imageAlt: "Work life balance article",              authorName: "James Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/teenage-girl-with-wavy-hairstyle-posing_344912-2825.jpg",              date: "5 Jan 2025"
            },
            {
              id: "6",              category: ["Business", "Success"],
              title: "How Successful Companies Foster Innovation Culture",              excerpt: "Understand the organizational practices that enable continuous innovation and creative problem-solving.",              imageSrc: "https://img.b2bpic.net/free-photo/hands-writing-notebook_1150-162.jpg",              imageAlt: "Innovation culture article",              authorName: "Emma Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/side-view-business-woman-portrait-outdoors_23-2148603027.jpg",              date: "2 Jan 2025"
            }
          ]}
          buttons={[
            { text: "View All Articles", href: "#" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Updated With Our Latest Content"
          description="Subscribe to receive weekly articles, exclusive insights, and industry updates delivered to your inbox."
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. Your email will only be used for newsletter content."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Content",              items: [
                { label: "Latest Articles", href: "blog" },
                { label: "Categories", href: "#" },
                { label: "Archive", href: "#" },
                { label: "Featured", href: "#" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Subscribe", href: "contact" },
                { label: "Contact Us", href: "contact" },
                { label: "Guest Posts", href: "#" },
                { label: "Feedback", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Sitemap", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 BlogHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}