<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Desain - Galery Karya Visual</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        body { background-color: #0f172a; color: #f8fafc; font-family: sans-serif; }
    </style>
</head>
<body>

    <nav class="p-5 bg-slate-900 flex justify-between items-center border-b border-slate-800 sticky top-0 z-50">
        <h1 class="text-lg font-bold text-cyan-400">GALERY KARYA VISUAL</h1>
        <div class="space-x-4 text-sm font-semibold">
            <a href="index.php" class="text-slate-300 hover:text-cyan-400">Home</a>
            <a href="karya.php" class="text-slate-300 hover:text-cyan-400">Karya</a>
            <a href="order.php" class="text-cyan-400 border-b-2 border-cyan-400 pb-1">Order</a>
        </div>
    </nav>

    <main class="py-12 px-4 max-w-md mx-auto">
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
            <h2 class="text-2xl font-bold mb-1 text-center bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">Formulir Pesanan</h2>
            <p class="text-slate-400 text-center text-xs mb-6">Silakan isi spesifikasi desain yang Anda butuhkan.</p>
            
            <form action="" method="POST" class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Nama Lengkap</label>
                    <input type="text" name="nama" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-cyan-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Jenis Desain</label>
                    <select name="jenis_desain" class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-cyan-500">
                        <option value="Poster Edukasi / Karakter">Poster Edukasi / Karakter</option>
                        <option value="Identitas Logo / Branding">Identitas Logo / Branding</option>
                        <option value="Desain Geometri & Ilustrasi">Desain Geometri & Ilustrasi</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Detail Brief / Pesan</label>
                    <textarea name="pesan" rows="3" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-cyan-500" placeholder="Tema, warna, atau teks poster..."></textarea>
                </div>
                
                <button type="submit" name="submit" class="w-full bg-gradient-to-r from-cyan-500 to-purple-500 text-slate-950 font-bold py-2.5 rounded-lg text-sm shadow-md transition transform hover:-translate-y-0.5">
                    Kirim Spesifikasi
                </button>
            </form>

            <?php
            if (isset($_POST['submit'])) {
                $nama = htmlspecialchars($_POST['nama']);
                $jenis = htmlspecialchars($_POST['jenis_desain']);
                echo "
                <div class='mt-4 p-3 bg-emerald-500/10 border border-emerald-500/30 rounded-lg text-emerald-400 text-xs text-center animate__animated animate__fadeIn'>
                    <strong>Terima kasih!</strong> Pesanan <strong>$jenis</strong> atas nama <strong>$nama</strong> berhasil disimulasikan.
                </div>
                ";
            }
            ?>
        </div>
    </main>

    <footer class="p-5 bg-slate-900 text-center text-xs text-slate-500 border-t border-slate-800 mt-10">
        &copy; <?php echo date('Y'); ?> Galery Karya Visual.
    </footer>

</body>
</html>
