"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { BookOpen, Mail } from "lucide-react";
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "faq" },
            { name: "Newsletter", id: "newsletter" }
          ]}
          button={{
            text: "Subscribe",            href: "newsletter"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Welcome to BlogHub"
          description="Discover insights, strategies, and inspiration across digital marketing, technology, design, and business growth. Join thousands of readers exploring the latest trends and best practices."
          tag="Content Hub"
          tagIcon={BookOpen}
          background={{ variant: "plain" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              imageAlt: "Blog workspace and content creation"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-112.jpg",              imageAlt: "Digital marketing strategies"
            }
          ]}
          rating={5}
          ratingText="Trusted by 50K+ monthly readers"
          buttons={[
            { text: "Start Reading", href: "blog" },
            { text: "Subscribe Now", href: "newsletter" }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardTwo
          title="Latest Articles"
          description="Explore our most recent insights and deep dives into digital strategy, technology trends, and creative solutions for modern businesses."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: ["Digital Marketing", "Strategy"],
              title: "The Future of Content Marketing in 2024",              excerpt: "Discover how AI-powered tools and authentic storytelling are reshaping content strategy. Learn the key trends that will define content marketing this year.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-112.jpg",              imageAlt: "Content marketing strategy visualization",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: ["Technology", "Development"],
              title: "Building Scalable Web Applications",              excerpt: "Explore best practices for architecting web applications that grow with your business. From database optimization to API design patterns.",              imageSrc: "https://img.b2bpic.net/free-photo/person-writing-office_53876-94944.jpg",              imageAlt: "Web development code and architecture",              authorName: "James Morrison",              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: "12 Jan 2025"
            },
            {
              id: "3",              category: ["Design", "UX/UI"],
              title: "Design Systems: Creating Consistency at Scale",              excerpt: "Learn how to build and maintain design systems that empower teams and ensure consistent user experiences across all products.",              imageSrc: "https://img.b2bpic.net/free-photo/digital-laptop-working-camera-concept_53876-30268.jpg",              imageAlt: "Design system components and patterns",              authorName: "Emma Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: ["Productivity", "Tools"],
              title: "Essential Tools for Remote Teams",              excerpt: "A comprehensive guide to tools and workflows that help distributed teams collaborate effectively and maintain productivity.",              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-planning-work_1098-17625.jpg",              imageAlt: "Remote work and collaboration tools",              authorName: "Michael Zhang",              authorAvatar: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              date: "8 Jan 2025"
            }
          ]}
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCTA
          tag="Stay Updated"
          tagIcon={Mail}
          title="Never Miss an Article"
          description="Subscribe to our newsletter and get the latest insights on digital marketing, technology trends, and business growth delivered to your inbox every week."
          buttons={[
            { text: "Subscribe Now" },
            { text: "View Past Issues" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Article Categories & FAQs"
          description="Explore our article categories and find answers to common questions about our content, subscriptions, and platform features."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          mediaPosition="left"
          imageSrc="https://img.b2bpic.net/free-photo/working-office_1150-120.jpg"
          imageAlt="Blog categories and content organization"
          faqs={[
            {
              id: "1",              title: "How often do you publish new articles?",              content: "We publish new articles every Tuesday and Thursday, with occasional bonus content on Saturdays. Subscribe to our newsletter to get notified about new posts automatically."
            },
            {
              id: "2",              title: "Can I access all articles without subscribing?",              content: "Yes! All our articles are freely available to read. However, newsletter subscribers get exclusive early access to premium content, detailed guides, and curated reading lists."
            },
            {
              id: "3",              title: "What are your main content categories?",              content: "Our main categories include Digital Marketing, Technology & Development, Design & UX, Business Strategy, Productivity, and Tools & Resources. You can filter articles by category to find content most relevant to your interests."
            },
            {
              id: "4",              title: "How can I suggest topics for future articles?",              content: "We'd love to hear from you! Visit our contact page or email us directly at suggestions@bloghub.com. We review all suggestions and often feature reader-requested topics in our editorial calendar."
            },
            {
              id: "5",              title: "Do you offer guest posting opportunities?",              content: "Absolutely! We welcome guest contributions from industry experts. Please read our guest post guidelines on our submissions page and send your pitch to contributors@bloghub.com."
            }
          ]}
        />
      </div>


      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwo
            testimonials={[
                {
                    id: "1",
                    name: "Sarah Johnson",
                    role: "Blogger",
                    testimonial: "BlogHub has transformed my blogging journey. The platform is intuitive and the support is amazing!",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Sarah Johnson, Blogger"
                },
                {
                    id: "2",
                    name: "Mike Thompson",
                    role: "Content Creator",
                    testimonial: "I've never seen a platform that makes content creation so easy. BlogHub is a game-changer!",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Mike Thompson, Content Creator"
                },
                {
                    id: "3",
                    name: "Lily White",
                    role: "Freelance Writer",
                    testimonial: "The community on BlogHub is fantastic. It's a great place to connect with other writers and share ideas.",
                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
                    imageAlt: "Lily White, Freelance Writer"
                }
            ]}
            carouselMode="buttons"
            animationType="slide"
            title="What Our Users Say"
            description="Discover why thousands of bloggers and content creators love BlogHub."
            tag="Testimonials"
            buttons={[
                { label: "Read More", href: "#testimonials", dataWebildId: "cta_btn_1" }
            ]}
            textboxLayout="left"
            useInvertedBackground="never"
            ariaLabel="Testimonials Section"
            className="mb-10"
            containerClassName="max-w-6xl mx-auto"
            cardClassName="bg-white rounded-lg shadow-md p-6"
            textBoxTitleClassName="text-3xl font-bold mb-4"
            textBoxDescriptionClassName="text-gray-600 mb-6"
            textBoxTagClassName="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded-full mb-4"
            textBoxButtonContainerClassName="mt-6"
            textBoxButtonClassName="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600"
            textBoxButtonTextClassName="font-semibold"
            imageWrapperClassName="rounded-full overflow-hidden w-16 h-16 mb-4"
            imageClassName="object-cover w-full h-full"
            nameClassName="text-xl font-semibold mb-1"
            roleClassName="text-gray-500"
            testimonialClassName="text-gray-700"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="BlogHub"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}