"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Mail } from "lucide-react";

export default function BlogHomepage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Subscribe",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="BlogHub"
          description="Discover insights, stories, and expert perspectives on technology, design, and innovation. Your source for in-depth articles and trending topics."
          background={{
            variant: "radial-gradient"
          }}
          buttons={[
            { text: "Read Articles", href: "blog" },
            { text: "Learn More", href: "about" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg"
          imageAlt="Blog homepage hero image"
          frameStyle="card"
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          title="Latest Articles"
          description="Stay updated with our newest insights and expert perspectives"
          tag="Blog"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of AI in Web Development",              excerpt: "Exploring how artificial intelligence is revolutionizing the way we build and design digital experiences for modern web applications.",              imageSrc: "https://img.b2bpic.net/free-photo/concentrated-colleagues-sitting-office-coworking_171337-17049.jpg",              imageAlt: "AI and web development",              authorName: "Sarah Johnson",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: "Design",              title: "Minimalist UI Principles for 2025",              excerpt: "Discover how to create clean, focused user interfaces that enhance user experience and reduce cognitive load in your designs.",              imageSrc: "https://img.b2bpic.net/free-photo/hands-writing-notebook_1150-162.jpg",              imageAlt: "Minimalist design concepts",              authorName: "Michael Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: "Business",              title: "Scaling Your Startup: Growth Strategies",              excerpt: "Essential strategies for scaling your startup from zero to market leadership through focused growth and strategic partnerships.",              imageSrc: "https://img.b2bpic.net/free-photo/early-mornings-office_1122-2727.jpg",              imageAlt: "Startup growth strategies",              authorName: "Emily Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: "Development",              title: "Mastering Next.js: A Comprehensive Guide",              excerpt: "Complete guide to building performant React applications with Next.js, including server components, API routes, and deployment.",              imageSrc: "https://img.b2bpic.net/free-photo/cropped-top-view-male-hands-man-typing-laptop-keyboard-working-cafe-sitting-round-table_1258-245340.jpg",              imageAlt: "Next.js development guide",              authorName: "David Kim",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "08 Jan 2025"
            },
            {
              id: "5",              category: "Lifestyle",              title: "Remote Work Best Practices",              excerpt: "Tips and strategies for maintaining productivity, work-life balance, and team collaboration while working from home.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3973.jpg",              imageAlt: "Remote work setup",              authorName: "Jessica Martinez",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              date: "05 Jan 2025"
            },
            {
              id: "6",              category: "Trends",              title: "2025 Tech Trends: What's Next",              excerpt: "Analysis of emerging technologies and trends that will shape the digital landscape in 2025 and beyond.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-129.jpg",              imageAlt: "Technology trends",              authorName: "Alex Thompson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              date: "02 Jan 2025"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About BlogHub"
          description="BlogHub is your premier destination for thoughtful, in-depth articles on technology, design, and innovation. We bring together industry experts, experienced writers, and creative thinkers to deliver content that educates, inspires, and drives meaningful conversations."
          tag="Our Story"
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg"
          imageAlt="About BlogHub team"
          buttons={[
            { text: "Read Our Articles", href: "blog" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated"
          description="Subscribe to our newsletter and get the latest articles, insights, and exclusive content delivered directly to your inbox every week."
          tagIcon={Mail}
          background={{
            variant: "sparkles-gradient"
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, ever."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/abstract-blue-wave-banner-template_1055-10099.jpg"
          imageAlt="Footer background image"
          logoText="BlogHub"
          copyrightText="© 2025 BlogHub. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Articles", href: "blog" },
                { label: "Categories", href: "categories" },
                { label: "Newsletter", href: "contact" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Careers", href: "#careers" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "blog" },
                { label: "Guides", href: "#guides" },
                { label: "Privacy Policy", href: "#privacy" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}