"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="WriteHub"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Articles", id: "articles" },
            { name: "Categories", id: "categories" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Blog Community"
          bottomRightText="hello@writehub.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Welcome to WriteHub"
          description="Discover inspiring stories, in-depth guides, and expert insights on writing, creativity, and digital transformation. Stay updated with fresh content every week."
          background={{ variant: "plain" }}
          kpis={[
            { value: "500+", label: "Articles Published" },
            { value: "150K+", label: "Active Readers" },
            { value: "50+", label: "Expert Writers" }
          ]}
          enableKpiAnimation={true}
          tag="New Content Weekly"
          tagIcon={Sparkles}
          buttons={[
            { text: "Explore Articles", href: "#articles" },
            { text: "Subscribe", href: "#newsletter" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/working-office_1150-120.jpg"
          imageAlt="Blog banner with writing and creative content"
        />
      </div>

      <div id="articles" data-section="articles">
        <BlogCardTwo
          title="Latest Articles"
          description="Explore our most recent posts covering writing tips, industry trends, and creative inspiration"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          carouselMode="buttons"
          blogs={[
            {
              id: "1",              category: ["Writing", "Creativity"],
              title: "The Art of Storytelling: Crafting Narratives That Resonate",              excerpt: "Learn the fundamental techniques that transform ordinary stories into compelling narratives that captivate your audience.",              imageSrc: "https://img.b2bpic.net/free-photo/teamwork-making-online-blog_53876-94868.jpg",              imageAlt: "Storytelling article cover",              authorName: "Sarah Mitchell",              authorAvatar: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              date: "15 Jan 2025"
            },
            {
              id: "2",              category: ["Technology", "Digital"],
              title: "AI and Content Creation: The Future of Writing",              excerpt: "Explore how artificial intelligence is reshaping the landscape of content creation and what it means for writers.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              imageAlt: "AI and technology article",              authorName: "James Chen",              authorAvatar: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              date: "12 Jan 2025"
            },
            {
              id: "3",              category: ["Design", "UX Writing"],
              title: "Microcopy Matters: Writing for User Experience",              excerpt: "Discover how carefully crafted small texts can dramatically improve user experience and conversion rates.",              imageSrc: "https://img.b2bpic.net/free-photo/crop-hands-laptop-keyboard_23-2147710407.jpg",              imageAlt: "UX writing design article",              authorName: "Emma Rodriguez",              authorAvatar: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              date: "10 Jan 2025"
            },
            {
              id: "4",              category: ["Business", "Growth"],
              title: "Content Marketing Strategy: Building Your Audience from Zero",              excerpt: "A comprehensive guide to developing a content strategy that attracts, engages, and converts your target audience.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-photo-girl-studying-with-tablettextbooks-cup-coffee-desk-cozy-home_574295-3876.jpg",              imageAlt: "Content marketing strategy guide",              authorName: "David Park",              authorAvatar: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              date: "8 Jan 2025"
            }
          ]}
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Get Weekly Insights in Your Inbox"
          description="Subscribe to our newsletter and receive curated articles, writing tips, and industry news delivered straight to your inbox every Sunday."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, just quality content."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/still-life-office-desk-mess_23-2150164813.jpg"
          imageAlt="Footer background workspace"
          logoText="WriteHub"
          copyrightText="© 2025 WriteHub. All rights reserved."
          columns={[
            {
              title: "Content",              items: [
                { label: "All Articles", href: "#articles" },
                { label: "Categories", href: "#categories" },
                { label: "Most Popular", href: "#popular" },
                { label: "Archives", href: "#archives" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Writing Guide", href: "#guide" },
                { label: "Best Practices", href: "#practices" },
                { label: "Tools & Resources", href: "#tools" },
                { label: "Community", href: "#community" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}