<?php
// ==========================================
// KONFIGURASI DATABASE MYSQL (HOSTING ANDA)
// ==========================================
// Ganti bagian ini dengan detail database yang Anda buat di cPanel hosting Anda
$db_host = 'localhost';
$db_name = 'ttmhostweb_makutarama';

$db_user = 'root'; // Menggunakan root untuk lokal XAMPP
$db_pass = ''; // Kosongkan password untuk lokal XAMPP

$admin_password_rahasia = 'admin073'; // Password untuk masuk ke Dashboard Admin

// ==========================================
// API BACKEND (MENANGANI SIMPAN & AMBIL DATA)
// ==========================================
if (isset($_GET['action'])) {
  header('Content-Type: application/json');
  try {
    // Koneksi ke Database menggunakan PDO
    $pdo = new PDO("mysql:host=$db_host", $db_user, $db_pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Buat database jika belum ada
    $pdo->exec("CREATE DATABASE IF NOT EXISTS `$db_name` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci");
    $pdo->exec("USE `$db_name`");

    // Otomatis membuat tabel jika belum ada di database
    $pdo->exec("CREATE TABLE IF NOT EXISTS makutarama_settings (
            setting_key VARCHAR(100) PRIMARY KEY,
            setting_value LONGTEXT
        )");

    // API untuk mengambil data ke website
    if ($_GET['action'] == 'get_data') {
      $stmt = $pdo->query("SELECT setting_key, setting_value FROM makutarama_settings");
      $data = [];
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $data[$row['setting_key']] = json_decode($row['setting_value'], true);
      }
      echo json_encode($data);
      exit;
    }

    // API untuk menangani upload gambar
    if ($_GET['action'] == 'upload_image') {
      if (!isset($_FILES['image'])) {
        echo json_encode(['success' => false, 'message' => 'No image uploaded']);
        exit;
      }

      $upload_dir = 'uploads/';
      if (!is_dir($upload_dir)) {
        mkdir($upload_dir, 0777, true);
      }

      $file = $_FILES['image'];
      $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
      $filename = time() . '_' . uniqid() . '.' . $ext;
      $target_file = $upload_dir . $filename;

      if (move_uploaded_file($file['tmp_name'], $target_file)) {
        echo json_encode(['success' => true, 'url' => $target_file]);
      }
      else {
        echo json_encode(['success' => false, 'message' => 'Failed to move uploaded file']);
      }
      exit;
    }

    // API untuk menyimpan data dari Admin
    if ($_GET['action'] == 'save_data') {
      $input = json_decode(file_get_contents('php://input'), true);

      // Verifikasi Password Admin
      if (!isset($input['admin_pass']) || $input['admin_pass'] !== $admin_password_rahasia) {
        echo json_encode(['success' => false, 'message' => 'Unauthorized']);
        exit;
      }

      $cmsData = $input['data'];
      $stmt = $pdo->prepare("REPLACE INTO makutarama_settings (setting_key, setting_value) VALUES (?, ?)");

      foreach ($cmsData as $key => $value) {
        // Simpan setiap pengaturan sebagai string JSON agar tipe datanya tetap utuh
        $stmt->execute([$key, json_encode($value)]);
      }

      echo json_encode(['success' => true]);
      exit;
    }
  }
  catch (PDOException $e) {
    // Jika gagal konek ke database
    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
    exit;
  }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Makutarama Tolerun #2 073</title>
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- FontAwesome Icons CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- React & ReactDOM CDN -->
    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
    
    <!-- Babel CDN (Untuk kompilasi JSX di browser) -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <style>
        body { margin: 0; padding: 0; font-family: sans-serif; background-color: #f8fafc; }
        #root { min-height: 100vh; }
        /* Mencegah scroll horisontal */
        html, body { overflow-x: hidden; }
        
        /* Animasi Pop-up Elegant */
        @keyframes slideIn {
          from { transform: translateX(100%) translateY(-50%); opacity: 0; }
          to { transform: translateX(0) translateY(-0%); opacity: 1; }
        }
        @keyframes fadeOut {
          from { opacity: 1; }
          to { opacity: 0; }
        }
        .animate-toast {
          animation: slideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        @keyframes pulse-wa {
          0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
          70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
          100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
        }
        .animate-wa {
          animation: pulse-wa 2s infinite;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- Loading Screen Sementara -->
        <div style="display: flex; height: 100vh; align-items: center; justify-content: center; background-color: #020617; color: white;">
            <div style="text-align: center;">
                <i class="fa-solid fa-spinner fa-spin fa-3x" style="color: #22c55e;"></i>
                <p style="margin-top: 1rem; font-family: sans-serif;">Memuat Website...</p>
            </div>
        </div>
    </div>

    <script type="text/babel">
        const { useState, useEffect } = React;

        // Default Data jika Database Kosong
        const defaultCMSData = {
          eventDate: "Minggu, 5 Juli 2026",
          location: "Korem Makutarama 073, Salatiga",
          aboutText: "Melalui Makutarama Tolerun #2 073, kami mengajak seluruh elemen masyarakat untuk berlari bersama, melangkah seirama dalam semangat persatuan. Olahraga adalah bahasa universal yang menyatukan segala perbedaan.",
          heroImage: "https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&q=80",
          price3K_EB: 130000,
          price3K_Reg: 150000,
          price3K_Couple: 280000,
          price3K_Family: 360000,
          price7K_EB: 170000,
          price7K_Reg: 200000,
          price7K_Couple: 380000,
          price7K_Family: 550000,
          bannerActive: false,
          bannerText: "Tiket Early Bird Sisa 50! Segera Daftar Sekarang!",
          sponsors: [],
          heroImage: "https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&q=80",
          routeMap3K: "uploads/map_3k.jpg",
          routeMap7K: "uploads/map_7k.jpg",
          routeTitle: "Rute Lintasan",
          routeSubtitle: "Jelajahi keindahan kota Salatiga melalui lintasan lari yang telah kami siapkan untuk kategori 3K dan 7K.",
          routeDesc3K: "Rute yang ramah bagi keluarga dan pelari pemula menikmati suasana pusat kota.",
          routeDesc7K: "Tantangan bagi pelari yang ingin merasakan variasi elevasi unik kota Salatiga.",
          navLinks: [
            { id: 1, label: "Beranda", url: "#beranda" },
            { id: 2, label: "Tentang", url: "#tentang" },
            { id: 3, label: "Kategori & Tiket", url: "#kategori" },
            { id: 4, label: "Sponsor", url: "#sponsor" },
            { id: 5, label: "Venue & Lokasi", url: "#venue" }
          ],
          registerBtn: { label: "Daftar Sekarang", url: "#" },
          whatsappNumber: "085177172779",
          jerseyChart: "uploads/jersey_chart.jpg",
          venueAddress: "Jl. Diponegoro No.38, Sidorejo Lor, Kec. Sidorejo, Kota Salatiga, Jawa Tengah 50714",
          venueMapsUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2570.9761057135893!2d110.50029792114967!3d-7.322143595577085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a786c0396d53d%3A0x6da375586a35723e!2sKorem%20073%2FMakutarama!5e1!3m2!1sid!2sid!4v1773391513157!5m2!1sid!2sid",
          siteLogo: "",
          link3K: "#",
          link7K: "#",
          benefits3K: "Jersey Makutarama\nMedali Finisher\nBIB Number\nWater Station\nRefreshment\nKupon Doorprize",
          benefits7K: "Jersey Makutarama\nMedali Finisher\nBIB Number\nWater Station\nRefreshment\nKupon Doorprize"
        };

        // ==========================================
        // UI COMPONENTS
        // ==========================================
        const SectionDivider = () => (
          <div className="w-full relative flex justify-center py-2">
            <div className="w-[80%] h-[1px] bg-gradient-to-r from-transparent via-[#16a34a] via-[#eab308] via-[#16a34a] to-transparent opacity-60"></div>
          </div>
        );

        const VenueSection = ({ cmsData }) => (
          <section id="venue" className="py-24 bg-slate-950 relative overflow-hidden">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
              <div className="text-center mb-16">
                <h2 className="text-4xl md:text-5xl font-extrabold mb-4 text-white">Venue & <span className="text-green-500">Lokasi</span></h2>
                <p className="text-slate-400 max-w-2xl mx-auto font-medium">
                  {cmsData.venueAddress || 'Jl. Diponegoro No.38, Sidorejo Lor, Kec. Sidorejo, Kota Salatiga, Jawa Tengah 50714'}
                </p>
              </div>
              
              <div className="relative group max-w-5xl mx-auto">
                {/* Emerald Glow Background */}
                <div className="absolute -inset-1 bg-gradient-to-r from-green-600/20 to-emerald-600/20 rounded-3xl blur-2xl opacity-50 group-hover:opacity-100 transition duration-1000"></div>
                
                <div className="relative rounded-3xl overflow-hidden border border-slate-800 bg-slate-900 shadow-2xl h-[500px]">
                  {/* Map Iframe with Native Pin */}
                  <iframe 
                    src={cmsData.venueMapsUrl || "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2570.9761057135893!2d110.50029792114967!3d-7.322143595577085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a786c0396d53d%3A0x6da375586a35723e!2sKorem%20073%2FMakutarama!5e1!3m2!1sid!2sid!4v1773391513157!5m2!1sid!2sid"} 
                    width="100%" 
                    height="100%" 
                    style={{ border: 0 }} 
                    allowFullScreen={true} 
                    loading="lazy"
                    className="grayscale-[20%] contrast-[110%] group-hover:grayscale-0 transition-all duration-1000"
                  ></iframe>

                  {/* Elegant Floating Card */}
                  <div className="absolute top-8 left-8 z-20 bg-slate-950/80 backdrop-blur-xl border border-white/10 p-6 rounded-2xl shadow-2xl max-w-[300px] hidden md:block transform transition-all duration-500 group-hover:translate-x-2">
                    <div className="flex items-center gap-4 mb-4">
                      <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white shadow-lg shadow-green-500/30">
                        <i class="fa-solid fa-location-dot text-xl"></i>
                      </div>
                      <div>
                        <h4 className="font-bold text-white tracking-tight">Titik Kumpul</h4>
                        <p className="text-[10px] text-green-400 font-black uppercase tracking-widest">Korem Makutarama</p>
                      </div>
                    </div>
                    <p className="text-xs text-slate-300 leading-relaxed font-medium mb-5">
                      {cmsData.venueAddress}
                    </p>
                    <a 
                      href="https://maps.app.goo.gl/MecMUJ5tAsjJY9qHA" 
                      target="_blank"
                      className="block w-full text-center py-2.5 bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold rounded-xl transition-all border border-white/5 active:scale-95"
                    >
                      Buka Navigasi Lengkap
                    </a>
                  </div>

                  {/* PULSING MARKER REMOVED - Using native map pin instead for better interactivity */}

                  {/* Map Overlay Gradient for Smooth Fading */}
                  <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-slate-950 to-transparent pointer-events-none"></div>
                </div>
              </div>
              
            </div>
          </section>
        );

        // ==========================================
        // MAIN APP COMPONENT
        // ==========================================
        function MakutaramaApp() {
          const [currentView, setCurrentView] = useState('landing'); 
          const [cmsData, setCmsData] = useState(defaultCMSData);
          const [adminToken, setAdminToken] = useState('');

          // 1. Cek URL untuk rute /admin dan Fetch Data dari SQL Database
          useEffect(() => {
            const path = window.location.pathname.replace(/\/$/, '');
            const isRequestingAdmin = path.endsWith('/admin') || window.location.search.includes('admin') || window.location.hash.includes('admin');
            
            if (isRequestingAdmin) {
                // Jika ingin masuk admin, baru cek token login
                const savedToken = localStorage.getItem('makutarama_admin_token');
                if (savedToken === 'admin073') {
                    setAdminToken(savedToken);
                    setCurrentView('admin_dashboard');
                } else {
                    setCurrentView('admin_login');
                }
            } else {
                // Jika akses web biasa, pastikan lihat landing page
                setCurrentView('landing');
            }

            // Ambil Data dari MySQL (via API PHP)
            fetch('?action=get_data')
                .then(res => res.json())
                .then(data => {
                    if (data && Object.keys(data).length > 0) {
                        setCmsData({ ...defaultCMSData, ...data });
                    }
                })
                .catch(err => {
                    console.error("Gagal terhubung ke Database SQL:", err);
                });
          }, []);

          // 2. Fungsi Kirim Data ke MySQL
          const handleSaveCMSData = async (newData) => {
            try {
              const response = await fetch('?action=save_data', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ admin_pass: adminToken, data: newData })
              });
              const result = await response.json();
              if(result.success) {
                  setCmsData(newData);
                  return true;
              }
              return false;
            } catch (err) {
              console.error("Save Error:", err);
              return false;
            }
          };

          return (
            <div className="min-h-screen w-full font-sans text-slate-900 bg-slate-50">
              {currentView === 'landing' && <LandingPage onNavigate={setCurrentView} cmsData={cmsData} />}
              {currentView === 'admin_login' && <AdminLogin onNavigate={setCurrentView} setAdminToken={setAdminToken} />}
              {currentView === 'admin_dashboard' && <AdminDashboard onNavigate={setCurrentView} cmsData={cmsData} onSaveCMS={handleSaveCMSData} />}
            </div>
          );
        }

        // ==========================================
        // ADMIN LOGIN
        // ==========================================
        function AdminLogin({ onNavigate, setAdminToken }) {
          const [password, setPassword] = useState('');
          const [error, setError] = useState('');

          const handleLogin = (e) => {
            e.preventDefault();
            // Disini pengecekan sederhana, verifikasi ketat dilakukan saat menyimpan data di server PHP
            if (password === 'admin073') {
              localStorage.setItem('makutarama_admin_token', password);
              setAdminToken(password);
              onNavigate('admin_dashboard');
            }
            else {
              setError('Password salah. Silakan coba lagi.');
              setPassword('');
            }
          };

          return (
            <div className="min-h-screen flex items-center justify-center bg-slate-950 relative overflow-hidden text-slate-50">
              <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-green-900/20 to-transparent pointer-events-none"></div>
              <div className="absolute bottom-0 left-0 w-96 h-96 bg-green-600/10 rounded-full blur-[100px] pointer-events-none"></div>

              <div className="bg-slate-900 border border-slate-700 p-8 rounded-2xl shadow-2xl w-full max-w-md z-10">
                <div className="text-center mb-8">
                  <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-[0_0_15px_rgba(34,197,94,0.5)]">
                    <i className="fa-solid fa-lock text-white text-2xl"></i>
                  </div>
                  <h2 className="text-2xl font-bold">Admin Portal</h2>
                  <p className="text-slate-400 text-sm mt-1">Sistem Database SQL</p>
                </div>

                {error && (
                  <div className="mb-4 p-3 bg-red-500/10 border border-red-500/50 rounded-lg flex items-center gap-2 text-red-400 text-sm">
                    <i className="fa-solid fa-circle-exclamation"></i> {error}
                  </div>
                )}

                <form onSubmit={handleLogin} className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-300 mb-2">Password Akses</label>
                    <input 
                      type="password" value={password} onChange={(e) => setPassword(e.target.value)}
                      className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-500 text-white"
                      placeholder="Masukkan password..." autoFocus
                    />
                  </div>
                  <button type="submit" className="w-full py-3 bg-gradient-to-r from-green-600 to-green-500 hover:from-green-500 hover:to-green-400 rounded-xl font-bold text-white shadow-lg shadow-green-500/20 transition-all hover:-translate-y-0.5">
                    Masuk ke Dashboard
                  </button>
                </form>

                <button onClick={() => onNavigate('landing')} className="w-full mt-6 text-sm text-slate-400 hover:text-white transition-colors flex items-center justify-center gap-2">
                   Kembali ke Website Utama
                </button>
              </div>
            </div>
          );
        }

        // ==========================================
        // LANDING PAGE
        // ==========================================
        function LandingPage({ onNavigate, cmsData }) {
          const [isMenuOpen, setIsMenuOpen] = useState(false);
          const [scrolled, setScrolled] = useState(false);

          useEffect(() => {
            const handleScroll = () => setScrolled(window.scrollY > 50);
            window.addEventListener('scroll', handleScroll);
            return () => window.removeEventListener('scroll', handleScroll);
          }, []);

          const scrollToSection = (id) => {
            // Coba cari ID asli, jika gagal coba versi lowercase (agar #Rute dan #rute sama saja)
            let element = document.getElementById(id);
            if (!element) element = document.getElementById(id.toLowerCase());
            
            if (element) {
              element.scrollIntoView({ behavior: 'smooth' });
              setIsMenuOpen(false);
            }
          };

          const formatWhatsAppLink = (input) => {
            if (!input) return "";
            // Jika user memasukkan link lengkap wa.me atau https://wa.me, gunakan langsung
            if (input.includes("wa.me")) {
              return input.startsWith("http") ? input : `https://${input}`;
            }
            // Bersihkan dari karakter non-digit
            let cleaned = input.replace(/[^0-9]/g, '');
            // Jika diawali dengan 0, ubah ke 62 (format internasional Indonesia)
            if (cleaned.startsWith('0')) {
              cleaned = '62' + cleaned.substring(1);
            }
            return `https://wa.me/${cleaned}`;
          };

          const formatRupiah = (angka) => {
            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(angka);
          };

          return (
            <div className="bg-slate-950 text-slate-50 min-h-screen w-full selection:bg-green-500 selection:text-white">
              
              {cmsData.bannerActive && (
                <div className="bg-yellow-400 text-slate-900 py-2 px-4 text-center font-bold text-sm z-[60] relative">
                  {cmsData.bannerText}
                </div>
              )}

              <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-slate-950/90 backdrop-blur-md shadow-lg py-3' : 'bg-transparent py-5'} ${cmsData.bannerActive && !scrolled ? 'top-8' : 'top-0'}`}>
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                  <div className="flex justify-between items-center">
                    <div className="flex items-center gap-3">
                      {cmsData.siteLogo ? (
                        <div className="flex items-center">
                          <img 
                            src={cmsData.siteLogo} 
                            alt="Makutarama Logo" 
                            className={`transition-all duration-500 ${scrolled ? 'h-14 md:h-16' : 'h-28 md:h-32'}`}
                            style={{ maxWidth: '400px', objectFit: 'contain' }}
                          />
                        </div>
                      ) : (
                        <React.Fragment>
                          <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-yellow-500 rounded-full flex items-center justify-center font-bold text-white shadow-[0_0_15px_rgba(34,197,94,0.5)]">
                            MT
                          </div>
                          <div className="font-extrabold text-xl tracking-tight leading-none">
                            <span className="text-white">Makutarama</span><br/>
                            <span className="text-green-500">Tolerun <span className="text-yellow-400">#2</span></span>
                          </div>
                        </React.Fragment>
                      )}
                    </div>

                    <div className="hidden md:flex items-center space-x-8 font-medium text-sm">
                      {(cmsData.navLinks || []).map(link => (
                        <button 
                          key={link.id} 
                          onClick={() => link.url.startsWith('#') ? scrollToSection(link.url.substring(1)) : window.location.href = link.url} 
                          className="relative group py-1 text-white/90 hover:text-green-400 transition-all duration-300 font-bold uppercase tracking-wide"
                        >
                          {link.label}
                          <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-gradient-to-r from-green-500 to-yellow-400 transition-all duration-300 group-hover:w-full"></span>
                        </button>
                      ))}
                      <button 
                        onClick={() => cmsData.registerBtn?.url.startsWith('#') ? scrollToSection(cmsData.registerBtn.url.substring(1)) : window.location.href = (cmsData.registerBtn?.url || '#')}
                        className="bg-gradient-to-r from-green-600 to-green-500 hover:from-green-500 hover:to-green-400 text-white px-6 py-2.5 rounded-full font-bold shadow-lg shadow-green-500/30 transition-all hover:-translate-y-0.5"
                      >
                        {cmsData.registerBtn?.label || 'Daftar Sekarang'}
                      </button>
                    </div>

                    <div className="md:hidden">
                      <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-white hover:text-green-400">
                        <i className={`fa-solid ${isMenuOpen ? 'fa-xmark' : 'fa-bars'} text-2xl`}></i>
                      </button>
                    </div>
                  </div>
                </div>

                {isMenuOpen && (
                  <div className="md:hidden absolute top-full left-0 w-full bg-slate-900 border-t border-slate-800 shadow-xl">
                    <div className="flex flex-col px-4 py-6 space-y-4 font-medium">
                      {(cmsData.navLinks || []).map(link => (
                        <button 
                          key={link.id} 
                          onClick={() => link.url.startsWith('#') ? scrollToSection(link.url.substring(1)) : window.location.href = link.url} 
                          className="text-left w-full"
                        >
                          {link.label}
                        </button>
                      ))}
                      <button 
                        onClick={() => cmsData.registerBtn?.url.startsWith('#') ? scrollToSection(cmsData.registerBtn.url.substring(1)) : window.location.href = (cmsData.registerBtn?.url || '#')}
                        className="bg-green-600 text-white px-4 py-3 rounded-lg font-bold w-full mt-4"
                      >
                        {cmsData.registerBtn?.label || 'Daftar Sekarang'}
                      </button>
                    </div>
                  </div>
                )}
              </nav>

              <section id="beranda" className="relative min-h-screen flex items-center pt-20">
                <div className="absolute inset-0 z-0">
                  <img src={cmsData.heroImage} alt="Runners silhouette" className="w-full h-full object-cover" />
                  <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/90 to-slate-950/40"></div>
                  <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-green-600/20 rounded-full blur-[100px] pointer-events-none"></div>
                </div>

                <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
                  <div className="max-w-3xl">
                    <div className="inline-block px-4 py-1.5 rounded-full bg-slate-800/80 border border-green-500/30 text-green-400 text-sm font-semibold mb-6 backdrop-blur-sm">
                      <span className="text-yellow-400 mr-2">★</span> Event Lari Terbesar di Salatiga
                    </div>
                    <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-4 leading-tight">
                      Makutarama <br/>
                      <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-yellow-400">
                        Tolerun #2 073
                      </span>
                    </h1>
                    <p className="text-xl md:text-2xl text-slate-300 font-light mb-8 italic">
                      "#RunforUnity - Bersama Kita Berlari, Bersatu Kita Kuat"
                    </p>
                    
                    <div className="flex flex-col sm:flex-row gap-6 mb-10">
                      <div className="flex items-center gap-3 bg-slate-900/60 p-4 rounded-xl border border-slate-700 backdrop-blur-sm">
                        <i className="fa-regular fa-calendar-check text-yellow-400 text-3xl"></i>
                        <div>
                          <p className="text-xs text-slate-400 uppercase font-semibold">Tanggal Pelaksanaan</p>
                          <p className="font-bold text-lg">{cmsData.eventDate}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3 bg-slate-900/60 p-4 rounded-xl border border-slate-700 backdrop-blur-sm">
                        <i className="fa-solid fa-location-dot text-green-400 text-3xl"></i>
                        <div>
                          <p className="text-xs text-slate-400 uppercase font-semibold">Lokasi Event</p>
                          <p className="font-bold text-lg">{cmsData.location}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              <SectionDivider />

              <section id="tentang" className="py-24 bg-slate-900 relative">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    <div className="relative group">
                      <div className="absolute -inset-4 bg-gradient-to-r from-green-600 to-yellow-500 rounded-2xl blur-lg opacity-30 group-hover:opacity-50 transition duration-500"></div>
                      <div className="relative rounded-2xl overflow-hidden border-2 border-slate-700 aspect-[4/5] bg-slate-800 flex items-center justify-center">
                        <img src="image_d873be.jpg" alt="Poster Makutarama" className="w-full h-full object-cover opacity-80" />
                      </div>
                    </div>

                    <div>
                      <h2 className="text-4xl font-extrabold mb-6">Tentang <span className="text-green-500">Event</span></h2>
                      <div className="space-y-6 text-slate-300 text-lg leading-relaxed">
                        <p>{cmsData.aboutText}</p>
                        <p>Event ini bukan sekadar ajang kompetisi lari biasa, melainkan sebuah manifestasi nyata dari nilai-nilai toleransi dan kebhinekaan yang mengakar kuat di Salatiga dan Indonesia.</p>
                        <div className="flex items-center gap-4 mt-8 pt-6 border-t border-slate-700">
                          <div className="w-16 h-16 rounded-full bg-slate-800 border-2 border-yellow-500 flex items-center justify-center">
                            <i className="fa-solid fa-circle-check text-green-400 text-3xl"></i>
                          </div>
                          <div>
                            <h4 className="font-bold text-white">Misi Kami</h4>
                            <p className="text-sm">Memupuk toleransi & persatuan melalui olahraga</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              <SectionDivider />

              <section id="kategori" className="py-24 bg-slate-950 relative overflow-hidden">
                <div className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-green-900/20 to-transparent pointer-events-none"></div>

                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                  <div className="text-center mb-16">
                    <h2 className="text-4xl md:text-5xl font-extrabold mb-4">Kategori & <span className="text-yellow-400">Harga Tiket</span></h2>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
                    {/* 3K CARD */}
                    <div className="bg-slate-900 rounded-3xl border border-slate-700 overflow-hidden relative shadow-2xl">
                      <div className="h-2 w-full bg-gradient-to-r from-green-400 to-white"></div>
                      <div className="p-8 relative">
                        <h3 className="text-3xl font-black text-white mb-2">Fun Run 3K</h3>
                        <p className="text-green-400 font-medium mb-8">Cocok untuk pemula & keluarga</p>
                        <div className="space-y-4 mb-8">
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Early Bird</span><span className="text-xl font-bold text-white">{formatRupiah(cmsData.price3K_EB)}</span>
                          </div>
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Regular</span><span className="text-xl font-bold text-white">{formatRupiah(cmsData.price3K_Reg)}</span>
                          </div>
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Couple Pack (2 Pax)</span><span className="text-xl font-bold text-green-400">{formatRupiah(cmsData.price3K_Couple)}</span>
                          </div>
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Family Pack (3 Pax)</span><span className="text-xl font-bold text-yellow-400">{formatRupiah(cmsData.price3K_Family)}</span>
                          </div>
                        </div>

                        {/* BENEFITS LIST */}
                        <div className="mb-8 space-y-3">
                          <p className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Apa yang Anda dapatkan:</p>
                          {(cmsData.benefits3K || "").split('\n').filter(item => item.trim() !== "").map((benefit, idx) => (
                            <div key={idx} className="flex items-start gap-3 text-sm text-slate-300">
                              <i className="fa-solid fa-circle-check text-green-500 mt-1"></i>
                              <span>{benefit}</span>
                            </div>
                          ))}
                        </div>
                        <a 
                          href={cmsData.link3K || "#"} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          className="block w-full py-4 rounded-xl bg-slate-800 hover:bg-green-600 text-white font-bold transition-colors text-center"
                        >
                          Pilih Kategori 3K
                        </a>
                      </div>
                    </div>

                    {/* 7K CARD */}
                    <div className="bg-slate-900 rounded-3xl border border-slate-700 overflow-hidden relative shadow-2xl md:scale-105 z-10">
                      <div className="absolute top-4 right-4 bg-yellow-400 text-slate-900 text-xs font-bold px-3 py-1 rounded-full">BEST SELLER</div>
                      <div className="h-2 w-full bg-gradient-to-r from-green-700 to-yellow-400"></div>
                      <div className="p-8 relative">
                        <h3 className="text-3xl font-black text-white mb-2">Challenge 7K</h3>
                        <p className="text-yellow-400 font-medium mb-8">Uji ketahanan & semangatmu</p>
                        <div className="space-y-4 mb-8">
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Early Bird</span><span className="text-xl font-bold text-white">{formatRupiah(cmsData.price7K_EB)}</span>
                          </div>
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Regular</span><span className="text-xl font-bold text-white">{formatRupiah(cmsData.price7K_Reg)}</span>
                          </div>
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Couple Pack (2 Pax)</span><span className="text-xl font-bold text-green-400">{formatRupiah(cmsData.price7K_Couple)}</span>
                          </div>
                          <div className="flex justify-between items-center pb-4 border-b border-slate-800">
                            <span className="text-slate-400">Family Pack (3 Pax)</span><span className="text-xl font-bold text-yellow-400">{formatRupiah(cmsData.price7K_Family)}</span>
                          </div>
                        </div>

                        {/* BENEFITS LIST */}
                        <div className="mb-8 space-y-3">
                          <p className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Apa yang Anda dapatkan:</p>
                          {(cmsData.benefits7K || "").split('\n').filter(item => item.trim() !== "").map((benefit, idx) => (
                            <div key={idx} className="flex items-start gap-3 text-sm text-slate-300">
                              <i className="fa-solid fa-circle-check text-yellow-500 mt-1"></i>
                              <span>{benefit}</span>
                            </div>
                          ))}
                        </div>
                        <a 
                          href={cmsData.link7K || "#"} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          className="block w-full py-4 rounded-xl bg-gradient-to-r from-green-600 to-yellow-500 hover:from-green-500 hover:to-yellow-400 text-white font-bold transition-all text-center"
                        >
                          Pilih Kategori 7K
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              <SectionDivider />

              {/* JERSEY SECTION */}
              <section id="official" className="py-24 bg-slate-950">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                  <div className="text-center mb-16">
                    <h2 className="text-4xl md:text-5xl font-extrabold text-white mb-4">Official <span className="text-green-500">Jersey</span></h2>
                    <p className="text-slate-400 max-w-2xl mx-auto font-medium">Kenakan kebanggaanmu! Jersey Makutarama Tolerun #2 didesain untuk kenyamanan maksimal dengan bahan premium.</p>
                  </div>
                  
                  <div className="flex justify-center">
                    <div className="relative group max-w-4xl w-full">
                      <div className="absolute -inset-1 bg-gradient-to-r from-green-600 to-emerald-600 rounded-[2rem] blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
                      <div className="relative bg-slate-900 rounded-[2rem] overflow-hidden shadow-2xl border border-slate-800">
                         {cmsData.jerseyChart ? (
                           <img src={cmsData.jerseyChart} alt="Jersey Size Chart" className="w-full h-auto" />
                         ) : (
                           <div className="py-20 text-center text-slate-500 italic font-medium">Gambar Jersey Chart belum diunggah</div>
                         )}
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              <SectionDivider />

              {/* SEKSI RUTE PETA */}
              <section id="rute" className="py-24 bg-slate-900 relative overflow-hidden">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                  <div className="text-center mb-16">
                    <h2 className="text-4xl md:text-5xl font-extrabold mb-4">{cmsData.routeTitle || 'Rute Lintasan'}</h2>
                    <p className="text-slate-400 max-w-2xl mx-auto">{cmsData.routeSubtitle || 'Jelajahi keindahan kota Salatiga melalu lintasan lari...'}</p>
                  </div>

                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
                    {/* RUTE 3K */}
                    <div className="group text-center lg:text-left">
                      <div className="relative overflow-hidden rounded-3xl border border-slate-700 bg-slate-950 p-4 transition-all duration-500 hover:border-green-500/50 hover:shadow-[0_0_30px_rgba(34,197,94,0.1)]">
                        <div className="flex items-center justify-between mb-4 px-2">
                          <h3 className="text-2xl font-bold text-white">Rute <span className="text-green-400">3K</span></h3>
                          <span className="px-3 py-1 bg-green-500/10 text-green-400 text-xs font-bold rounded-full border border-green-500/20">FUN RUN</span>
                        </div>
                        <div className="relative aspect-[4/5] rounded-2xl overflow-hidden bg-slate-900 flex items-center justify-center mb-4">
                          {cmsData.routeMap3K ? (
                            <img src={cmsData.routeMap3K} alt="Map 3K" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                          ) : (
                            <div className="text-slate-600 italic">Peta belum diunggah</div>
                          )}
                        </div>
                        <p className="text-slate-400 text-sm px-2 mb-2 leading-relaxed">{cmsData.routeDesc3K}</p>
                      </div>
                    </div>

                    {/* RUTE 7K */}
                    <div className="group text-center lg:text-left">
                      <div className="relative overflow-hidden rounded-3xl border border-slate-700 bg-slate-950 p-4 transition-all duration-500 hover:border-yellow-500/50 hover:shadow-[0_0_30px_rgba(234,179,8,0.1)]">
                        <div className="flex items-center justify-between mb-4 px-2">
                          <h3 className="text-2xl font-bold text-white">Rute <span className="text-yellow-400">7K</span></h3>
                          <span className="px-3 py-1 bg-yellow-500/10 text-yellow-400 text-xs font-bold rounded-full border border-yellow-500/20">CHALLENGE</span>
                        </div>
                        <div className="relative aspect-[4/5] rounded-2xl overflow-hidden bg-slate-900 flex items-center justify-center mb-4">
                          {cmsData.routeMap7K ? (
                            <img src={cmsData.routeMap7K} alt="Map 7K" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                          ) : (
                            <div className="text-slate-600 italic">Peta belum diunggah</div>
                          )}
                        </div>
                        <p className="text-slate-400 text-sm px-2 mb-2 leading-relaxed">{cmsData.routeDesc3K}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </section>

              <SectionDivider />

              <VenueSection cmsData={cmsData} />

              <SectionDivider />

              {/* SEKSI SPONSOR */}
              {cmsData.sponsors && cmsData.sponsors.length > 0 && (
                <section id="sponsor" className="py-20 bg-slate-950 border-t border-slate-800">
                  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                    <p className="text-sm font-bold tracking-widest text-slate-500 uppercase mb-10">Didukung Oleh</p>
                    <div className="flex flex-wrap justify-center items-center gap-10 md:gap-16">
                      {cmsData.sponsors.map(sponsor => (
                        <div key={sponsor.id} className="relative group">
                          <img 
                            src={sponsor.url} 
                            alt="Sponsor Logo" 
                            className="h-16 md:h-20 object-contain filter grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-300" 
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                </section>
              )}

                {cmsData.whatsappNumber && (
                  <a 
                    href={formatWhatsAppLink(cmsData.whatsappNumber)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="fixed bottom-8 right-8 z-[90] flex items-center justify-center w-16 h-16 bg-green-500 text-white rounded-full shadow-2xl hover:bg-green-600 transition-all hover:scale-110 group animate-wa"
                    title="Hubungi Kami via WhatsApp"
                  >
                    <i className="fa-brands fa-whatsapp text-3xl"></i>
                    <span className="absolute right-full mr-4 px-4 py-2 bg-slate-900 text-white text-xs font-bold rounded-lg opacity-0 translate-x-4 pointer-events-none transition-all group-hover:opacity-100 group-hover:translate-x-0 whitespace-nowrap shadow-xl">
                      Butuh Bantuan? Chat Kami!
                    </span>
                  </a>
                )}

              <footer className="bg-slate-900 py-6 border-t border-slate-800">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                  <div className="flex flex-col items-center justify-center gap-4 text-sm text-slate-500 text-center">
                    <p>Copyright © 2026 Makutarama Tolerun. All rights reserved.</p>
                  </div>
                </div>
              </footer>
            </div>
          );
        }

        // ==========================================
        // ADMIN DASHBOARD
        // ==========================================
        function AdminDashboard({ onNavigate, cmsData, onSaveCMS }) {
          const [activeTab, setActiveTab] = useState('cms');
          const [formData, setFormData] = useState({ ...cmsData });
          const [isSaving, setIsSaving] = useState(false);
          const [saveMessage, setSaveMessage] = useState({ type: '', text: '' });

          useEffect(() => setFormData({ ...cmsData }), [cmsData]);

          const handleChange = (e) => {
            const { name, value, type, checked } = e.target;
            setFormData({ ...formData, [name]: type === 'checkbox' ? checked : (type === 'number' ? Number(value) : value) });
          };

          const handleSave = async () => {
            setIsSaving(true);
            const success = await onSaveCMS(formData);
            if (success) setSaveMessage({ type: 'success', text: 'Tersimpan & Live di Web!' });
            else setSaveMessage({ type: 'error', text: 'Gagal Menyimpan. Periksa kredensial Database.' });
            setIsSaving(false);
            setTimeout(() => setSaveMessage({ type: '', text: '' }), 4000);
          };

          // Handle Upload Logo Website
          const handleLogoUpload = async (e) => {
            const file = e.target.files[0];
            if (!file) return;

            setIsSaving(true);
            const formDataUpload = new FormData();
            formDataUpload.append('image', file);

            try {
                const response = await fetch('?action=upload_image', {
                    method: 'POST',
                    body: formDataUpload
                });
                const result = await response.json();
                
                if (result.success) {
                    setFormData(prev => ({ ...prev, siteLogo: result.url }));
                    setSaveMessage({ type: 'success', text: 'Logo berhasil diperbarui!' });
                } else {
                    setSaveMessage({ type: 'error', text: result.message || 'Gagal mengunggah logo.' });
                }
            } catch (err) {
                console.error("Logo Upload Error:", err);
                setSaveMessage({ type: 'error', text: 'Gagal menghubungi server.' });
            } finally {
                setIsSaving(false);
                setTimeout(() => setSaveMessage({ type: '', text: '' }), 4000);
            }
          };

          // Handle Upload Logo Sponsor
          const handleFileUpload = async (e) => {
            const file = e.target.files[0];
            if (!file) return;

            // Batasi ukuran file 2MB
            if (file.size > 2 * 1024 * 1024) {
                setSaveMessage({ type: 'error', text: 'Ukuran logo maksimal 2MB.' });
                setTimeout(() => setSaveMessage({ type: '', text: '' }), 4000);
                e.target.value = ''; 
                return;
            }

            setIsSaving(true);
            const formDataUpload = new FormData();
            formDataUpload.append('image', file);

            try {
                const response = await fetch('?action=upload_image', {
                    method: 'POST',
                    body: formDataUpload
                });
                const result = await response.json();
                
                if (result.success) {
                    const newSponsor = { id: Date.now(), url: result.url };
                    setFormData(prev => ({
                        ...prev,
                        sponsors: [...(prev.sponsors || []), newSponsor]
                    }));
                    setSaveMessage({ type: 'success', text: 'Gambar berhasil diunggah!' });
                } else {
                    setSaveMessage({ type: 'error', text: result.message || 'Gagal mengunggah gambar.' });
                }
            } catch (err) {
                console.error("Upload Error:", err);
                setSaveMessage({ type: 'error', text: 'Gagal menghubungi server.' });
            } finally {
                setIsSaving(false);
                setTimeout(() => setSaveMessage({ type: '', text: '' }), 4000);
            }
          };

          const removeSponsor = (id) => {
            setFormData(prev => ({
                ...prev,
                sponsors: (prev.sponsors || []).filter(s => s.id !== id)
            }));
          };

          // Handle Manajemen Menu
          const addNavLink = () => {
            const newLink = { id: Date.now(), label: "Menu Baru", url: "#" };
            setFormData(prev => ({ ...prev, navLinks: [...(prev.navLinks || []), newLink] }));
          };

          const updateNavLink = (id, field, value) => {
            setFormData(prev => ({
              ...prev,
              navLinks: prev.navLinks.map(link => link.id === id ? { ...link, [field]: value } : link)
            }));
          };

          const removeNavLink = (id) => {
            setFormData(prev => ({
              ...prev,
              navLinks: prev.navLinks.filter(link => link.id !== id)
            }));
          };

          const moveNavLink = (index, direction) => {
            const newLinks = [...(formData.navLinks || [])];
            if (direction === 'up' && index > 0) {
              [newLinks[index], newLinks[index - 1]] = [newLinks[index - 1], newLinks[index]];
            } else if (direction === 'down' && index < newLinks.length - 1) {
              [newLinks[index], newLinks[index + 1]] = [newLinks[index + 1], newLinks[index]];
            }
            setFormData(prev => ({ ...prev, navLinks: newLinks }));
          };

          const updateRegisterBtn = (field, value) => {
            setFormData(prev => ({
              ...prev,
              registerBtn: { ...(prev.registerBtn || {label: "Daftar Sekarang", url: "#"}), [field]: value }
            }));
          };

          // Handle Upload Peta Rute
          const handleMapUpload = async (e, field) => {
            const file = e.target.files[0];
            if (!file) return;

            setIsSaving(true);
            const formDataUpload = new FormData();
            formDataUpload.append('image', file);

            try {
                const response = await fetch('?action=upload_image', {
                    method: 'POST',
                    body: formDataUpload
                });
                const result = await response.json();
                
                if (result.success) {
                    setFormData(prev => ({ ...prev, [field]: result.url }));
                    setSaveMessage({ type: 'success', text: 'Peta berhasil diperbarui!' });
                } else {
                    setSaveMessage({ type: 'error', text: result.message || 'Gagal mengunggah peta.' });
                }
            } catch (err) {
                console.error("Upload Map Error:", err);
                setSaveMessage({ type: 'error', text: 'Gagal menghubungi server.' });
            } finally {
                setIsSaving(false);
                setTimeout(() => setSaveMessage({ type: '', text: '' }), 4000);
            }
          };

          const handleLogout = () => {
            localStorage.removeItem('makutarama_admin_token'); // Hapus token
            window.location.href = '?'; // Refresh ke landing page
          };

          return (
            <div className="flex h-screen bg-gray-50 overflow-hidden font-sans text-gray-800">
              <aside className="w-64 bg-green-900 text-white flex flex-col shadow-xl z-20">
                <div className="p-6 border-b border-green-800">
                  <h1 className="text-xl font-bold tracking-tight">Panel Admin</h1>
                </div>
                <nav className="flex-1 py-6 px-3 space-y-2">
                  <button onClick={() => setActiveTab('cms')} className={`flex items-center gap-3 w-full p-3 rounded-lg text-sm font-bold transition-colors ${activeTab === 'cms' ? 'bg-green-800 text-white' : 'text-green-100'}`}>
                    <i className="fa-solid fa-pen-to-square w-5"></i> Live Page Editor
                  </button>
                </nav>
                <div className="p-4 border-t border-green-800">
                  <button onClick={() => window.location.href = '?'} className="flex items-center gap-3 w-full p-3 rounded-lg hover:bg-green-800 text-sm font-medium transition-colors mb-2 text-yellow-400">
                    <i className="fa-solid fa-arrow-up-right-from-square"></i> Lihat Hasil Web
                  </button>
                  <button onClick={handleLogout} className="flex items-center gap-3 w-full p-3 rounded-lg hover:bg-green-800 text-sm font-medium transition-colors text-red-300">
                    <i className="fa-solid fa-right-from-bracket"></i> Logout
                  </button>
                </div>
              </aside>

              <main className="flex-1 flex flex-col h-full overflow-hidden bg-gray-100">
                <header className="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-8 z-10">
                  <h2 className="text-xl font-bold text-gray-800">Edit Konten Landing Page</h2>
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold border border-green-200">MySQL Connected</span>
                </header>

                <div className="flex-1 overflow-auto p-8 relative">
                  {/* Toast Notification Elegant */}
                  {saveMessage.text && (
                    <div className={`fixed top-6 right-6 z-[100] animate-toast flex items-center gap-4 px-6 py-4 rounded-2xl shadow-2xl border backdrop-blur-md ${
                        saveMessage.type === 'success' 
                        ? 'bg-green-500/90 text-white border-green-400' 
                        : 'bg-red-500/90 text-white border-red-400'
                    }`}>
                      <div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
                        <i className={`fa-solid ${saveMessage.type === 'success' ? 'fa-check' : 'fa-exclamation'} text-lg`}></i>
                      </div>
                      <div>
                        <p className="font-bold text-sm">Notifikasi</p>
                        <p className="text-xs opacity-90">{saveMessage.text}</p>
                      </div>
                      <button onClick={() => setSaveMessage({type:'', text:''})} className="ml-4 opacity-50 hover:opacity-100 italic text-xs underline">Tutup</button>
                    </div>
                  )}

                  <div className="max-w-4xl mx-auto space-y-8 pb-20">
                    {/* LOGO & BRANDING */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">Logo Website</h3>
                      <div className="flex flex-col md:flex-row gap-8 items-start">
                        <div className="w-full md:w-48 h-48 bg-slate-900 rounded-xl border-2 border-dashed border-slate-300 flex items-center justify-center overflow-hidden relative group">
                          {formData.siteLogo ? (
                            <React.Fragment>
                              <img src={formData.siteLogo} alt="Preview Logo" className="max-w-full max-h-full object-contain p-4" />
                              <button 
                                onClick={() => setFormData(prev => ({ ...prev, siteLogo: "" }))}
                                className="absolute inset-0 bg-red-600/80 text-white opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-2"
                              >
                                <i className="fa-solid fa-trash-can text-2xl"></i>
                                <span className="text-xs font-bold uppercase">Hapus Logo</span>
                              </button>
                            </React.Fragment>
                          ) : (
                            <div className="text-center p-4">
                              <i className="fa-solid fa-image text-4xl text-slate-300 mb-2"></i>
                              <p className="text-[10px] text-slate-400 font-bold uppercase leading-tight">Belum ada logo<br/>(Menggunakan Text)</p>
                            </div>
                          )}
                        </div>
                        <div className="flex-1 space-y-4">
                          <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-1">Unggah Logo Baru</label>
                            <input 
                              type="file" 
                              accept="image/*" 
                              onChange={handleLogoUpload}
                              className="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-green-50 file:text-green-700 hover:file:bg-green-100 transition-all"
                            />
                            <p className="text-[10px] text-slate-400 mt-2 italic">* Disarankan format PNG transparan untuk hasil terbaik.</p>
                          </div>
                          <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-1">URL Logo (Opsional)</label>
                            <input 
                              type="text" 
                              name="siteLogo" 
                              value={formData.siteLogo} 
                              onChange={handleChange} 
                              placeholder="https://example.com/logo.png"
                              className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm" 
                            />
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* INFO UTAMA */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">Informasi Utama Event</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-4">
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-1">Tanggal Event</label>
                          <input type="text" name="eventDate" value={formData.eventDate} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-1">Lokasi</label>
                          <input type="text" name="location" value={formData.location} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm" />
                        </div>
                      </div>
                      <div className="mb-4">
                        <label className="block text-sm font-semibold text-gray-700 mb-1">Teks Sambutan</label>
                        <textarea name="aboutText" value={formData.aboutText} onChange={handleChange} rows="4" className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm"></textarea>
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-1">URL Gambar Latar</label>
                        <input type="text" name="heroImage" value={formData.heroImage} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm" />
                      </div>
                      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-1">Alamat Venue</label>
                          <textarea name="venueAddress" value={formData.venueAddress} onChange={handleChange} rows="2" className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm"></textarea>
                        </div>
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-1">Link Embed Google Maps (iframe src)</label>
                          <textarea name="venueMapsUrl" value={formData.venueMapsUrl} onChange={handleChange} rows="2" className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm"></textarea>
                        </div>
                      </div>
                    </div>

                    {/* MANAJEMEN MENU */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <div className="flex items-center justify-between mb-4 border-b pb-2">
                        <h3 className="font-bold text-gray-800">Manajemen Menu Navigasi</h3>
                        <button onClick={addNavLink} className="bg-green-100 text-green-700 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-green-200 transition-colors">
                          <i className="fa-solid fa-plus mr-1"></i> Tambah Menu
                        </button>
                      </div>
                      
                      <div className="space-y-3">
                        {(formData.navLinks || []).length === 0 && (
                          <p className="text-sm text-gray-400 italic text-center py-4">Belum ada menu navigasi.</p>
                        )}
                        {(formData.navLinks || []).map((link, index) => (
                          <div key={link.id} className="flex flex-col md:flex-row gap-3 p-4 bg-gray-50 rounded-xl border border-gray-100 relative group">
                            <div className="flex flex-col gap-1 justify-center md:border-r md:pr-4">
                              <button onClick={() => moveNavLink(index, 'up')} disabled={index === 0} className="hover:text-green-600 disabled:opacity-30 transition-colors"><i className="fa-solid fa-caret-up text-xl"></i></button>
                              <button onClick={() => moveNavLink(index, 'down')} disabled={index === (formData.navLinks || []).length - 1} className="hover:text-green-600 disabled:opacity-30 transition-colors"><i className="fa-solid fa-caret-down text-xl"></i></button>
                            </div>
                            <div className="flex-1">
                              <label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">Label Menu</label>
                              <input 
                                type="text" 
                                value={link.label} 
                                onChange={(e) => updateNavLink(link.id, 'label', e.target.value)}
                                className="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:ring-1 focus:ring-green-500 outline-none"
                                placeholder="Contoh: Beranda"
                              />
                            </div>
                            <div className="flex-[2]">
                              <label className="block text-[10px] font-bold text-gray-400 uppercase mb-1">URL / Link</label>
                              <input 
                                type="text" 
                                value={link.url} 
                                onChange={(e) => updateNavLink(link.id, 'url', e.target.value)}
                                className="w-full px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:ring-1 focus:ring-green-500 outline-none"
                                placeholder="Contoh: #tentang atau https://..."
                              />
                            </div>
                            <div className="flex items-end">
                              <button 
                                onClick={() => removeNavLink(link.id)}
                                className="p-2 text-red-400 hover:text-red-600 transition-colors"
                                title="Hapus Menu"
                              >
                                <i className="fa-solid fa-trash-can"></i>
                              </button>
                            </div>
                          </div>
                        ))}
                      </div>

                      {/* KHUSUS TOMBOL DAFTAR */}
                      <div className="mt-8 pt-6 border-t border-gray-100">
                        <h4 className="text-sm font-bold text-gray-700 mb-4 flex items-center gap-2">
                           <i className="fa-solid fa-star text-yellow-500"></i> Pengaturan Tombol Utama (Pendaftaran)
                        </h4>
                        <div className="flex flex-col md:flex-row gap-3 p-4 bg-green-50/50 rounded-xl border border-green-100">
                          <div className="flex-1">
                            <label className="block text-[10px] font-bold text-green-600 uppercase mb-1">Teks Tombol</label>
                            <input 
                              type="text" 
                              value={formData.registerBtn?.label || ''} 
                              onChange={(e) => updateRegisterBtn('label', e.target.value)}
                              className="w-full px-3 py-1.5 border border-green-200 rounded-lg text-sm focus:ring-1 focus:ring-green-500 outline-none"
                            />
                          </div>
                          <div className="flex-[2]">
                            <label className="block text-[10px] font-bold text-green-600 uppercase mb-1">Link Pendaftaran (URL Website / Form)</label>
                            <input 
                              type="text" 
                              value={formData.registerBtn?.url || ''} 
                              onChange={(e) => updateRegisterBtn('url', e.target.value)}
                              className="w-full px-3 py-1.5 border border-green-200 rounded-lg text-sm focus:ring-1 focus:ring-green-500 outline-none"
                              placeholder="Contoh: https://link-pendaftaran.com"
                            />
                          </div>
                        </div>
                      </div>

                      <p className="text-[10px] text-gray-400 mt-4 italic">
                        * Tips: Gunakan `#id-seksi` (misal: #tentang) untuk scroll otomatis ke bagian tersebut di halaman landing.
                      </p>
                    </div>

                    {/* BANNER RUNNING TEXT */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <div className="flex items-center justify-between mb-4 border-b pb-2">
                        <h3 className="font-bold text-gray-800">Pengaturan Kontak & WhatsApp</h3>
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2 italic">Nomor WhatsApp Pelayanan (Format Internasional: 628xxx)</label>
                        <div className="relative">
                          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i className="fa-brands fa-whatsapp text-green-500 font-bold"></i>
                          </div>
                          <input 
                            type="text" 
                            name="whatsappNumber" 
                            value={formData.whatsappNumber || ''} 
                            onChange={handleChange} 
                            className="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 outline-none font-mono" 
                            placeholder="6285177172779 atau 0851..."
                          />
                        </div>
                        <p className="text-[10px] text-gray-400 mt-2">Gunakan format internasional (awali dengan 62) atau format lokal (awali dengan 0). Sistem akan otomatis menyesuaikan.</p>
                      </div>
                    </div>

                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">Banner Pengumuman (Running Text)</h3>
                      <div className="flex items-center gap-3 mb-4">
                        <input type="checkbox" id="bannerActive" name="bannerActive" checked={formData.bannerActive} onChange={handleChange} className="w-5 h-5 text-green-600 rounded" />
                        <label htmlFor="bannerActive" className="font-semibold text-gray-700">Aktifkan Banner</label>
                      </div>
                      <input type="text" name="bannerText" value={formData.bannerText} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm" disabled={!formData.bannerActive} />
                    </div>

                    {/* UPLOAD RUTE PETA */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">Pengaturan Jersey & Size Chart</h3>
                      <div className="mb-4">
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Upload Gambar Size Chart Jersey</label>
                        <input type="file" accept="image/*" onChange={(e) => handleMapUpload(e, 'jerseyChart')} className="block w-full text-xs text-gray-500 file:mr-4 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-green-50 file:text-green-700 hover:file:bg-green-100 mb-3" />
                        {formData.jerseyChart && <img src={formData.jerseyChart} className="max-w-xs h-auto rounded border shadow-sm" />}
                      </div>
                    </div>

                    {/* UPLOAD RUTE PETA */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">Pengaturan Rute Peta</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-1">Judul Seksi</label>
                          <input type="text" name="routeTitle" value={formData.routeTitle} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm" />
                        </div>
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-1">Sub-judul Seksi</label>
                          <input type="text" name="routeSubtitle" value={formData.routeSubtitle} onChange={handleChange} className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm" />
                        </div>
                      </div>

                      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div>
                          <label className="block text-sm font-bold text-green-700 mb-2">Peta & Deskripsi Rute 3K</label>
                          <textarea name="routeDesc3K" value={formData.routeDesc3K} onChange={handleChange} rows="2" placeholder="Deskripsi pendek rute 3K" className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm mb-3"></textarea>
                          <input type="file" accept="image/*" onChange={(e) => handleMapUpload(e, 'routeMap3K')} className="block w-full text-xs text-gray-500 file:mr-4 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-green-50 file:text-green-700 hover:file:bg-green-100 mb-3" />
                          {formData.routeMap3K && <img src={formData.routeMap3K} className="w-full h-32 object-cover rounded border" />}
                        </div>
                        <div>
                          <label className="block text-sm font-bold text-yellow-700 mb-2">Peta & Deskripsi Rute 7K</label>
                          <textarea name="routeDesc7K" value={formData.routeDesc7K} onChange={handleChange} rows="2" placeholder="Deskripsi pendek rute 7K" className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm mb-3"></textarea>
                          <input type="file" accept="image/*" onChange={(e) => handleMapUpload(e, 'routeMap7K')} className="block w-full text-xs text-gray-500 file:mr-4 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100 mb-3" />
                          {formData.routeMap7K && <img src={formData.routeMap7K} className="w-full h-32 object-cover rounded border" />}
                        </div>
                      </div>
                    </div>

                    {/* UPLOAD SPONSOR */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">Upload Logo Sponsor</h3>
                      <div className="mb-4">
                          <label className="block text-sm font-medium text-gray-700 mb-2">Pilih File Logo (Upload langsung ke website)</label>
                          <input 
                              type="file" 
                              accept="image/*" 
                              onChange={handleFileUpload} 
                              className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100" 
                          />
                          <p className="text-xs text-gray-400 mt-2">Format yang disarankan: PNG (Transparan) atau JPG. Maksimal 500KB per gambar.</p>
                      </div>
                      <div className="flex flex-wrap gap-4 mt-6">
                          {(formData.sponsors || []).length === 0 && (
                              <p className="text-sm text-gray-400 italic">Belum ada logo sponsor yang diunggah.</p>
                          )}
                          {(formData.sponsors || []).map(sponsor => (
                              <div key={sponsor.id} className="relative group w-24 h-24 border border-gray-200 rounded-lg p-2 flex items-center justify-center bg-gray-50 shadow-sm">
                                  <img src={sponsor.url} alt="Sponsor" className="max-w-full max-h-full object-contain" />
                                  <button onClick={() => removeSponsor(sponsor.id)} className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600">
                                      <i className="fa-solid fa-times text-xs"></i>
                                  </button>
                              </div>
                          ))}
                      </div>
                    </div>

                    {/* HARGA TIKET */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden p-6">
                      <h3 className="font-bold text-gray-800 mb-4 border-b pb-2">Pengaturan Harga Tiket</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                          <div className="space-y-4">
                            <h4 className="font-bold text-green-700 border-b pb-2">Kategori 3K</h4>
                            <div><label className="text-xs font-semibold text-gray-600 block mb-1">Early Bird (Rp)</label><input type="number" name="price3K_EB" value={formData.price3K_EB} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm" /></div>
                            <div><label className="text-xs font-semibold text-gray-600 block mb-1">Regular (Rp)</label><input type="number" name="price3K_Reg" value={formData.price3K_Reg} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm" /></div>
                            <div>
                              <label className="text-xs font-bold text-green-700 block mb-1 mt-2">Link Registrasi 3K (Website/Form)</label>
                              <input type="text" name="link3K" value={formData.link3K || ''} onChange={handleChange} className="w-full px-3 py-2 border border-green-200 rounded text-sm bg-green-50/30" placeholder="https://..." />
                            </div>
                            <div>
                              <label className="text-xs font-bold text-green-700 block mb-1 mt-2">Daftar Benefit 3K (Pisahkan dengan Enter)</label>
                              <textarea name="benefits3K" value={formData.benefits3K || ''} onChange={handleChange} rows="5" className="w-full px-3 py-2 border border-green-200 rounded text-sm bg-green-50/30" placeholder="Contoh:&#10;Jersey&#10;Medali&#10;..."></textarea>
                            </div>
                          </div>
                          <div className="space-y-4">
                            <h4 className="font-bold text-yellow-600 border-b pb-2">Kategori 7K</h4>
                            <div><label className="text-xs font-semibold text-gray-600 block mb-1">Early Bird (Rp)</label><input type="number" name="price7K_EB" value={formData.price7K_EB} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm" /></div>
                            <div><label className="text-xs font-semibold text-gray-600 block mb-1">Regular (Rp)</label><input type="number" name="price7K_Reg" value={formData.price7K_Reg} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm" /></div>
                            <div>
                              <label className="text-xs font-bold text-yellow-700 block mb-1 mt-2">Link Registrasi 7K (Website/Form)</label>
                              <input type="text" name="link7K" value={formData.link7K || ''} onChange={handleChange} className="w-full px-3 py-2 border border-yellow-200 rounded text-sm bg-yellow-50/30" placeholder="https://..." />
                            </div>
                            <div>
                              <label className="text-xs font-bold text-yellow-700 block mb-1 mt-2">Daftar Benefit 7K (Pisahkan dengan Enter)</label>
                              <textarea name="benefits7K" value={formData.benefits7K || ''} onChange={handleChange} rows="5" className="w-full px-3 py-2 border border-yellow-200 rounded text-sm bg-yellow-50/30" placeholder="Contoh:&#10;Jersey&#10;Medali&#10;..."></textarea>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>

                  {/* Tombol Simpan Mengambang */}
                  <div className="fixed bottom-8 right-8 z-50">
                    <button onClick={handleSave} disabled={isSaving} className="bg-green-600 hover:bg-green-700 text-white px-6 py-4 rounded-full font-bold shadow-xl flex items-center gap-2 transition-all">
                      <i className="fa-solid fa-floppy-disk"></i> {isSaving ? 'Menyimpan...' : 'Simpan ke Database'}
                    </button>
                  </div>
                </div>
              </main>
            </div>
          );
        }

        // Mount React ke elemen #root
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<MakutaramaApp />);
    </script>
</body>
</html>