"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Mail } from "lucide-react";

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="largeSmall"
      background="aurora"
      cardStyle="elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "blog" },
            { name: "Subscribe", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="BlogHub"
          description="Discover insightful articles on design, technology, and digital innovation."
          buttons={[
            { text: "Explore Articles", href: "blog" },
            { text: "Subscribe Now", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/topview-working-hand_1421-224.jpg"
          imageAlt="Blog workspace with keyboard and pen"
          showDimOverlay={true}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardTwo
          title="Latest Articles"
          description="Stay informed with our curated collection of insights and stories."
          tag="Blog"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: ["Design", "Web"],
              title: "The Future of Web Design in 2025",              excerpt: "Explore emerging design trends and technologies that are shaping the future of web experiences.",              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: "Web design concept",              authorName: "Sarah Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: ["Technology", "Startup"],
              title: "Building Scalable Tech Solutions for Startups",              excerpt: "Learn how to architect and build technology solutions that grow with your business.",              imageSrc: "https://img.b2bpic.net/free-photo/early-mornings-office_1122-2727.jpg",              imageAlt: "Startup technology stack",              authorName: "Marcus Johnson",              authorAvatar: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: ["Marketing", "Strategy"],
              title: "Digital Marketing Strategies That Drive Growth",              excerpt: "Discover proven strategies to amplify your online presence and reach your target audience.",              imageSrc: "https://img.b2bpic.net/free-photo/faceless-person-typing-keyboard-near-stationery-coffee-cup-headphones_23-2148128426.jpg",              imageAlt: "Marketing analytics dashboard",              authorName: "Emma Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: ["Writing", "Content"],
              title: "Mastering Content Creation for Your Audience",              excerpt: "Essential tips and techniques for creating compelling content that resonates with readers.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1112-286.jpg",              imageAlt: "Content writer at desk",              authorName: "James Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg",              date: "08 Jan 2025"
            },
            {
              id: "5",              category: ["UX", "Design"],
              title: "User Experience Design: Creating Intuitive Interfaces",              excerpt: "Best practices for designing user experiences that are both beautiful and functional.",              imageSrc: "https://img.b2bpic.net/free-photo/hands-typing-keyboard-holding-coffee_24837-80.jpg",              imageAlt: "UX design mockup",              authorName: "Lisa Wang",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",              date: "05 Jan 2025"
            },
            {
              id: "6",              category: ["SEO", "Analytics"],
              title: "SEO Optimization: Getting Found in 2025",              excerpt: "Modern SEO strategies to improve your search rankings and organic traffic.",              imageSrc: "https://img.b2bpic.net/free-photo/hands-unrecognizable-young-woman-using-laptop-cafe_1098-20155.jpg",              imageAlt: "SEO analytics report",              authorName: "David Park",              authorAvatar: "https://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg",              date: "02 Jan 2025"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated with Our Latest Insights"
          description="Join our community of readers and get the latest articles delivered directly to your inbox every week."
          tagIcon={Mail}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/working-office_1150-112.jpg"
          imageAlt="Newsletter signup illustration"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="BlogHub"
          columns={[
            {
              title: "Content",              items: [
                { label: "Latest Articles", href: "#blog" },
                { label: "Categories", href: "#blog" },
                { label: "Archives", href: "#blog" },
                { label: "Search", href: "#blog" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Newsletter", href: "#contact" },
                { label: "Contact Us", href: "#contact" },
                { label: "Contribute", href: "#blog" },
                { label: "Feedback", href: "#contact" }
              ]
            },
            {
              title: "About",              items: [
                { label: "About BlogHub", href: "#hero" },
                { label: "Our Mission", href: "#hero" },
                { label: "Team", href: "#hero" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" }
              ]
            }
          ]}
          copyrightText="© 2025 BlogHub. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}