<?php
include "../include/db.php";
include "include/header.php";

$success = '';
$errors = [];

// Default values (if JSON not exist)
$hero_data = [
    'title' => 'Master Robotics: Build, Code, Innovate',
    'subtitle' => 'The ultimate platform for robotics enthusiasts. Hands-on courses in AI integration, automation, and real-world projects.',
    'btn_get' => 'Get Started',
    'btn_find' => 'Find Courses',
    'image' => 'https://img.freepik.com/free-vector/robot-transformer-form-android-car-isolated-vector-cartoon-illustration-futuristic-cyborg-mechanical-soldier-cyborg-character_107791-3054.jpg'
];

// Load from JSON if exists
$json_file = '../hero_data.json';
if (file_exists($json_file)) {
    $hero_data = json_decode(file_get_contents($json_file), true) ?: $hero_data;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = trim($_POST['title'] ?? '');
    $subtitle = trim($_POST['subtitle'] ?? '');
    $btn_get = trim($_POST['btn_get'] ?? '');
    $btn_find = trim($_POST['btn_find'] ?? '');
    $image = trim($_POST['image'] ?? '');

    if (empty($title)) $errors[] = "Title is required.";
    if (empty($subtitle)) $errors[] = "Subtitle is required.";
    if (empty($btn_get)) $errors[] = "Get Started button text is required.";
    if (empty($btn_find)) $errors[] = "Find Courses button text is required.";
    if (empty($image) || !filter_var($image, FILTER_VALIDATE_URL)) $errors[] = "Valid image URL required.";

    if (empty($errors)) {
        $new_data = compact('title', 'subtitle', 'btn_get', 'btn_find', 'image');
        if (file_put_contents($json_file, json_encode($new_data, JSON_PRETTY_PRINT))) {
            $success = "Hero section updated successfully!";
            $hero_data = $new_data;
        } else {
            $errors[] = "Failed to save. Check file permissions.";
        }
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - Update Hero Section</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }
        .content { margin-left: 250px; transition: 0.3s; }
        .top-nav { background: linear-gradient(135deg, #1E293B 0%, #334155 100%); }
        .form-input { @apply w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-400 focus:border-transparent; }
        .btn-save { @apply bg-gradient-to-r from-emerald-500 to-emerald-600 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 shadow-lg hover:from-emerald-600 hover:to-emerald-700 transition-all; }
        .preview-card { @apply bg-gradient-to-br from-indigo-900 to-purple-900 p-8 rounded-2xl text-white; }
        @media (max-width: 768px) { .content { margin-left: 0; } }
    </style>
</head>
<body class="bg-gray-50">

    <!-- Top Nav -->
    <nav class="top-nav sticky top-0 text-white p-4 flex justify-between items-center shadow-lg z-40 backdrop-blur-md bg-white/10">
        <div class="logo text-2xl font-bold">CourseLMS Admin</div>
        <div class="right-nav flex items-center gap-4">
            <a href="contact_messages.php" class="text-white hover:bg-amber-500 px-4 py-2 rounded-lg transition">Contact</a>
            <a href="index_admin.php" class="bg-amber-500 px-4 py-2 rounded-lg">Hero Editor</a>
            <div class="profile flex items-center gap-2">
                <img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full ring-2 ring-amber-400">
                <span class="font-medium">Admin</span>
            </div>
        </div>
    </nav>

    <div class="content p-6">
        <div class="max-w-4xl mx-auto">

            <div class="bg-white rounded-2xl shadow-xl p-6 mb-6">
                <h1 class="text-3xl font-bold text-gray-800 flex items-center gap-3">
                    Update Hero Section
                </h1>
                <p class="text-gray-600 mt-1">Changes appear instantly on homepage.</p>
            </div>

            <?php if ($success): ?>
                <div class="p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl flex items-center gap-2 mb-6">
                    <?php echo htmlspecialchars($success); ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($errors)): ?>
                <div class="p-4 bg-rose-50 border border-rose-200 text-rose-700 rounded-xl mb-6">
                    <ul class="list-disc list-inside">
                        <?php foreach ($errors as $e): ?>
                            <li><?php echo htmlspecialchars($e); ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            <?php endif; ?>

            <form method="POST" class="grid md:grid-cols-2 gap-6">
                <div class="space-y-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Hero Title</label>
                        <input type="text" name="title" class="form-input" value="<?php echo htmlspecialchars($hero_data['title']); ?>" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Get Started Button</label>
                        <input type="text" name="btn_get" class="form-input" value="<?php echo htmlspecialchars($hero_data['btn_get']); ?>" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Find Courses Button</label>
                        <input type="text" name="btn_find" class="form-input" value="<?php echo htmlspecialchars($hero_data['btn_find']); ?>" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Hero Image URL</label>
                        <input type="url" name="image" class="form-input" value="<?php echo htmlspecialchars($hero_data['image']); ?>" required>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                        <textarea name="subtitle" rows="4" class="form-input" required><?php echo htmlspecialchars($hero_data['subtitle']); ?></textarea>
                    </div>
                    <div class="md:col-span-2 text-center">
                        <button type="submit" class="btn-save">
                            Save Changes
                        </button>
                    </div>
                </div>

                <!-- Live Preview -->
                <div class="preview-card">
                    <h1 class="text-4xl font-bold mb-3" style="background: linear-gradient(90deg, #fff, #00E5FF); -webkit-background-clip: text; color: transparent;">
                        <?php echo htmlspecialchars($hero_data['title']); ?>
                    </h1>
                    <p class="text-lg opacity-90 mb-5"><?php echo htmlspecialchars($hero_data['subtitle']); ?></p>
                    <div class="flex flex-wrap gap-3">
                        <a href="#" class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-6 py-3 rounded-full font-semibold shadow-lg hover:scale-105 transition">
                            <?php echo htmlspecialchars($hero_data['btn_get']); ?>
                        </a>
                        <a href="#" class="border-2 border-cyan-400 text-cyan-400 px-6 py-3 rounded-full font-semibold hover:bg-cyan-400 hover:text-black transition">
                            <?php echo htmlspecialchars($hero_data['btn_find']); ?>
                        </a>
                    </div>
                    <img src="<?php echo htmlspecialchars($hero_data['image']); ?>" alt="Preview" class="mt-6 rounded-xl w-full max-w-sm mx-auto shadow-2xl">
                </div>
            </form>
        </div>
    </div>

    <?php include "include/footer.php"; ?>
</body>
</html>