<?php
require_once 'config.php';
$currentPage = 'home';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo SITE_NAME; ?> - Master PHP Web Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="container nav-container">
            <a href="index.php" class="logo">
                <span>&lt;/&gt;</span>
                PHP Webdesign
            </a>
            <ul class="nav-menu">
                <?php foreach ($navItems as $item): ?>
                <li class="nav-item">
                    <a href="<?php echo $item['url']; ?>" <?php echo $currentPage == strtolower($item['name']) ? 'class="active"' : ''; ?>>
                        <span><?php echo $item['icon']; ?></span>
                        <?php echo $item['name']; ?>
                    </a>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>
    </nav>

    <!-- Header -->
    <header class="header">
        <div class="container">
            <h1>PHP Webdesign Fundamentals</h1>
            <p>Master PHP from beginner to advanced with interactive lessons, games, and quizzes. Your journey to becoming a PHP expert starts here!</p>
            
            <!-- Progress Tracker -->
            <div class="progress-tracker">
                <h3>Your Progress</h3>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: <?php echo ($userProgress['beginner_score'] + $userProgress['intermediate_score'] + $userProgress['advanced_score']) / 3; ?>%"></div>
                </div>
                <p>Beginner: <?php echo $userProgress['beginner_score']; ?>% | Intermediate: <?php echo $userProgress['intermediate_score']; ?>% | Advanced: <?php echo $userProgress['advanced_score']; ?>%</p>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container">
        <!-- Level Cards -->
        <div class="cards-grid">
            <div class="card">
                <div class="card-icon">🌱</div>
                <h3>Beginner</h3>
                <p>Start your PHP journey with basics: syntax, variables, and control structures. Perfect for absolute beginners!</p>
                <ul style="list-style: none; margin-bottom: 20px; color: var(--text-secondary);">
                    <li>✓ PHP Syntax Basics</li>
                    <li>✓ Variables & Data Types</li>
                    <li>✓ Control Structures</li>
                    <li>✓ Arrays & Functions</li>
                </ul>
                <a href="beginner.php" class="btn">Start Beginner Level</a>
            </div>

            <div class="card">
                <div class="card-icon">🚀</div>
                <h3>Intermediate</h3>
                <p>Level up with forms, sessions, databases, and more complex PHP concepts.</p>
                <ul style="list-style: none; margin-bottom: 20px; color: var(--text-secondary);">
                    <li>✓ Form Handling</li>
                    <li>✓ Sessions & Cookies</li>
                    <li>✓ File Operations</li>
                    <li>✓ Database Basics</li>
                </ul>
                <a href="intermediate.php" class="btn">Start Intermediate Level</a>
            </div>

            <div class="card">
                <div class="card-icon">⚡</div>
                <h3>Advanced</h3>
                <p>Master OOP, security, frameworks, and advanced PHP techniques.</p>
                <ul style="list-style: none; margin-bottom: 20px; color: var(--text-secondary);">
                    <li>✓ OOP in PHP</li>
                    <li>✓ PDO & Prepared Statements</li>
                    <li>✓ Security Best Practices</li>
                    <li>✓ MVC Architecture</li>
                </ul>
                <a href="advanced.php" class="btn">Start Advanced Level</a>
            </div>
        </div>

        <!-- Interactive Game Section -->
        <section class="game-section">
            <h2 style="text-align: center; margin-bottom: 30px;">🎮 Quick PHP Challenge</h2>
            <div class="quiz-container" id="home-quiz">
                <?php
                $question = getQuizQuestion('beginner', 0);
                if ($question):
                ?>
                <div class="question"><?php echo $question['question']; ?></div>
                <div class="options">
                    <?php foreach ($question['options'] as $index => $option): ?>
                    <button class="option-btn" onclick="checkAnswer(<?php echo $index; ?>, <?php echo $question['correct']; ?>, this)">
                        <?php echo $option; ?>
                    </button>
                    <?php endforeach; ?>
                </div>
                <div id="quiz-feedback" style="text-align: center; margin-top: 20px;"></div>
                <?php endif; ?>
            </div>
        </section>

        <!-- Downloader Section -->
        <section class="downloader-section">
            <h3>📥 Download PHP Resources</h3>
            <p>Get starter templates, cheat sheets, and practice files</p>
            <div class="download-buttons">
                <a href="?download=beginner" class="btn btn-outline">Beginner Pack</a>
                <a href="?download=intermediate" class="btn btn-outline">Intermediate Pack</a>
                <a href="?download=advanced" class="btn btn-outline">Advanced Pack</a>
                <a href="?download=cheatsheet" class="btn btn-outline">PHP Cheatsheet</a>
            </div>
        </section>

        <?php
        // Handle downloads
        if (isset($_GET['download'])) {
            $files = [
                'beginner' => "<?php\n// PHP Beginner Starter Template\n\n// Your code here\n\$name = 'World';\necho \"Hello, \$name!\";\n?>",
                'intermediate' => "<?php\n// PHP Intermediate Template\n\n// Form handling example\nif (\$_SERVER['REQUEST_METHOD'] == 'POST') {\n    \$data = \$_POST['data'];\n    // Process data\n}\n?>\n\n<form method='POST'>\n    <input type='text' name='data'>\n    <button type='submit'>Submit</button>\n</form>",
                'advanced' => "<?php\n// PHP Advanced Template - OOP Example\n\nclass Application {\n    private \$name;\n    \n    public function __construct(\$name) {\n        \$this->name = \$name;\n    }\n    \n    public function run() {\n        return \"Application \$this->name is running\";\n    }\n}\n\n\$app = new Application('MyApp');\necho \$app->run();\n?>",
                'cheatsheet' => "PHP QUICK REFERENCE CHEATSHEET\n\nVariables: \$var = value;\nStrings: \"text\" or 'text'\nArrays: \$arr = [1, 2, 3];\nFunctions: function name() {}\nLoops: foreach, while, for\nConditionals: if, else, elseif\nIncludes: include 'file.php';\nSessions: session_start();\nDatabase: new PDO();\nOOP: class ClassName {}\nErrors: try {} catch {}\nOutput: echo, print, print_r\n"
            ];
            
            if (isset($files[$_GET['download']])) {
                generateCodeDownload($files[$_GET['download']], $_GET['download'] . '_template.php');
            }
        }
        ?>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>About Us</h4>
                    <p>Master PHP web design with our comprehensive, interactive tutorials. From beginner to advanced, we've got you covered!</p>
                </div>
                
                <div class="footer-section">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="beginner.php">Beginner Lessons</a></li>
                        <li><a href="intermediate.php">Intermediate Lessons</a></li>
                        <li><a href="advanced.php">Advanced Lessons</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h4>Connect With Me</h4>
                    <div class="social-links">
                        <a href="<?php echo $socialLinks['github']; ?>" target="_blank" class="social-link tooltip">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.03-2.682-.103-.253-.447-1.27.098-2.646 0 0 .84-.269 2.75 1.025.8-.223 1.65-.334 2.5-.334.85 0 1.7.111 2.5.334 1.91-1.294 2.75-1.025 2.75-1.025.545 1.376.201 2.393.099 2.646.64.698 1.03 1.591 1.03 2.682 0 3.841-2.337 4.687-4.565 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.418 22 12c0-5.523-4.477-10-10-10z'/%3E%3C/svg%3E" alt="GitHub">
                            <span class="tooltip-text">GitHub</span>
                        </a>
                        <a href="<?php echo $socialLinks['linkedin']; ?>" target="_blank" class="social-link tooltip">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451c.979 0 1.771-.773 1.771-1.729V1.729C24 .774 23.204 0 22.225 0z'/%3E%3C/svg%3E" alt="LinkedIn">
                            <span class="tooltip-text">LinkedIn</span>
                        </a>
                        <a href="<?php echo $socialLinks['twitter']; ?>" target="_blank" class="social-link tooltip">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.104c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0021.707-3.645 13.94 13.94 0 001.54-5.872c0-.212-.005-.424-.015-.636.997-.723 1.856-1.616 2.534-2.636z'/%3E%3C/svg%3E" alt="Twitter">
                            <span class="tooltip-text">Twitter</span>
                        </a>
                        <a href="<?php echo $socialLinks['youtube']; ?>" target="_blank" class="social-link tooltip">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E" alt="YouTube">
                            <span class="tooltip-text">YouTube</span>
                        </a>
                    </div>
                </div>
            </div>
            <div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(108, 92, 231, 0.3);">
                <p>&copy; <?php echo date('Y'); ?> <?php echo SITE_NAME; ?>. All rights reserved. Created with ❤️ for PHP learners.</p>
            </div>
        </div>
    </footer>

    <script>
    // Quiz functionality
    function checkAnswer(selected, correct, element) {
        const options = document.querySelectorAll('.option-btn');
        const feedback = document.getElementById('quiz-feedback');
        
        options.forEach(opt => opt.classList.remove('selected', 'correct', 'wrong'));
        
        if (selected === correct) {
            element.classList.add('correct');
            feedback.innerHTML = '✅ Correct! Great job!';
            feedback.style.color = 'var(--success-color)';
            
            // Update progress (simulated)
            fetch('?update=home-quiz&score=100', { method: 'POST' });
        } else {
            element.classList.add('wrong');
            options[correct].classList.add('correct');
            feedback.innerHTML = '❌ Not quite. Try again!';
            feedback.style.color = 'var(--error-color)';
        }
    }

    // Copy code functionality
    function copyCode(button) {
        const code = button.previousElementSibling.innerText;
        navigator.clipboard.writeText(code).then(() => {
            button.textContent = 'Copied!';
            setTimeout(() => {
                button.textContent = 'Copy Code';
            }, 2000);
        });
    }

    // Add copy buttons to code blocks
    document.addEventListener('DOMContentLoaded', function() {
        const codeBlocks = document.querySelectorAll('.code-block pre');
        codeBlocks.forEach(block => {
            const button = document.createElement('button');
            button.className = 'copy-btn';
            button.textContent = 'Copy Code';
            button.onclick = function() { copyCode(this); };
            block.parentNode.insertBefore(button, block.nextSibling);
        });
    });

    // Progress tracker update
    function updateProgress(level, value) {
        fetch('?update=' + level + '&value=' + value, { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
    }

    // Loading animation
    window.addEventListener('load', function() {
        const loader = document.querySelector('.loader');
        if (loader) {
            loader.style.display = 'none';
        }
    });
    </script>
</body>
</html>