"use client"

import { BookOpen, Pen, Library, Mail } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="large"
      background="floatingGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="ReadFlow"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "blog" },
            { name: "Newsletter", id: "contact" },
            { name: "About", id: "about" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Discover Insights That Inspire"
          description="Explore thought-provoking articles on technology, design, writing, and digital culture. Stay informed with perspectives from industry experts and creative minds."
          tag="Welcome to ReadFlow"
          tagIcon={BookOpen}
          buttons={[
            { text: "Browse Articles", href: "#blog" },
            { text: "Subscribe", href: "#contact" }
          ]}
          background={{ variant: "radial-gradient" }}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-129.jpg",              imageAlt: "Blog workspace with coffee and notebook"
            },
            {
              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: "AI and technology illustration"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              imageAlt: "Design tools and creative workspace"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-photo/woman-working-laptop-cafe-with-cup-tea-top-view_169016-18858.jpg",              imageAlt: "Writing and storytelling resources"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-113.jpg",              imageAlt: "Web development and coding"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-photo/coworking-space-freelance-elearning-concept-top-view-male-hands-holding-cup-coffee-using_1258-245320.jpg",              imageAlt: "Marketing strategy and growth"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardOne
          title="Latest Articles"
          description="Explore our most recent insights and in-depth guides on technology, design, and digital culture."
          tag="Blog"
          tagIcon={Pen}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of AI in Content Creation",              excerpt: "Exploring how artificial intelligence is transforming the way we write, design, and create digital content.",              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: "AI and technology",              authorName: "Sarah Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: "Design",              title: "Minimalism in Web Design: Less is More",              excerpt: "A deep dive into how minimalist design principles create better user experiences and improved accessibility.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              imageAlt: "Design workspace",              authorName: "James Chen",              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: "12 Jan 2025"
            },
            {
              id: "3",              category: "Writing",              title: "Crafting Compelling Headlines: A Writer's Guide",              excerpt: "Learn the techniques professional writers use to create headlines that capture attention and drive engagement.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-working-laptop-cafe-with-cup-tea-top-view_169016-18858.jpg",              imageAlt: "Writing and storytelling",              authorName: "Emma Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: "Development",              title: "Building Scalable Web Applications with Next.js",              excerpt: "A comprehensive guide to architecting modern web applications that perform at scale with Next.js framework.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-113.jpg",              imageAlt: "Web development",              authorName: "Michael Park",              authorAvatar: "https://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg",              date: "08 Jan 2025"
            },
            {
              id: "5",              category: "Marketing",              title: "Content Marketing Strategies for 2025",              excerpt: "Discover the most effective content marketing approaches to build audience trust and drive business growth.",              imageSrc: "https://img.b2bpic.net/free-photo/coworking-space-freelance-elearning-concept-top-view-male-hands-holding-cup-coffee-using_1258-245320.jpg",              imageAlt: "Marketing strategy",              authorName: "Lisa Anderson",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",              date: "05 Jan 2025"
            },
            {
              id: "6",              category: "Productivity",              title: "Mastering Your Creative Workflow",              excerpt: "Practical tips and tools to optimize your creative process and eliminate distractions for maximum productivity.",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-employee-working-with-her-laptop_23-2147601476.jpg",              imageAlt: "Productivity workflow",              authorName: "David Thompson",              authorAvatar: "https://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg",              date: "02 Jan 2025"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Popular Topics & Categories"
          description="Explore our article categories and find content that matches your interests."
          tag="Content Library"
          tagIcon={Library}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "Technology & Innovation",              content: "Discover articles about AI, web development, emerging tech trends, and digital transformation. Perfect for tech enthusiasts, developers, and innovators."
            },
            {
              id: "2",              title: "Design & Creativity",              content: "Explore design thinking, UI/UX principles, visual design trends, and creative workflows. Ideal for designers and creative professionals."
            },
            {
              id: "3",              title: "Content & Writing",              content: "Master storytelling, copywriting, content strategy, and editorial best practices. Essential reads for writers and content creators."
            },
            {
              id: "4",              title: "Business & Marketing",              content: "Learn marketing strategies, growth hacking, brand building, and business development insights for entrepreneurs and marketers."
            },
            {
              id: "5",              title: "Productivity & Workflow",              content: "Optimize your workflow with guides on time management, collaboration tools, and efficiency best practices."
            },
            {
              id: "6",              title: "How Do I Subscribe?",              content: "Simply scroll to our newsletter section and enter your email address. You'll receive curated articles weekly directly to your inbox. Unsubscribe anytime."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Stay Updated"
          tagIcon={Mail}
          title="Never Miss an Insight"
          description="Join thousands of readers who receive curated articles on technology, design, and creative innovation. Get weekly digests delivered to your inbox."
          buttons={[
            { text: "Subscribe Now", href: "#" },
            { text: "View Archive", href: "#blog" }
          ]}
          background={{ variant: "animated-grid" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="ReadFlow"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "Articles", href: "blog" },
                { label: "Categories", href: "blog" }
              ]
            },
            {
              items: [
                { label: "Subscribe", href: "contact" },
                { label: "Archive", href: "blog" },
                { label: "About Us", href: "about" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "https://example.com/privacy" },
                { label: "Terms of Service", href: "https://example.com/terms" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "RSS Feed", href: "https://example.com/rss" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}