"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Pencil, Mail } from "lucide-react";

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="medium"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <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">
        <HeroOverlay
          title="Welcome to BlogHub"
          description="Discover insightful articles on web design, content strategy, and digital innovation. Stay inspired with weekly updates from industry experts."
          tag="Latest Stories"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/keyboard-spiral-notepad-coffee-cup-eyeglasses-pen-wooden-desk_23-2148042064.jpg"
          imageAlt="Blog workspace with writing desk"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Browse Articles", href: "blog" },
            { text: "Subscribe", href: "contact" }
          ]}
        />
      </div>
      
      <div id="blog" data-section="blog">
        <BlogCardTwo
          title="Latest Articles"
          description="Explore our most recent posts on web design, content marketing, and digital strategies."
          tag="Blog"
          tagIcon={Pencil}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: ["Design", "Web Development"],
              title: "Modern Web Design Principles That Convert",              excerpt: "Learn the key principles of contemporary web design that maximize user engagement and conversion rates. From typography to color psychology, discover what works.",              imageSrc: "https://img.b2bpic.net/free-photo/cup-coffee-near-keyboard_23-2147823720.jpg",              imageAlt: "Modern web design interface",              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: ["Marketing", "Strategy"],
              title: "Content Marketing Strategy for 2025",              excerpt: "Discover the most effective content marketing strategies for the coming year. We break down audience targeting, content calendars, and distribution channels.",              imageSrc: "https://img.b2bpic.net/free-photo/topview-workplace-with-laptop-coffee-wooden-background_23-2148205621.jpg",              imageAlt: "Content strategy planning board",              authorName: "Michael Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: ["SEO", "Analytics"],
              title: "SEO Optimization Guide: Rank Higher in 2025",              excerpt: "Master the fundamentals of search engine optimization. From keyword research to technical SEO, this guide covers everything you need to know to improve rankings.",              imageSrc: "https://img.b2bpic.net/free-photo/cute-desktop-with-office-appliances-keyboard_23-2147830062.jpg",              imageAlt: "SEO analytics dashboard",              authorName: "Emma Davis",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: ["UX Design", "User Research"],
              title: "User Experience Design: Best Practices & Trends",              excerpt: "Explore the latest trends in UX design, from accessibility standards to interactive animations. Learn how to create experiences users love.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              imageAlt: "UX design wireframes and prototypes",              authorName: "James Wilson",              authorAvatar: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              date: "8 Jan 2025"
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Never Miss an Article"
          description="Subscribe to our newsletter and get the latest insights on web design, marketing, and digital strategy delivered to your inbox weekly."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="BlogHub"
          leftLink={{
            text: "Privacy Policy",            href: "#"
          }}
          rightLink={{
            text: "Terms of Service",            href: "#"
          }}
        />
      </div>
    </ThemeProvider>
  );
}