"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Crown, Sparkles, Star, Zap } from "lucide-react";

export default function CryptoLearnPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="large"
      background="floatingGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="CryptoLearn"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Master Cryptocurrency Trading with Expert Guidance"
          description="Unlock the secrets of blockchain technology and crypto trading. Learn from industry experts in our comprehensive online courses designed for beginners to advanced traders."
          tag="Crypto Education"
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Start Learning", href: "pricing" },
            { text: "View Courses", href: "features" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/bitcoin-financial-technology-with-businesswoman-using-laptop-background_53876-104209.jpg", imageAlt: "Cryptocurrency trading interface" },
            { imageSrc: "http://img.b2bpic.net/free-photo/indian-bitcoin-trader-checking-stock-trading-data-analysis-concept-working-office-with-financial-graph-computer-monitors_231208-3645.jpg", imageAlt: "Online cryptocurrency learning" },
            { imageSrc: "http://img.b2bpic.net/free-vector/glowing-neon-style-bitcoin-background-with-circuit-lines_1017-33585.jpg", imageAlt: "Bitcoin blockchain network" },
            { imageSrc: "http://img.b2bpic.net/free-vector/abstract-realistic-technology-particle-background_23-2148416026.jpg", imageAlt: "Ethereum digital currency" },
            { imageSrc: "http://img.b2bpic.net/free-photo/candlestick-chart-pc-monitor-home-office-desk_482257-122988.jpg", imageAlt: "Crypto portfolio management" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Learn cryptocurrency from" },
            { type: "text", content: "industry experts with proven track records." }
          ]}
          buttons={[
            { text: "Explore Courses", href: "features" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Why Choose Our Crypto Classes"
          description="Comprehensive education with practical trading strategies, live sessions, and community support."
          tag="Features"
          tagIcon={Star}
          tagAnimation="slide-up"
          features={[
            {
              title: "Advanced Trading Strategies",              description: "Learn proven techniques from experienced traders. Master technical analysis, risk management, and portfolio optimization.",              imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-bright-candlesticks-trend-line-night-trading_169016-69639.jpg",              imageAlt: "Advanced trading dashboard"
            },
            {
              title: "Security & Safety First",              description: "Understand blockchain security, wallet management, and best practices to protect your digital assets.",              imageSrc: "http://img.b2bpic.net/free-vector/dark-blue-background-with-security-padlock_23-2147631510.jpg",              imageAlt: "Security protection"
            },
            {
              title: "Active Community",              description: "Join a vibrant community of crypto enthusiasts. Share insights, ask questions, and grow together.",              imageSrc: "http://img.b2bpic.net/free-photo/business-executives-with-hand-stacked_1170-1782.jpg",              imageAlt: "Community collaboration"
            },
            {
              title: "24/7 Expert Support",              description: "Get help whenever you need it. Our dedicated support team is available around the clock to assist.",              imageSrc: "http://img.b2bpic.net/free-photo/sales-assistant-being-employed-customer-care-support-job-working-telemarketing-call-center-helpdesk-female-receptionist-with-helpline-service-helping-clients-remote-communication_482257-43021.jpg",              imageAlt: "Customer support services"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Learning Path"
          description="Select the perfect plan to start your crypto education journey."
          tag="Pricing"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          plans={[
            {
              id: "beginner",              badge: "Popular",              badgeIcon: Sparkles,
              price: "$29/month",              subtitle: "Perfect for newcomers",              buttons: [
                { text: "Get Started", href: "contact" }
              ],
              features: [
                "5 beginner courses",                "Weekly live sessions",                "Community forum access",                "Email support",                "Certificate of completion"
              ]
            },
            {
              id: "pro",              badge: "Best Value",              badgeIcon: Zap,
              price: "$79/month",              subtitle: "For active traders",              buttons: [
                { text: "Start Pro", href: "contact" }
              ],
              features: [
                "20+ advanced courses",                "Daily live trading sessions",                "1-on-1 mentoring",                "Priority support",                "Trading signals access",                "Advanced analytics tools"
              ]
            },
            {
              id: "elite",              badge: "Premium",              badgeIcon: Crown,
              price: "$199/month",              subtitle: "For serious investors",              buttons: [
                { text: "Become Elite", href: "contact" }
              ],
              features: [
                "All courses + exclusive",                "Personal crypto coach",                "Private trading room",                "VIP 24/7 support",                "Custom portfolio analysis",                "Early access to new content",                "Networking events"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Student Success Stories"
          description="See how our students transformed their crypto trading skills and achieved financial goals."
          tag="Testimonials"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Alex Rivera",              handle: "@alexcrypto_trader",              testimonial: "These courses transformed my understanding of blockchain. I went from zero to managing my own portfolio confidently!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "Alex Rivera"
            },
            {
              id: "2",              name: "Sarah Chen",              handle: "@sarah_fintech",              testimonial: "The mentoring program is incredible. My mentor's guidance helped me double my trading returns in just 3 months.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "Marcus Johnson",              handle: "@marcus_blockchain",              testimonial: "Best investment in my education. The live sessions and community support made learning fun and practical.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",              imageAlt: "Marcus Johnson"
            },
            {
              id: "4",              name: "Emma Williams",              handle: "@emma_web3",              testimonial: "From complete beginner to profitable trader in 6 months. The structured curriculum is world-class!",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4",              imageAlt: "Emma Williams"
            },
            {
              id: "5",              name: "David Kumar",              handle: "@david_crypto_insights",              testimonial: "The security lessons alone saved me from making critical mistakes. Highly recommend to anyone serious about crypto.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=5",              imageAlt: "David Kumar"
            },
            {
              id: "6",              name: "Jessica Martinez",              handle: "@jess_trading_daily",              testimonial: "The analytics tools provided access helped me identify winning trades. This is premium education at its finest.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=6",              imageAlt: "Jessica Martinez"
            }
          ]}
          animationType="slide-up"
          speed={40}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Common Questions Answered"
          sideDescription="Everything you need to know about our crypto education platform."
          faqs={[
            {
              id: "1",              title: "Do I need prior crypto experience?",              content: "No! Our courses start from absolute basics. We guide you through blockchain fundamentals, how cryptocurrencies work, and gradually progress to advanced trading strategies."
            },
            {
              id: "2",              title: "Are the courses recorded or live?",              content: "Both! We offer recorded courses for flexible learning plus live interactive sessions where you can ask questions directly to our experts. This ensures you learn at your pace while staying connected."
            },
            {
              id: "3",              title: "What trading platforms do you cover?",              content: "We cover all major platforms including Binance, Coinbase, Kraken, and more. Our instructors teach platform-agnostic strategies so you can apply knowledge anywhere."
            },
            {
              id: "4",              title: "Is my investment secure?",              content: "We dedicate entire modules to security best practices, wallet safety, and protecting your assets. You'll learn hardware wallets, cold storage, and how to avoid common scams."
            },
            {
              id: "5",              title: "Can I get refund if unsatisfied?",              content: "Absolutely. We offer a 30-day money-back guarantee. If you're not satisfied with your learning experience, you get a full refund, no questions asked."
            },
            {
              id: "6",              title: "What support is available?",              content: "All plans include community forum access. Pro and Elite members get email and chat support. Elite members enjoy 24/7 priority support plus 1-on-1 mentoring sessions."
            }
          ]}
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your crypto learning journey? Join thousands of students who've transformed their financial future through our expert-led education."
          animationType="entrance-slide"
          buttons={[
            { text: "Enroll Now", href: "pricing" },
            { text: "Learn More", href: "features" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

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