"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { BookOpen, Flame, Palette, PenTool, Users, HelpCircle, Mail, Zap, Headphones } from "lucide-react";

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Global Stories"
          bottomRightText="hello@bloghub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Discover Stories Worth Reading"
          description="Explore insightful articles covering technology, design, lifestyle, and business. Join our community of readers and writers shaping conversations that matter."
          tag="Latest Updates"
          tagIcon={BookOpen}
          buttons={[
            { text: "Browse Articles", href: "#blog" },
            { text: "Subscribe Now", href: "#newsletter" }
          ]}
          background={{ variant: "plain" }}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              imageAlt: "Blog homepage hero"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-photo/workspace-with-office-supplies_140725-23238.jpg",              imageAlt: "Technology articles"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/traveling-items-arrangement-top-view_23-2148909612.jpg",              imageAlt: "Design insights"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/keyboard-spiral-notepad-coffee-cup-eyeglasses-pen-wooden-desk_23-2148042064.jpg",              imageAlt: "Lifestyle content"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/from-notebook-glasses-near-laptop_23-2147768820.jpg",              imageAlt: "Business articles"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/desk-with-work-elements_1150-117.jpg",              imageAlt: "Marketing insights"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="featured" data-section="featured">
        <FeatureHoverPattern
          title="What's Trending"
          description="Our most-read articles this week curated for your interests"
          tag="Popular Now"
          tagIcon={Flame}
          features={[
            {
              icon: Zap,
              title: "AI Transforming Industries",              description: "Explore how artificial intelligence is reshaping business operations and creating new opportunities for growth and innovation across sectors."
            },
            {
              icon: Palette,
              title: "Design Trends 2025",              description: "Discover the latest design movements, color palettes, and user experience innovations defining contemporary digital aesthetics this year."
            },
            {
              icon: Headphones,
              title: "The Podcast Revolution",              description: "Learn how audio content is becoming the dominant medium for storytelling, news, and community building in the modern media landscape."
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Read All Articles", href: "#blog" }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          title="Latest Articles"
          description="Fresh insights and stories published regularly for our engaged readers"
          tag="Blog"
          tagIcon={PenTool}
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of Web Development",              excerpt: "Exploring emerging technologies and frameworks that are reshaping how we build web applications for the next generation of users.",              imageSrc: "https://img.b2bpic.net/free-photo/workspace-with-office-supplies_140725-23238.jpg",              imageAlt: "Web development future",              authorName: "Alex Johnson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: "Design",              title: "Minimalism in Modern UI Design",              excerpt: "How less is more: A comprehensive guide to creating elegant, functional interfaces through the principles of minimalist design.",              imageSrc: "https://img.b2bpic.net/free-photo/traveling-items-arrangement-top-view_23-2148909612.jpg",              imageAlt: "Minimalist design",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: "Lifestyle",              title: "Digital Wellness Guide",              excerpt: "Master the art of balancing your digital life with practical tips, techniques, and strategies for sustainable online habits.",              imageSrc: "https://img.b2bpic.net/free-photo/keyboard-spiral-notepad-coffee-cup-eyeglasses-pen-wooden-desk_23-2148042064.jpg",              imageAlt: "Digital wellness",              authorName: "Michael Ross",              authorAvatar: "https://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: "Business",              title: "Scaling Your Startup Successfully",              excerpt: "Essential strategies for growing your business sustainably, managing resources effectively, and building a strong organizational culture.",              imageSrc: "https://img.b2bpic.net/free-photo/from-notebook-glasses-near-laptop_23-2147768820.jpg",              imageAlt: "Startup growth",              authorName: "Emma Wilson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5360.jpg",              date: "8 Jan 2025"
            },
            {
              id: "5",              category: "Marketing",              title: "Content Marketing That Converts",              excerpt: "Proven techniques for creating compelling content that resonates with your audience and drives meaningful business results.",              imageSrc: "https://img.b2bpic.net/free-photo/desk-with-work-elements_1150-117.jpg",              imageAlt: "Content marketing",              authorName: "Alex Johnson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",              date: "5 Jan 2025"
            },
            {
              id: "6",              category: "Travel",              title: "Remote Work Around the World",              excerpt: "Discover how to travel while maintaining productivity, finding inspiration in new locations, and building a global perspective.",              imageSrc: "https://img.b2bpic.net/free-photo/topview-workplace-with-laptop-coffee-wooden-background_23-2148205621.jpg",              imageAlt: "Remote work travel",              authorName: "Sarah Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "1 Jan 2025"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
          uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardSix
          title="What Our Readers Say"
          description="Hear from our community members about how our content has impacted their professional and personal growth"
          tag="Community"
          tagIcon={Users}
          testimonials={[
            {
              id: "1",              name: "Jessica Martinez",              handle: "@jmartinez_writes",              testimonial: "BlogHub has become my go-to source for staying updated on industry trends. The writing quality is exceptional and truly thought-provoking.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",              imageAlt: "Jessica Martinez"
            },
            {
              id: "2",              name: "David Lee",              handle: "@davidlee.design",              testimonial: "The design articles here have directly influenced my work. Fresh perspectives and actionable insights every single week. Highly recommend!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg",              imageAlt: "David Lee"
            },
            {
              id: "3",              name: "Emma Thompson",              handle: "@emmathompson",              testimonial: "I've been reading for three months and already applied concepts from five different articles. This platform is invaluable for continuous learning.",              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Emma Thompson"
            },
            {
              id: "4",              name: "Marcus Johnson",              handle: "@marcus.dev",              testimonial: "The tech articles are incredibly detailed and well-researched. I appreciate the depth of analysis that goes beyond surface-level coverage.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5360.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "5",              name: "Lisa Park",              handle: "@lisa.entrepreneur",              testimonial: "Starting my business was daunting until I found these business strategy articles. Clear, practical, and genuinely helpful guidance throughout.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",              imageAlt: "Lisa Park"
            },
            {
              id: "6",              name: "James Wu",              handle: "@jameswu.marketing",              testimonial: "The marketing insights have completely transformed my content strategy. ROI improvement has been remarkable. Best resource I've discovered.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-hispanic-female-executive-wearing-eyeglasses-standing-studio_662251-664.jpg",              imageAlt: "James Wu"
            }
          ]}
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground="invertDefault"
          speed={40}
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardFourteen
          title="BlogHub is trusted by thousands of readers and writers worldwide who depend on quality content daily."
          tag="Our Impact"
          metrics={[
            {
              id: "1",              value: "50K+",              description: "Active monthly readers discovering new perspectives and professional insights"
            },
            {
              id: "2",              value: "200+",              description: "Expert authors publishing original research and thoughtful analysis regularly"
            },
            {
              id: "3",              value: "2.5M",              description: "Total articles read and shared across our global community platform"
            },
            {
              id: "4",              value: "98%",              description: "Reader satisfaction rate with consistent quality and relevant content delivery"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about BlogHub, our content, and how to make the most of your reading experience"
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          mediaPosition="left"
          imageSrc="https://img.b2bpic.net/free-photo/early-mornings-office_1122-2727.jpg"
          imageAlt="FAQ section"
          faqs={[
            {
              id: "1",              title: "How often is new content published?",              content: "We publish new articles three to four times per week across all categories including technology, design, lifestyle, business, and travel. Each piece is carefully curated and fact-checked."
            },
            {
              id: "2",              title: "Can I contribute as a writer?",              content: "Absolutely! We welcome submissions from experienced writers and subject matter experts. Visit our writers program page to learn about requirements and submit your pitch for review."
            },
            {
              id: "3",              title: "Is the newsletter free to subscribe?",              content: "Yes, our weekly newsletter is completely free. You'll receive curated articles, exclusive insights, and community announcements delivered directly to your inbox every Sunday."
            },
            {
              id: "4",              title: "Can I save articles for later reading?",              content: "Yes, create a free account to save articles to your personal reading list, organize by category, and access them anytime from any device."
            },
            {
              id: "5",              title: "How do I search for specific topics?",              content: "Use our search bar at the top of the site or browse by category from the navigation menu. You can also filter by author, publication date, or reading time."
            },
            {
              id: "6",              title: "Is there a membership program?",              content: "We offer a premium membership with benefits including ad-free reading, exclusive member-only articles, early access to content, and special discounts on events."
            }
          ]}
          animationType="smooth"
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCTA
          tag="Stay Connected"
          tagIcon={Mail}
          title="Get Weekly Insights Delivered"
          description="Subscribe to our newsletter and receive hand-picked articles, exclusive stories, and community updates every week. Join thousands of curious minds expanding their knowledge."
          buttons={[
            { text: "Subscribe Now", href: "mailto:subscribe@bloghub.com" },
            { text: "Learn More", href: "#features" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="BlogHub"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Articles", href: "#blog" },
                { label: "Categories", href: "#categories" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#about" },
                { label: "Writers", href: "#writers" },
                { label: "Subscribe", href: "#newsletter" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "#contact" },
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com/bloghub" },
                { label: "LinkedIn", href: "https://linkedin.com/company/bloghub" },
                { label: "Instagram", href: "https://instagram.com/bloghub" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}