"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, BookOpen, DollarSign, HelpCircle, Mail, Sparkles, Star, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Courses", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="My Coder"
          bottomLeftText="Learn to Code"
          bottomRightText="hello@mycoder.edu"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Learn to Code, Shape Your Future"
          description="Master web development, mobile apps, and software engineering with expert instructors and hands-on projects"
          tag="Start Your Tech Career"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/side-view-attractive-hispanic-developer-programming-software-using-computer-while-working-from-home_662251-988.jpg"
          imageAlt="Developer coding on laptop"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Explore Courses", href: "features" },
            { text: "Get Started Free", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Why Choose My Coder?"
          description="We're dedicated to transforming aspiring developers into skilled professionals"
          tabs={[
            {
              id: "expert-instructors",              label: "Expert Instructors",              description: "Learn from industry professionals with years of experience at top tech companies"
            },
            {
              id: "hands-on-projects",              label: "Real Projects",              description: "Build portfolio-worthy projects and gain practical experience from day one"
            },
            {
              id: "career-support",              label: "Career Support",              description: "Get job placement assistance, interview prep, and career guidance after graduation"
            },
            {
              id: "community",              label: "Community",              description: "Join a supportive network of learners and stay connected with alumni"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/college-students-different-ethnicities-cramming_23-2149891341.jpg"
          imageAlt="Students learning in coding classroom"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Our Comprehensive Curriculum"
          description="Structured learning paths designed to take you from beginner to professional developer"
          tag="Courses"
          tagIcon={BookOpen}
          imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
          imageAlt="Interactive learning platform"
          mediaPosition="left"
          accordionItems={[
            {
              id: "web-dev",              title: "Web Development Fundamentals",              content: "Master HTML, CSS, JavaScript, and React. Build responsive, modern websites from scratch with our comprehensive web development course covering frontend and backend technologies."
            },
            {
              id: "mobile-dev",              title: "Mobile App Development",              content: "Create powerful mobile applications using React Native and Flutter. Learn iOS and Android development with hands-on projects and real-world scenarios."
            },
            {
              id: "backend-dev",              title: "Backend & Database Design",              content: "Build scalable server-side applications with Node.js, Python, and databases. Master REST APIs, authentication, and cloud deployment practices."
            },
            {
              id: "devops",              title: "DevOps & Deployment",              content: "Learn Docker, Kubernetes, and CI/CD pipelines. Deploy applications to production and manage infrastructure like a professional engineer."
            }
          ]}
          buttons={[{ text: "View All Courses", href: "pricing" }]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Choose Your Learning Path"
          description="Flexible pricing options designed for every learner and budget"
          tag="Pricing"
          tagIcon={DollarSign}
          plans={[
            {
              id: "starter",              badge: "Popular",              badgeIcon: Star,
              price: "$49/month",              subtitle: "Perfect for beginners",              buttons: [{ text: "Get Started", href: "contact" }],
              features: [
                "Access to 5 core courses",                "Interactive coding exercises",                "Community forum access",                "Monthly live Q&A sessions",                "Certificate of completion"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$99/month",              subtitle: "For serious learners",              buttons: [{ text: "Start Learning", href: "contact" }],
              features: [
                "All Starter features",                "Access to 20+ advanced courses",                "One-on-one mentorship",                "Priority support",                "Career guidance sessions",                "Job placement assistance"
              ]
            },
            {
              id: "enterprise",              badge: "Premium",              badgeIcon: Award,
              price: "$199/month",              subtitle: "Maximum acceleration",              buttons: [{ text: "Upgrade Now", href: "contact" }],
              features: [
                "All Professional features",                "Unlimited course access",                "Personalized learning plan",                "Weekly 1:1 coaching calls",                "Internship opportunities",                "Lifetime course updates",                "Priority job matching"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-building-street-with-folded-arms_158595-6645.jpg",              imageAlt: "David Kim"
            }
          ]}
          cardTitle="Over 5,000 graduates have launched successful tech careers with My Coder"
          cardTag="Student Success Stories"
          cardTagIcon={Users}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about learning with My Coder"
          tag="Help & Support"
          tagIcon={HelpCircle}
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="Customer support team"
          mediaPosition="left"
          faqs={[
            {
              id: "1",              title: "Do I need prior coding experience?",              content: "No! Our courses are designed for complete beginners. We start from the fundamentals and progressively advance through practical projects. You only need a computer and determination to learn."
            },
            {
              id: "2",              title: "How long does it take to complete a course?",              content: "Most courses take 3-6 months with 15-20 hours per week commitment. You can learn at your own pace and complete courses faster or slower depending on your schedule."
            },
            {
              id: "3",              title: "Will I get job placement help?",              content: "Yes! Professional and Enterprise plans include career guidance, resume review, interview preparation, and access to our job board with exclusive opportunities from partner companies."
            },
            {
              id: "4",              title: "What if I don't like the course?",              content: "We offer a 30-day money-back guarantee if you're not satisfied. We want you to succeed, so we also provide free course switches if you want to change your learning path."
            },
            {
              id: "5",              title: "Are the certificates recognized by employers?",              content: "Yes! Our certificates are recognized by top tech companies and are highly valued in the industry. Combined with portfolio projects, they significantly boost your hiring prospects."
            },
            {
              id: "6",              title: "Can I access courses on mobile?",              content: "Absolutely. Our platform is fully mobile-responsive, so you can learn on your phone, tablet, or laptop. Download lessons to study offline whenever you want."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          tagIcon={Mail}
          title="Start Your Coding Journey Today"
          description="Join thousands of students learning to code with My Coder. Sign up for our newsletter and get exclusive course discounts and learning tips."
          imageSrc="https://img.b2bpic.net/free-photo/business-people-being-team_23-2148911773.jpg"
          imageAlt="Community of developers"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Join Now"
          termsText="We respect your privacy. Unsubscribe at any time. By joining, you agree to our Terms of Service."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="My Coder"
          columns={[
            {
              title: "Learn",              items: [
                { label: "Web Development", href: "#courses" },
                { label: "Mobile Apps", href: "#courses" },
                { label: "Backend Development", href: "#courses" },
                { label: "All Courses", href: "#courses" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "Community", href: "#" },
                { label: "Help Center", href: "#" },
                { label: "Contact Support", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 My Coder | Transforming Future Developers"
        />
      </div>
    </ThemeProvider>
  );
}