"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Blogify"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Articles", id: "blog" },
            { name: "Categories", id: "blog" },
            { name: "About", id: "about" }
          ]}
          button={{
            text: "Subscribe",            href: "#newsletter"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Discover Insights That Matter"
          description="Explore thoughtfully curated articles on technology, design, business, and everything in between. Stay informed with the latest trends and expert perspectives."
          tag="Featured Stories"
          tagIcon={Sparkles}
          background={{ variant: "plain" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/cropped-man-checking-blueprint-while-having-tea_1098-18847.jpg",              imageAlt: "Featured article hero image"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/pregnant-woman-using-digital-tablet-living-room_107420-12191.jpg",              imageAlt: "Technology and development article"
            }
          ]}
          rating={5}
          ratingText="Trusted by 50k+ readers"
          buttons={[
            { text: "Start Reading", href: "#blog" },
            { text: "Latest Posts", href: "#blog" }
          ]}
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardThree
          title="Latest Articles"
          description="Hand-picked stories from our expert writers covering topics you care about"
          tag="Recent"
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of Web Development: AI-Powered Tools",              excerpt: "Exploring how artificial intelligence is transforming the way we build and deploy web applications.",              imageSrc: "https://img.b2bpic.net/free-photo/pregnant-woman-using-digital-tablet-living-room_107420-12191.jpg",              imageAlt: "Web development with AI",              authorName: "Sarah Chen",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 15, 2025"
            },
            {
              id: "2",              category: "Design",              title: "Minimalism in UI Design: Less is More",              excerpt: "Learn how minimalist design principles can improve user experience and reduce cognitive load.",              imageSrc: "https://img.b2bpic.net/free-photo/hands-with-laptop-wooden-table-coffee-cafe_53876-16124.jpg",              imageAlt: "Minimalist design showcase",              authorName: "Marcus Rivera",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 12, 2025"
            },
            {
              id: "3",              category: "Business",              title: "Scaling Your Startup: Growth Strategies That Work",              excerpt: "Real-world insights from founders who scaled their startups from zero to unicorn status.",              imageSrc: "https://img.b2bpic.net/free-photo/content-woman-relaxing-with-laptop-home_23-2147670438.jpg",              imageAlt: "Startup growth and scaling",              authorName: "Emma Rodriguez",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 10, 2025"
            },
            {
              id: "4",              category: "Productivity",              title: "Deep Work in a Distracted World",              excerpt: "Practical techniques to eliminate distractions and achieve meaningful focus in your work.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-photo-girl-studying-with-tablettextbooks-cup-coffee-desk-cozy-home_574295-3876.jpg",              imageAlt: "Focused work environment",              authorName: "James Park",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 8, 2025"
            },
            {
              id: "5",              category: "Marketing",              title: "Content Marketing Trends 2025",              excerpt: "The latest strategies and trends shaping how brands connect with their audiences online.",              imageSrc: "https://img.b2bpic.net/free-photo/hipster-man-drinking-coffee-while-reading_158595-3727.jpg",              imageAlt: "Digital marketing strategy",              authorName: "Lisa Wong",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 5, 2025"
            },
            {
              id: "6",              category: "AI",              title: "Understanding Large Language Models",              excerpt: "A comprehensive guide to how LLMs work and their impact on modern software development.",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-good-woman-cup-computer-bed_1418-484.jpg",              imageAlt: "AI and machine learning",              authorName: "Dr. Anil Patel",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 1, 2025"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactText
          text="Join thousands of readers getting the best articles delivered straight to your inbox every week. No spam, just great content."
          animationType="entrance-slide"
          buttons={[
            { text: "Subscribe Now", href: "#newsletter-form" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Explore",              items: [
                { label: "All Articles", href: "#blog" },
                { label: "Categories", href: "#blog" },
                { label: "Featured", href: "#blog" },
                { label: "Popular", href: "#blog" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#about" },
                { label: "Careers", href: "#careers" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog Guidelines", href: "#" },
                { label: "Write for Us", href: "#" },
                { label: "Newsletter", href: "#newsletter" },
                { label: "Community", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Cookie Policy", href: "/cookies" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Blogify. All rights reserved."
          bottomRightText="Made with care for readers"
        />
      </div>
    </ThemeProvider>
  );
}