"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { BookOpen, Sparkles } from 'lucide-react';

export default function BlogPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "blog" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Subscribe",            href: "#newsletter"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Welcome to BlogHub"
          description="Discover inspiring articles, insights, and stories from our community of writers and creators. Stay informed with the latest trends and expert perspectives."
          tag="Fresh Content Daily"
          tagIcon={Sparkles}
          buttons={[
            { text: "Explore Articles", href: "#blog" },
            { text: "Subscribe", href: "#newsletter" }
          ]}
          background={{ variant: "aurora" }}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/overhead-view-businesswoman-working-computer-office-place-your-text-ideal-blog-flat-lay-white-background_639032-1378.jpg",              imageAlt: "Web Design Trends"
            },
            {
              id: "2",              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: "Marketing Strategy"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              imageAlt: "Productivity Tips"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/man-is-using-laptop-books-notebook-top-view_169016-49211.jpg",              imageAlt: "Photography Techniques"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/coworking-space-freelance-elearning-concept-top-view-male-hands-holding-cup-coffee-using_1258-245320.jpg",              imageAlt: "Development Guide"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/hands-writing-notebook_1150-162.jpg",              imageAlt: "Design Principles"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardTwo
          title="Latest Articles"
          description="Dive into our curated collection of articles covering design, technology, marketing, and creativity."
          tag="Blog"
          tagIcon={BookOpen}
          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, AI-driven interfaces, and what's next for the digital landscape.",              imageSrc: "https://img.b2bpic.net/free-photo/overhead-view-businesswoman-working-computer-office-place-your-text-ideal-blog-flat-lay-white-background_639032-1378.jpg",              imageAlt: "Modern web design",              authorName: "Sarah Mitchell",              date: "25 Jan 2025"
            },
            {
              id: "2",              category: ["Marketing", "Strategy"],
              title: "Building a Winning Content Strategy",              excerpt: "Learn how to create compelling content that resonates with your audience and drives engagement.",              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: "Content marketing",              authorName: "James Chen",              date: "23 Jan 2025"
            },
            {
              id: "3",              category: ["Productivity", "Lifestyle"],
              title: "Mastering Remote Work Efficiency",              excerpt: "Discover proven techniques and tools to maximize productivity while working from home.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              imageAlt: "Remote workspace",              authorName: "Emma Rodriguez",              date: "20 Jan 2025"
            },
            {
              id: "4",              category: ["Photography", "Visual"],
              title: "Capturing Light: Photography Masterclass",              excerpt: "Essential techniques and tips for photographers looking to elevate their visual storytelling.",              imageSrc: "https://img.b2bpic.net/free-photo/man-is-using-laptop-books-notebook-top-view_169016-49211.jpg",              imageAlt: "Photography techniques",              authorName: "Michael Torres",              date: "18 Jan 2025"
            },
            {
              id: "5",              category: ["Development", "Code"],
              title: "Next.js 15: What You Need to Know",              excerpt: "A comprehensive guide to the latest features and improvements in Next.js 15.",              imageSrc: "https://img.b2bpic.net/free-photo/coworking-space-freelance-elearning-concept-top-view-male-hands-holding-cup-coffee-using_1258-245320.jpg",              imageAlt: "Programming",              authorName: "David Park",              date: "15 Jan 2025"
            },
            {
              id: "6",              category: ["Design", "UX"],
              title: "Principles of Effective UI Design",              excerpt: "Master the fundamentals of user interface design for better user experiences.",              imageSrc: "https://img.b2bpic.net/free-photo/hands-writing-notebook_1150-162.jpg",              imageAlt: "UI design",              authorName: "Lisa Anderson",              date: "12 Jan 2025"
            }
          ]}
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactText
          text="Subscribe to our newsletter and get the latest articles delivered directly to your inbox every week."
          animationType="entrance-slide"
          buttons={[
            { text: "Sign Up Now", href: "#signup" },
            { text: "Learn More", href: "#about" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about our blog, content, and community."
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "How often do you publish new articles?",              content: "We publish fresh content daily, with curated articles covering design, technology, marketing, and lifestyle topics. Subscribe to get updates delivered to your inbox."
            },
            {
              id: "2",              title: "Can I submit my own articles?",              content: "Absolutely! We welcome contributions from writers and creators. Contact us at submissions@bloghub.com with your article pitch and we'll review it for potential publication."
            },
            {
              id: "3",              title: "Is the newsletter really free?",              content: "Yes, our weekly newsletter is completely free. No hidden fees or premium tiers. Subscribe today and start receiving curated content every week."
            },
            {
              id: "4",              title: "How can I filter articles by category?",              content: "Use our category sidebar on the Articles page to filter content by topic. You can also search for specific keywords to find articles that interest you."
            },
            {
              id: "5",              title: "Do you accept guest posts?",              content: "Yes, we actively seek guest contributions from industry experts and passionate writers. Visit our Guest Post Guidelines page to learn more about submission requirements."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="BlogHub"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "Articles", href: "blog" },
                { label: "Categories", href: "blog" },
                { label: "About", href: "about" }
              ]
            },
            {
              items: [
                { label: "Subscribe", href: "newsletter" },
                { label: "Guest Posts", href: "contact" },
                { label: "Advertise", href: "contact" },
                { label: "Contact Us", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Cookie Settings", href: "#cookies" },
                { label: "Sitemap", href: "#sitemap" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "YouTube", href: "https://youtube.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}