"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, BookOpen, Info, Star, HelpCircle, Mail, Home, Search, Bookmark, FileText, Lightbulb, TrendingUp } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="large"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="BlogHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "blog" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Subscribe", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Discover Stories That Inspire"
          description="Explore expert insights, creative ideas, and actionable advice across technology, design, business, and lifestyle."
          tag="Your Source for Great Content"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Reading", href: "#blog" },
            { text: "Browse Categories", href: "#blog" }
          ]}
          background={{ variant: "aurora" }}
          dashboard={{
            title: "Popular This Week",            logoIcon: BookOpen,
            imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",            imageAlt: "Blog hero image",            buttons: [
              { text: "Latest", href: "#" },
              { text: "Trending", href: "#" }
            ],
            sidebarItems: [
              { icon: Home, active: true },
              { icon: Search },
              { icon: Bookmark }
            ],
            stats: [
              { title: "Articles", values: [156, 189, 215], description: "Published this year" },
              { title: "Readers", values: [2400, 3100, 4200], valueSuffix: "K", description: "Active community" },
              { title: "Topics", values: [12, 15, 18], description: "Content categories" }
            ],
            chartTitle: "Article Views",            chartData: [
              { value: 65 },
              { value: 45 },
              { value: 80 },
              { value: 55 },
              { value: 90 }
            ],
            listTitle: "Recent Posts",            listItems: [
              { icon: FileText, title: "AI Trends 2025", status: "New" },
              { icon: Lightbulb, title: "Design Systems", status: "Popular" },
              { icon: TrendingUp, title: "Growth Strategies", status: "Trending" }
            ],
            searchPlaceholder: "Search articles..."
          }}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          title="Latest Articles"
          description="Stay updated with our most recent blog posts covering industry insights and expert perspectives"
          tag="Blog"
          tagIcon={BookOpen}
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of AI in Content Creation",              excerpt: "Explore how artificial intelligence is transforming the way we create, distribute, and consume digital content.",              imageSrc: "https://img.b2bpic.net/free-photo/fingers-opening-future_1134-120.jpg",              imageAlt: "AI technology article",              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: "Design",              title: "Principles of Modern Web Design",              excerpt: "Master the essential design principles that make websites both beautiful and functional.",              imageSrc: "https://img.b2bpic.net/free-photo/unrecognizable-colleagues-standing-table-looking-design-projects_1098-20475.jpg",              imageAlt: "Web design principles",              authorName: "Marcus Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: "Business",              title: "Scaling Your Startup: A Practical Guide",              excerpt: "Learn proven strategies for growing your startup from zero to sustainable growth.",              imageSrc: "https://img.b2bpic.net/free-photo/start-up-business-goals-strategy_53876-124798.jpg",              imageAlt: "Startup scaling guide",              authorName: "Emily Watson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: "Lifestyle",              title: "Mindfulness in the Digital Age",              excerpt: "Discover practical techniques for maintaining mental clarity and focus in our hyperconnected world.",              imageSrc: "https://img.b2bpic.net/free-photo/senior-couple-is-doing-yoga-outdoors-stretching-park-sunrise-brunette-white-t-shirt_1157-39675.jpg",              imageAlt: "Mindfulness and wellness",              authorName: "David Park",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "8 Jan 2025"
            },
            {
              id: "5",              category: "Marketing",              title: "Data-Driven Marketing Strategies",              excerpt: "Leverage analytics and data insights to create marketing campaigns that actually convert.",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-people-working-with-laptop_23-2149636255.jpg",              imageAlt: "Marketing analytics",              authorName: "Lisa Thompson",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              date: "5 Jan 2025"
            },
            {
              id: "6",              category: "Productivity",              title: "Tools and Workflows for Maximum Efficiency",              excerpt: "Optimize your workflow with the best productivity tools and proven methodologies.",              imageSrc: "https://img.b2bpic.net/free-vector/modern-productivity-concept-with-flat-design_23-2147964653.jpg",              imageAlt: "Productivity tools",              authorName: "James Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              date: "3 Jan 2025"
            }
          ]}
          buttons={[{ text: "View All Articles", href: "#" }]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About Our Platform"
          tagIcon={Info}
          title="Empowering Writers and Readers"
          description="BlogHub is a community-driven platform dedicated to sharing knowledge, insights, and stories that matter. We believe in the power of quality content to educate, inspire, and transform ideas into action."
          metrics={[
            { value: "500K+", title: "Monthly Readers" },
            { value: "1200+", title: "Contributing Authors" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg"
          imageAlt="BlogHub community"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Readers Say"
          description="Trusted by thousands of readers and content creators worldwide"
          tag="Testimonials"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              name: "Alexandra Morgan",              handle: "Content Strategist",              testimonial: "BlogHub transformed how I discover industry insights. The quality of articles is consistently exceptional and the community is incredibly supportive.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              imageAlt: "Alexandra Morgan"
            },
            {
              id: "2",              name: "Jordan Lee",              handle: "@jordanlee",              testimonial: "As a new writer, finding a platform that values quality over quantity was refreshing. BlogHub gave my work the right audience.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg",              imageAlt: "Jordan Lee"
            },
            {
              id: "3",              name: "Priya Patel",              handle: "Tech Enthusiast",              testimonial: "I visit BlogHub daily. The articles are well-researched, insightful, and always spark important conversations in my teams.",              imageSrc: "https://img.b2bpic.net/free-photo/blonde-businesswoman-portrait-with-copy-space_1194-633470.jpg",              imageAlt: "Priya Patel"
            },
            {
              id: "4",              name: "Michael Chen",              handle: "@mchen_writes",              testimonial: "The platform's editorial quality is unmatched. Every article I read makes me think differently about my work and industry.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "5",              name: "Sophie Laurent",              handle: "Design Director",              testimonial: "BlogHub's design content helped us make better decisions. The writers truly understand the craft and share that knowledge generously.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5360.jpg",              imageAlt: "Sophie Laurent"
            },
            {
              id: "6",              name: "David Kumar",              handle: "@davidkumar",              testimonial: "Finally, a blog platform that respects readers' intelligence. Well-written, thoughtful content that actually provides value.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg",              imageAlt: "David Kumar"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          speed={40}
          topMarqueeDirection="left"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about BlogHub, our content, and how to get the most from our platform"
          tag="Help & Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How do I submit my own article?",              content: "We welcome submissions from qualified writers. Visit our <strong>Contribute</strong> page, fill out the submission form with your article details, and our editorial team will review it within 2-3 business days. We look for original, well-researched content that aligns with our platform values."
            },
            {
              id: "2",              title: "Is there a membership fee?",              content: "BlogHub offers both free and premium reading options. Our free tier gives you access to most articles. Premium membership unlocks exclusive content, ad-free reading, and early access to new articles. Premium starts at $9.99 per month or $79 per year."
            },
            {
              id: "3",              title: "How often is new content published?",              content: "We publish new articles daily across all our categories. You can expect 3-5 new pieces each day covering technology, design, business, marketing, lifestyle, and productivity topics. Subscribe to our newsletter to never miss an article."
            },
            {
              id: "4",              title: "Can I save articles for later?",              content: "Yes! Premium members can save articles to their personal library for offline reading. Free members can bookmark articles using their browser's built-in tools. All saved articles sync across devices when logged into your account."
            },
            {
              id: "5",              title: "How can I provide feedback or report issues?",              content: "We value your feedback! Use the feedback form at the bottom of any article, or email us at support@bloghub.com. For technical issues, contact our support team directly. We typically respond within 24 hours."
            },
            {
              id: "6",              title: "Does BlogHub offer content in other languages?",              content: "Currently, BlogHub publishes in English, with Spanish and French translations launching soon. We're expanding our language offerings based on community demand. Vote on your preferred language in your account settings to help us prioritize."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Connected"
          title="Get Our Best Articles in Your Inbox"
          description="Subscribe to our weekly newsletter and never miss the stories that matter. Curated insights delivered directly to you."
          tagIcon={Mail}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. Check out our privacy policy for how we handle your data."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="BlogHub"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}