"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Crown, HelpCircle, Heart, Linkedin, Mail, Sparkles, Star, Twitter, Zap } from "lucide-react";

export default function NewsletterPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="NewsHub"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Articles", id: "blog" },
            { name: "Plans", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Subscribe", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup 
          title="Stay Connected with Premium Insights"
          description="Discover curated stories, industry trends, and exclusive content delivered straight to your inbox every week. Join thousands of engaged readers building their knowledge."
          background={{ variant: "sparkles-gradient" }}
          tag="Weekly Newsletter"
          tagIcon={Sparkles}
          inputPlaceholder="Enter your email address"
          buttonText="Get Early Access"
          onSubmit={(email) => console.log('Email:', email)}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout 
          title="Why NewsHub"
          description="We believe in the power of quality information to transform perspectives and fuel growth. Our platform brings together thoughtful analysis, timely insights, and stories that matter."
          tabs={[
            {
              id: "quality",              label: "Curated Quality",              description: "Every article is carefully selected by our editorial team to ensure you receive only the most relevant and insightful content that truly matters for your growth."
            },
            {
              id: "community",              label: "Engaged Community",              description: "Join a thriving community of readers, thinkers, and innovators who discuss ideas, share perspectives, and build meaningful connections around shared interests."
            },
            {
              id: "exclusive",              label: "Exclusive Access",              description: "Premium subscribers unlock in-depth analysis, early article access, member-only webinars, and direct communication with our writing team and expert contributors."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/man-wheelchair-having-office-job_23-2149571066.jpg"
          imageAlt="NewsHub team collaborating"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="blog" data-section="blog">
        <BlogCardThree 
          title="Featured Articles"
          description="Explore our latest stories and insights handpicked for you"
          tag="Latest"
          tagIcon={Zap}
          blogs={[
            {
              id: "1",              category: "Technology",              title: "The Future of AI in Content Creation",              excerpt: "Exploring how artificial intelligence is reshaping the way we discover and consume information online.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-129.jpg",              imageAlt: "AI and content creation",              authorName: "Sarah Chen",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 15, 2025"
            },
            {
              id: "2",              category: "Marketing",              title: "5 Email Strategies That Convert",              excerpt: "Learn proven tactics to improve engagement and grow your subscriber base with effective email marketing.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-with-glasses-cafe_273609-3980.jpg",              imageAlt: "Email marketing strategies",              authorName: "Marcus Williams",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 12, 2025"
            },
            {
              id: "3",              category: "Insights",              title: "Newsletter Trends: What Works in 2025",              excerpt: "An in-depth analysis of the latest trends shaping the newsletter landscape and subscriber expectations.",              imageSrc: "https://img.b2bpic.net/free-photo/working-office_1150-120.jpg",              imageAlt: "2025 newsletter trends",              authorName: "Emma Rodriguez",              authorAvatar: "/placeholders/placeholder1.webp",              date: "Jan 10, 2025"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwo 
          title="Loved by Subscribers"
          description="See what our community has to say about their experience"
          tag="Reviews"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",              name: "Jessica Park",              role: "Content Strategist",              testimonial: "NewsHub transformed how I stay informed. The curated content saves me hours each week while keeping me ahead of industry trends.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg",              imageAlt: "Jessica Park"
            },
            {
              id: "2",              name: "Michael Torres",              role: "Product Manager",              testimonial: "The quality of articles is exceptional. I've discovered insights and perspectives I wouldn't have found anywhere else. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",              imageAlt: "Michael Torres"
            },
            {
              id: "3",              name: "Amanda Liu",              role: "Marketing Director",              testimonial: "Finally a newsletter that respects my time. Smart curation means I get exactly what I need without overwhelming information overload.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-black-t-shirt-isolated-pink-wall_141793-82450.jpg",              imageAlt: "Amanda Liu"
            },
            {
              id: "4",              name: "David Kumar",              role: "Startup Founder",              testimonial: "The community aspect is what sets NewsHub apart. Engaging with other subscribers and experts has been incredibly valuable for my business.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",              imageAlt: "David Kumar"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight 
          title="Choose Your Plan"
          description="Select the perfect subscription to match your reading habits and interests"
          tag="Pricing"
          tagIcon={Zap}
          plans={[
            {
              id: "free",              badge: "Popular",              badgeIcon: Sparkles,
              price: "Free",              subtitle: "Perfect for curious minds",              buttons: [{ text: "Get Started", href: "#" }],
              features: [
                "5 articles per week",                "Email delivery",                "Basic filtering options",                "Community access"
              ]
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Star,
              price: "$12/mo",              subtitle: "For avid readers",              buttons: [{ text: "Subscribe Now", href: "#" }],
              features: [
                "Unlimited articles",                "Priority email delivery",                "Advanced filtering",                "Exclusive webinars",                "Offline reading",                "Ad-free experience"
              ]
            },
            {
              id: "premium",              badge: "Ultimate Access",              badgeIcon: Crown,
              price: "$29/mo",              subtitle: "For industry leaders",              buttons: [{ text: "Go Premium", href: "#" }],
              features: [
                "Everything in Pro",                "1-on-1 curator consultations",                "Custom digest creation",                "Analytics dashboard",                "API access",                "Priority support"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble 
          title="Frequently Asked Questions"
          description="Find answers to common questions about NewsHub subscriptions and features"
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How often do you send newsletters?",              content: "We send our main newsletter every Thursday morning with a curated selection of the week's best articles. Premium subscribers also receive daily briefings and special topic digests."
            },
            {
              id: "2",              title: "Can I cancel my subscription anytime?",              content: "Absolutely! You can cancel your subscription at any time from your account settings. No questions asked, no cancellation fees. Your access continues until the end of your billing period."
            },
            {
              id: "3",              title: "What topics do you cover?",              content: "We cover a wide range of topics including technology, business, marketing, design, and personal development. You can customize your interests in your preferences to receive content most relevant to you."
            },
            {
              id: "4",              title: "Is there a free trial for Pro?",              content: "Yes! We offer a 14-day free trial of our Pro plan. No credit card required to start. Experience all premium features and decide if it's right for you."
            },
            {
              id: "5",              title: "Can I share my subscription?",              content: "Subscriptions are for individual use. However, we offer family plans for up to 4 people at a discounted rate. Contact our support team for more information."
            },
            {
              id: "6",              title: "How do you curate articles?",              content: "Our team of experienced editors manually reviews hundreds of sources daily. We apply strict quality standards to ensure every article adds value and matches our high editorial standards."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA 
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Transform Your Reading?"
          description="Join thousands of subscribers who've revolutionized how they stay informed. Start your journey today and never miss a story that matters."
          buttons={[
            { text: "Subscribe Free", href: "#" },
            { text: "Learn More", href: "#" }
          ]}
          background={{ variant: "radial-gradient" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard 
          logoText="NewsHub"
          copyrightText="© 2025 NewsHub | Thoughtful content, delivered daily"
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/newshub", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/newshub", ariaLabel: "LinkedIn" },
            { icon: Mail, href: "mailto:hello@newshub.com", ariaLabel: "Email" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}