<?php
/*
================================================================================
                CONCLUSION & NEXT STEPS
                Krane Digital Programming Academy
================================================================================
LESSON: Conclusion - Your Journey Continues
AUTHOR: Udoinyang, M. Clement (Mr. Krane)
DATE: 2026

DISCLAIMER: This educational material is protected by copyright.
================================================================================
*/

// =============================================================================
// INITIALIZATION
// =============================================================================

// Start session for progress tracking
session_start();

// Define base path
define('BASE_PATH', dirname(__DIR__));

// Include configuration (adjust path as needed)
if (file_exists(BASE_PATH . '/config.php')) {
    require_once BASE_PATH . '/config.php';
} else {
    // Fallback configuration if config.php doesn't exist
    define('SITE_NAME', 'Krane Digital Programming Academy');
    define('SITE_AUTHOR', 'Udoinyang, M. Clement (Mr. Krane)');
    define('SITE_TAGLINE', 'Empowering Dreams');
    define('KRANE_WEBSITE', 'https://kranedigitalhub.netlify.app');
    define('KRANE_FACEBOOK', 'https://web.facebook.com/KraneDigitalHub007');
    define('KRANE_INSTAGRAM', 'https://www.instagram.com/kranedigitalhub/');
    define('KRANE_TWITTER', 'https://x.com/KraneDigitalHub');
    define('KRANE_YOUTUBE', 'https://youtube.com/@kranedigitalhub');
    define('KRANE_WHATSAPP', 'https://wa.me/2348104727681');
}

// Track lesson progress
if (!isset($_SESSION['completed_lessons'])) {
    $_SESSION['completed_lessons'] = [];
}
$lesson_completed = in_array('conclusion', $_SESSION['completed_lessons'] ?? []);

// Handle lesson completion
if (isset($_POST['mark_complete']) && !in_array('conclusion', $_SESSION['completed_lessons'] ?? [])) {
    $_SESSION['completed_lessons'][] = 'conclusion';
    $lesson_completed = true;
    $show_confetti = true;
}

// Calculate overall progress
$total_lessons = 6; // intro, html, css, javascript, advanced, conclusion
$completed_count = count($_SESSION['completed_lessons'] ?? []);
$progress_percentage = ($completed_count / $total_lessons) * 100;

// =============================================================================
// SIMPLE HEADER FUNCTION (if renderHeader doesn't exist)
// =============================================================================

if (!function_exists('renderHeader')) {
    function renderHeader($title, $currentPage) {
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conclusion - <?php echo SITE_NAME; ?></title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --bg-primary: #0a0a2a;
            --bg-secondary: #16163f;
            --text-primary: #ffffff;
            --text-secondary: #b8b8ff;
            --accent-primary: #00ffff;
            --accent-secondary: #9d4edd;
            --card-bg: rgba(22, 22, 63, 0.8);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            color: var(--text-primary);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        /* Navigation */
        .navbar {
            background: rgba(22, 22, 63, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--accent-primary);
        }
        
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
            font-family: 'Orbitron', sans-serif;
            color: var(--text-primary);
        }
        
        .neon-text {
            color: var(--accent-primary);
            text-shadow: 0 0 10px var(--accent-primary);
        }
        
        .accent {
            color: var(--accent-secondary);
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
        }
        
        .nav-links a {
            color: var(--text-primary);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .nav-links a:hover,
        .nav-links a.active {
            color: var(--accent-primary);
        }
        
        /* Hero Section */
        .hero-section {
            text-align: center;
            padding: 4rem 2rem;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
            border-radius: 20px;
            margin-bottom: 2rem;
        }
        
        .lead {
            font-size: 1.2rem;
            color: var(--text-secondary);
            margin-top: 1rem;
        }
        
        /* Glass Card */
        .glass-card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 2rem;
            margin: 2rem 0;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        /* Section */
        .section {
            scroll-margin-top: 100px;
            margin: 3rem 0;
        }
        
        .section-subtitle {
            color: var(--accent-primary);
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--accent-secondary);
            padding-bottom: 0.5rem;
        }
        
        /* Grid Layouts */
        .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
        
        @media (max-width: 768px) {
            .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
        }
        
        /* Code Block */
        .code-block {
            background: #1e1e1e;
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            overflow-x: auto;
            border-left: 4px solid var(--accent-primary);
        }
        
        .code-block pre {
            color: #d4d4d4;
            font-family: 'Courier New', monospace;
        }
        
        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            color: #0a0a2a;
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 20px var(--accent-primary);
        }
        
        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 2px solid var(--accent-primary);
        }
        
        .btn-secondary:hover {
            background: var(--accent-primary);
            color: #0a0a2a;
        }
        
        .btn-large {
            padding: 1rem 2rem;
            font-size: 1.1rem;
        }
        
        /* Progress Tracker */
        .progress-tracker {
            background: var(--card-bg);
            border-radius: 10px;
            padding: 1rem;
            margin: 2rem auto;
        }
        
        .tracker-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .tracker-bar {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .tracker-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            transition: width 0.5s;
        }
        
        /* Certificate */
        .certificate {
            background: linear-gradient(135deg, #667eea, #764ba2);
            padding: 3rem;
            border-radius: 20px;
            text-align: center;
            border: 5px solid var(--accent-primary);
            max-width: 800px;
            margin: 0 auto;
        }
        
        .certificate h1 {
            font-size: 2.5rem;
            color: var(--accent-primary);
            margin-bottom: 1rem;
        }
        
        .certificate .seal {
            font-size: 5rem;
            margin: 2rem 0;
            color: var(--accent-primary);
        }
        
        .certificate .signature {
            font-family: 'Brush Script MT', cursive;
            font-size: 2rem;
            margin-top: 2rem;
        }
        
        /* Badge */
        .badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            color: #0a0a2a;
            border-radius: 50px;
            font-weight: bold;
            margin: 0.2rem;
        }
        
        /* Footer */
        .footer {
            background: #16163f;
            padding: 3rem 2rem;
            margin-top: 4rem;
            border-top: 1px solid var(--accent-primary);
        }
        
        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            text-align: center;
        }
        
        .footer-links {
            display: flex;
            gap: 2rem;
            justify-content: center;
            margin: 2rem 0;
            flex-wrap: wrap;
        }
        
        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
        }
        
        .footer-links a:hover {
            color: var(--accent-primary);
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: transform 0.3s;
        }
        
        .social-link:hover {
            transform: translateY(-3px);
        }
        
        .facebook { background: #1877f2; }
        .instagram { background: #e4405f; }
        .twitter { background: #1da1f2; }
        .youtube { background: #ff0000; }
        .whatsapp { background: #25d366; }
        
        /* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 90px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            border: none;
            border-radius: 50%;
            color: #0a0a2a;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            z-index: 999;
        }
        
        .back-to-top.show {
            display: flex;
        }
        
        /* Confetti */
        #confetti-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <!-- Confetti Canvas -->
    <canvas id="confetti-canvas"></canvas>

    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="../index.php" class="logo">
                <span class="neon-text">Krane<span class="accent">.dev</span></span>
            </a>
            
            <div class="nav-links">
                <a href="../index.php">Home</a>
                <a href="introduction.php">Intro</a>
                <a href="html.php">HTML</a>
                <a href="css.php">CSS</a>
                <a href="javascript.php">JavaScript</a>
                <a href="advanced.php">Advanced</a>
                <a href="conclusion.php" class="active">Conclusion</a>
            </div>
        </div>
    </nav>

    <main class="container">
<?php
    }
}

if (!function_exists('renderFooter')) {
    function renderFooter() {
?>
    </main>

    <!-- Back to Top Button -->
    <button id="backToTop" class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-links">
                <a href="../index.php">Home</a>
                <a href="introduction.php">Introduction</a>
                <a href="html.php">HTML</a>
                <a href="css.php">CSS</a>
                <a href="javascript.php">JavaScript</a>
                <a href="advanced.php">Advanced</a>
                <a href="conclusion.php">Conclusion</a>
            </div>
            
            <div class="social-links">
                <a href="<?php echo KRANE_FACEBOOK; ?>" target="_blank" class="social-link facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="<?php echo KRANE_INSTAGRAM; ?>" target="_blank" class="social-link instagram"><i class="fab fa-instagram"></i></a>
                <a href="<?php echo KRANE_TWITTER; ?>" target="_blank" class="social-link twitter"><i class="fab fa-twitter"></i></a>
                <a href="<?php echo KRANE_YOUTUBE; ?>" target="_blank" class="social-link youtube"><i class="fab fa-youtube"></i></a>
                <a href="<?php echo KRANE_WHATSAPP; ?>" target="_blank" class="social-link whatsapp"><i class="fab fa-whatsapp"></i></a>
            </div>
            
            <p>&copy; <?php echo date('Y'); ?> <?php echo SITE_NAME; ?>. All rights reserved.</p>
            <p style="color: #888; font-size: 0.9rem;"><?php echo SITE_AUTHOR; ?></p>
        </div>
    </footer>

    <script>
        // Back to Top Button
        const backToTop = document.getElementById('backToTop');
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });
        
        backToTop.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // Confetti Effect
        <?php if (isset($show_confetti) && $show_confetti): ?>
        (function() {
            const canvas = document.getElementById('confetti-canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            const particles = [];
            const colors = ['#00ffff', '#9d4edd', '#ff6b6b', '#ffd93d', '#4d4dff'];
            
            for (let i = 0; i < 200; i++) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height - canvas.height,
                    vx: Math.random() * 2 - 1,
                    vy: Math.random() * 3 + 2,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    size: Math.random() * 5 + 2
                });
            }
            
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                for (let i = particles.length - 1; i >= 0; i--) {
                    const p = particles[i];
                    p.x += p.vx;
                    p.y += p.vy;
                    
                    ctx.fillStyle = p.color;
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                    ctx.fill();
                    
                    if (p.y > canvas.height) {
                        particles.splice(i, 1);
                    }
                }
                
                if (particles.length > 0) {
                    requestAnimationFrame(animate);
                } else {
                    canvas.style.display = 'none';
                }
            }
            
            animate();
            setTimeout(() => { canvas.style.display = 'none'; }, 7000);
        })();
        <?php endif; ?>
    </script>
</body>
</html>
<?php
    }
}

// =============================================================================
// RENDER THE PAGE
// =============================================================================

renderHeader('Conclusion', 'conclusion');
?>

<!-- Hero Section -->
<section class="hero-section">
    <h1 class="neon-text" style="font-size: 3rem;"><i class="fas fa-graduation-cap" style="color: #ffd93d;"></i> CONCLUSION</h1>
    <p class="lead">Congratulations on Completing Your Journey!</p>
    
    <!-- Overall Progress -->
    <div class="progress-tracker" style="max-width: 500px; margin: 2rem auto;">
        <div class="tracker-header">
            <span>Overall Course Progress</span>
            <span><?php echo $completed_count; ?>/<?php echo $total_lessons; ?> lessons</span>
        </div>
        <div class="tracker-bar">
            <div class="tracker-fill" style="width: <?php echo $progress_percentage; ?>%;"></div>
        </div>
    </div>
</section>

<!-- CERTIFICATE OF COMPLETION -->
<?php if ($completed_count == $total_lessons): ?>
<section style="margin: 4rem 0;">
    <div class="certificate">
        <h1>🏆 CERTIFICATE OF COMPLETION</h1>
        <p style="font-size: 1.2rem;">This is to certify that</p>
        <h2 style="font-size: 2.5rem; margin: 1rem 0;"><?php echo $_SESSION['student_name'] ?? 'Student Name'; ?></h2>
        <p>has successfully completed the</p>
        <h3 style="font-size: 2rem; color: var(--accent-primary); margin: 1rem 0;">MODERN WEBSITE FUNDAMENTALS</h3>
        <p>A comprehensive course covering HTML, CSS, JavaScript, and Advanced Topics</p>
        
        <div class="seal">
            <i class="fas fa-certificate"></i>
        </div>
        
        <div style="display: flex; justify-content: space-between; margin-top: 2rem;">
            <div>
                <p>Date: <?php echo date('F j, Y'); ?></p>
            </div>
            <div>
                <p class="signature">Mr. Krane</p>
                <p>CEO, Krane Digital Hub</p>
            </div>
        </div>
    </div>
    
    <!-- Name input for certificate -->
    <div style="max-width: 400px; margin: 2rem auto;">
        <form method="POST">
            <input type="text" name="student_name" placeholder="Enter your name for certificate" class="form-control" style="width: 100%; padding: 1rem; margin-bottom: 1rem;">
            <button type="submit" class="btn btn-primary" style="width: 100%;" onclick="this.form.submit(); setTimeout(() => confetti({particleCount:200}), 100);">
                <i class="fas fa-certificate"></i> Generate Certificate
            </button>
        </form>
    </div>
</section>
<?php endif; ?>

<!-- SECTION 1: NEXT STEPS -->
<section id="section1" class="section">
    <h2 class="section-subtitle"><span class="neon-text">6.1</span> Next Steps</h2>
    
    <div class="grid-3">
        <div class="glass-card">
            <i class="fas fa-code" style="font-size: 2rem; color: var(--accent-primary); margin-bottom: 1rem;"></i>
            <h3>Learn a Framework</h3>
            <p>Take your skills to the next level with modern frameworks:</p>
            <ul>
                <li>⚛️ React.js - UI Library</li>
                <li>🖖 Vue.js - Progressive Framework</li>
                <li>🎯 Angular - Enterprise Platform</li>
                <li>📱 Next.js - React Framework</li>
                <li>✨ Tailwind CSS - Utility-first CSS</li>
                <li>🎨 Bootstrap - CSS Framework</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-server" style="font-size: 2rem; color: var(--accent-primary); margin-bottom: 1rem;"></i>
            <h3>Learn Backend</h3>
            <p>Become a full-stack developer:</p>
            <ul>
                <li>🐘 PHP - Server-side scripting</li>
                <li>🟢 Node.js - JavaScript runtime</li>
                <li>🐍 Python - Django/Flask</li>
                <li>💎 Ruby on Rails</li>
                <li>☕ Java - Spring Boot</li>
                <li>🗄️ MySQL/PostgreSQL - Databases</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-mobile-alt" style="font-size: 2rem; color: var(--accent-primary); margin-bottom: 1rem;"></i>
            <h3>Learn Mobile Development</h3>
            <p>Build mobile apps with your web skills:</p>
            <ul>
                <li>📱 React Native</li>
                <li>🎯 Flutter</li>
                <li>🍎 Swift (iOS)</li>
                <li>🤖 Kotlin (Android)</li>
                <li>📦 Ionic</li>
                <li>⚡ Progressive Web Apps</li>
            </ul>
        </div>
    </div>
</section>

<!-- SECTION 2: PROJECT IDEAS -->
<section id="section2" class="section">
    <h2 class="section-subtitle"><span class="neon-text">6.2</span> Project Ideas</h2>
    
    <div class="grid-2">
        <div class="glass-card">
            <h3>Beginner Projects</h3>
            <div style="margin: 1rem 0;">
                <div class="badge">⭐</div> Personal Portfolio Website<br>
                <div class="badge">⭐</div> To-Do List App<br>
                <div class="badge">⭐</div> Calculator<br>
                <div class="badge">⭐</div> Weather App (with API)<br>
                <div class="badge">⭐</div> Blog Website<br>
                <div class="badge">⭐</div> Landing Page<br>
            </div>
        </div>
        
        <div class="glass-card">
            <h3>Intermediate Projects</h3>
            <div style="margin: 1rem 0;">
                <div class="badge">⭐⭐</div> E-commerce Store<br>
                <div class="badge">⭐⭐</div> Social Media Dashboard<br>
                <div class="badge">⭐⭐</div> Chat Application<br>
                <div class="badge">⭐⭐</div> Task Management System<br>
                <div class="badge">⭐⭐</div> Recipe Finder<br>
                <div class="badge">⭐⭐</div> Movie Database<br>
            </div>
        </div>
        
        <div class="glass-card">
            <h3>Advanced Projects</h3>
            <div style="margin: 1rem 0;">
                <div class="badge">⭐⭐⭐</div> Content Management System<br>
                <div class="badge">⭐⭐⭐</div> Learning Management System<br>
                <div class="badge">⭐⭐⭐</div> Real-time Collaboration Tool<br>
                <div class="badge">⭐⭐⭐</div> Video Streaming Platform<br>
                <div class="badge">⭐⭐⭐</div> Analytics Dashboard<br>
                <div class="badge">⭐⭐⭐</div> AI Chatbot<br>
            </div>
        </div>
        
        <div class="glass-card">
            <h3>Portfolio Builders</h3>
            <div style="margin: 1rem 0;">
                <div class="badge">💼</div> GitHub - Show your code<br>
                <div class="badge">💼</div> LinkedIn - Network<br>
                <div class="badge">💼</div> Personal Website<br>
                <div class="badge">💼</div> CodePen - Share snippets<br>
                <div class="badge">💼</div> Dev.to - Write articles<br>
                <div class="badge">💼</div> Stack Overflow - Help others<br>
            </div>
        </div>
    </div>
</section>

<!-- SECTION 3: RESOURCES -->
<section id="section3" class="section">
    <h2 class="section-subtitle"><span class="neon-text">6.3</span> Learning Resources</h2>
    
    <div class="grid-4">
        <div class="glass-card">
            <i class="fab fa-youtube" style="font-size: 2rem; color: #ff0000;"></i>
            <h4>YouTube Channels</h4>
            <ul style="font-size: 0.9rem;">
                <li>freeCodeCamp</li>
                <li>Traversy Media</li>
                <li>The Net Ninja</li>
                <li>Web Dev Simplified</li>
                <li>Kevin Powell</li>
                <li>Fireship</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-globe" style="font-size: 2rem; color: var(--accent-primary);"></i>
            <h4>Free Platforms</h4>
            <ul style="font-size: 0.9rem;">
                <li>freeCodeCamp</li>
                <li>The Odin Project</li>
                <li>MDN Web Docs</li>
                <li>W3Schools</li>
                <li>Codecademy</li>
                <li>Khan Academy</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-book" style="font-size: 2rem; color: var(--accent-secondary);"></i>
            <h4>Books</h4>
            <ul style="font-size: 0.9rem;">
                <li>Eloquent JavaScript</li>
                <li>You Don't Know JS</li>
                <li>HTML & CSS (Jon Duckett)</li>
                <li>JavaScript & jQuery</li>
                <li>CSS Secrets</li>
                <li>Learning PHP, MySQL & JavaScript</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-tools" style="font-size: 2rem; color: #ff6b6b;"></i>
            <h4>Practice Platforms</h4>
            <ul style="font-size: 0.9rem;">
                <li>CodePen</li>
                <li>JSFiddle</li>
                <li>Replit</li>
                <li>CodeSandbox</li>
                <li>LeetCode</li>
                <li>HackerRank</li>
            </ul>
        </div>
    </div>
    
    <div class="grid-4" style="margin-top: 1rem;">
        <div class="glass-card">
            <i class="fab fa-github" style="font-size: 2rem;"></i>
            <h4>GitHub Repos</h4>
            <ul style="font-size: 0.9rem;">
                <li>awesome-lists</li>
                <li>javascript-algorithms</li>
                <li>clean-code-javascript</li>
                <li>Front-End-Checklist</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-podcast" style="font-size: 2rem; color: #9d4edd;"></i>
            <h4>Podcasts</h4>
            <ul style="font-size: 0.9rem;">
                <li>Syntax.fm</li>
                <li>ShopTalk Show</li>
                <li>CodeNewbie</li>
                <li>Developer Tea</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-newspaper" style="font-size: 2rem; color: #00ffff;"></i>
            <h4>Newsletters</h4>
            <ul style="font-size: 0.9rem;">
                <li>JavaScript Weekly</li>
                <li>CSS Tricks</li>
                <li>Frontend Focus</li>
                <li>Smashing Magazine</li>
            </ul>
        </div>
        
        <div class="glass-card">
            <i class="fas fa-certificate" style="font-size: 2rem; color: #ffd93d;"></i>
            <h4>Certifications</h4>
            <ul style="font-size: 0.9rem;">
                <li>freeCodeCamp Cert</li>
                <li>Google UX Design</li>
                <li>Meta Frontend</li>
                <li>IBM Full Stack</li>
            </ul>
        </div>
    </div>
</section>

<!-- SECTION 4: JOIN COMMUNITY -->
<section id="section4" class="section">
    <h2 class="section-subtitle"><span class="neon-text">6.4</span> Join the Community</h2>
    
    <div class="grid-2">
        <div class="glass-card">
            <h3>Krane Digital Hub Community</h3>
            <p>Connect with fellow learners and developers:</p>
            
            <div style="margin: 2rem 0;">
                <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
                    <a href="<?php echo KRANE_FACEBOOK; ?>" target="_blank" class="btn btn-primary" style="flex: 1;">
                        <i class="fab fa-facebook"></i> Facebook
                    </a>
                    <a href="<?php echo KRANE_WHATSAPP; ?>" target="_blank" class="btn btn-primary" style="flex: 1;">
                        <i class="fab fa-whatsapp"></i> WhatsApp
                    </a>
                </div>
                <div style="display: flex; gap: 1rem;">
                    <a href="<?php echo KRANE_TWITTER; ?>" target="_blank" class="btn btn-primary" style="flex: 1;">
                        <i class="fab fa-twitter"></i> Twitter
                    </a>
                    <a href="<?php echo KRANE_INSTAGRAM; ?>" target="_blank" class="btn btn-primary" style="flex: 1;">
                        <i class="fab fa-instagram"></i> Instagram
                    </a>
                </div>
            </div>
            
            <div style="background: #2a2a4a; padding: 1rem; border-radius: 5px; margin-top: 1rem;">
                <p><strong>Join our mailing list for updates:</strong></p>
                <form onsubmit="event.preventDefault(); alert('Thank you for subscribing! 🎉')">
                    <input type="email" placeholder="Your email" class="form-control" style="margin-bottom: 0.5rem;">
                    <button type="submit" class="btn btn-secondary" style="width: 100%;">Subscribe</button>
                </form>
            </div>
        </div>
        
        <div class="glass-card">
            <h3>Other Communities</h3>
            <ul style="list-style: none;">
                <li style="margin: 1rem 0;">
                    <i class="fab fa-discord" style="color: #5865F2; margin-right: 0.5rem;"></i>
                    <a href="https://discord.com/invite/programming" target="_blank" class="toc-link">Discord - Programming Hub</a>
                </li>
                <li style="margin: 1rem 0;">
                    <i class="fab fa-reddit" style="color: #FF4500; margin-right: 0.5rem;"></i>
                    <a href="https://reddit.com/r/webdev" target="_blank" class="toc-link">r/webdev</a>
                </li>
                <li style="margin: 1rem 0;">
                    <i class="fab fa-stack-overflow" style="color: #F48024; margin-right: 0.5rem;"></i>
                    <a href="https://stackoverflow.com/" target="_blank" class="toc-link">Stack Overflow</a>
                </li>
                <li style="margin: 1rem 0;">
                    <i class="fab fa-dev" style="color: #0A0A0A; margin-right: 0.5rem;"></i>
                    <a href="https://dev.to/" target="_blank" class="toc-link">DEV Community</a>
                </li>
                <li style="margin: 1rem 0;">
                    <i class="fab fa-slack" style="color: #4A154B; margin-right: 0.5rem;"></i>
                    <a href="https://slack.com/" target="_blank" class="toc-link">Various Dev Slacks</a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="glass-card" style="text-align: center;">
        <h3>💬 Discussion Board</h3>
        <p>Share your thoughts, ask questions, and help others</p>
        
        <div style="max-width: 600px; margin: 2rem auto;">
            <textarea rows="4" placeholder="Leave a message..." class="form-control" style="margin-bottom: 1rem;"></textarea>
            <button class="btn btn-primary" onclick="alert('Message posted! (Demo feature)')">Post Message</button>
        </div>
        
        <!-- Sample Posts -->
        <div style="text-align: left; margin-top: 2rem;">
            <div style="background: #2a2a4a; padding: 1rem; border-radius: 5px; margin-bottom: 1rem;">
                <strong>John Doe</strong> - 2 hours ago
                <p>Just completed the course! Amazing content Mr. Krane! 🎉</p>
                <div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
                    <span>❤️ 12</span>
                    <span>💬 3</span>
                </div>
            </div>
            
            <div style="background: #2a2a4a; padding: 1rem; border-radius: 5px;">
                <strong>Sarah Smith</strong> - 5 hours ago
                <p>Can anyone recommend a good project to practice Flexbox?</p>
                <div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
                    <span>❤️ 8</span>
                    <span>💬 5</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SUMMARY OF WHAT YOU'VE LEARNED -->
<section class="glass-card">
    <h2 style="color: #FFD700;">📚 Course Summary</h2>
    
    <div class="grid-3">
        <div>
            <h4>HTML (8 topics)</h4>
            <ul>
                <li>✅ Document Structure</li>
                <li>✅ Tags & Elements</li>
                <li>✅ Text & Headings</li>
                <li>✅ Images & Videos</li>
                <li>✅ Links & Navigation</li>
                <li>✅ Lists & Tables</li>
                <li>✅ Forms & Input</li>
                <li>✅ Semantic HTML</li>
            </ul>
        </div>
        
        <div>
            <h4>CSS (8 topics)</h4>
            <ul>
                <li>✅ Selectors</li>
                <li>✅ Box Model</li>
                <li>✅ Colors & Backgrounds</li>
                <li>✅ Typography</li>
                <li>✅ Flexbox</li>
                <li>✅ Grid</li>
                <li>✅ Animations</li>
                <li>✅ Responsive Design</li>
            </ul>
        </div>
        
        <div>
            <h4>JavaScript (8 topics)</h4>
            <ul>
                <li>✅ Variables & Data Types</li>
                <li>✅ Functions</li>
                <li>✅ DOM Manipulation</li>
                <li>✅ Events</li>
                <li>✅ Form Validation</li>
                <li>✅ Working with APIs</li>
                <li>✅ Local Storage</li>
                <li>✅ Async JavaScript</li>
            </ul>
        </div>
    </div>
    
    <div class="grid-2" style="margin-top: 1rem;">
        <div>
            <h4>Advanced Topics (4 topics)</h4>
            <ul>
                <li>✅ Forms & Interactivity</li>
                <li>✅ Responsive Design</li>
                <li>✅ Deployment Basics</li>
                <li>✅ Performance Optimization</li>
            </ul>
        </div>
        
        <div>
            <h4>Conclusion (4 topics)</h4>
            <ul>
                <li>✅ Next Steps</li>
                <li>✅ Project Ideas</li>
                <li>✅ Resources</li>
                <li>✅ Join Community</li>
            </ul>
        </div>
    </div>
    
    <p style="text-align: center; margin-top: 2rem; font-size: 1.2rem;">
        <strong>Total: 32 topics mastered!</strong>
    </p>
</section>

<!-- FAREWELL MESSAGE FROM MR. KRANE -->
<section class="glass-card" style="background: linear-gradient(135deg, #667eea40, #764ba240);">
    <div style="display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;">
        <div style="flex: 1; min-width: 200px; text-align: center;">
            <i class="fas fa-chalkboard-teacher" style="font-size: 5rem; color: var(--accent-primary);"></i>
        </div>
        
        <div style="flex: 3;">
            <h2 style="color: #FFD700;">A Message from Mr. Krane</h2>
            <p style="font-size: 1.2rem; line-height: 1.8;">
                Dear Student,
            </p>
            <p style="font-size: 1.1rem; line-height: 1.8;">
                Congratulations on completing the Modern Website Fundamentals course! 🎉
            </p>
            <p style="line-height: 1.8;">
                What you've accomplished is no small feat. You've gone from understanding how the web works 
                to building complete, interactive websites with HTML, CSS, and JavaScript. You've learned 
                about responsive design, forms, APIs, performance optimization, and so much more.
            </p>
            <p style="line-height: 1.8;">
                But remember: this is just the beginning of your journey. The world of web development is 
                vast and constantly evolving. Keep building, keep learning, and never stop being curious.
            </p>
            <p style="line-height: 1.8;">
                As we say at Krane Digital Hub: <strong>"Empowering Dreams"</strong> - and you've just taken 
                a massive step toward making your dreams a reality.
            </p>
            <p style="margin-top: 2rem; font-style: italic;">
                Keep coding, stay curious, and always remember - every expert was once a beginner.
            </p>
            <p style="margin-top: 1rem; font-size: 1.2rem;">
                With pride and admiration,<br>
                <strong>Udoinyang, M. Clement (Mr. Krane)</strong><br>
                CEO, Krane Digital Hub<br>
                Krane Digital Programming Academy
            </p>
        </div>
    </div>
</section>

<!-- DOWNLOAD CERTIFICATE & RESOURCES -->
<section class="glass-card" style="text-align: center;">
    <h2 style="color: #FFD700;">📥 Download Resources</h2>
    
    <div class="grid-3" style="margin: 2rem 0;">
        <a href="#" class="btn btn-primary" onclick="alert('Certificate download - feature coming soon!')">
            <i class="fas fa-certificate"></i> Certificate
        </a>
        <a href="#" class="btn btn-primary" onclick="alert('Cheatsheet download - feature coming soon!')">
            <i class="fas fa-file-pdf"></i> Complete Cheatsheet
        </a>
        <a href="#" class="btn btn-primary" onclick="alert('Source code download - feature coming soon!')">
            <i class="fas fa-file-archive"></i> Source Code
        </a>
    </div>
    
    <div class="grid-3">
        <a href="#" class="btn btn-secondary" onclick="alert('HTML cheatsheet - coming soon!')">HTML</a>
        <a href="#" class="btn btn-secondary" onclick="alert('CSS cheatsheet - coming soon!')">CSS</a>
        <a href="#" class="btn btn-secondary" onclick="alert('JavaScript cheatsheet - coming soon!')">JavaScript</a>
    </div>
</section>

<!-- LESSON COMPLETION -->
<section style="text-align: center; margin: 3rem 0;">
    <?php if (!$lesson_completed): ?>
    <form method="POST">
        <button type="submit" name="mark_complete" class="btn btn-primary btn-large">
            <i class="fas fa-check-circle"></i> Mark Course Complete
        </button>
    </form>
    <?php else: ?>
    <div style="background: #4cd964; color: #2c3e50; padding: 2rem; border-radius: 10px;">
        <i class="fas fa-trophy" style="font-size: 3rem;"></i>
        <h2>🎉 CONGRATULATIONS! 🎉</h2>
        <p>You've completed the entire Modern Website Fundamentals course!</p>
        <p>You are now ready to build professional websites.</p>
        <div style="margin-top: 2rem;">
            <a href="../index.php" class="btn btn-primary">Return to Home</a>
            <a href="#top" class="btn btn-secondary">Back to Top</a>
        </div>
    </div>
    <?php endif; ?>
</section>

<!-- BACK TO MAIN MENU -->
<div style="text-align: center; margin: 2rem 0;">
    <a href="../index.php" class="btn btn-secondary">
        <i class="fas fa-home"></i> Back to Main Menu
    </a>
</div>

<?php renderFooter(); ?>