<?php
// ============================================
// CONTACT PAGE
// File: pages/contact.php
// ============================================
require_once '../includes/db.php';
$page_title = 'Kontak';
$db = getDB();

$success = '';
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nama = trim($_POST['nama'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $subjek = trim($_POST['subjek'] ?? '');
    $pesan = trim($_POST['pesan'] ?? '');

    if (empty($nama) || empty($email) || empty($pesan)) {
        $error = 'Mohon isi semua field yang wajib diisi.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = 'Format email tidak valid.';
    } else {
        $stmt = $db->prepare("INSERT INTO kontak_pesan (nama, email, subjek, pesan) VALUES (?, ?, ?, ?)");
        if ($stmt->execute([$nama, $email, $subjek, $pesan])) {
            $success = 'Pesan Anda telah berhasil dikirim! Kami akan merespons dalam 1x24 jam.';
        } else {
            $error = 'Terjadi kesalahan. Silakan coba lagi.';
        }
    }
}
?>
<?php include '../includes/header.php'; ?>

<section class="page-hero">
    <div class="page-hero-bg" style="background-image:url('../assets/images/hero-bg.jpg');"></div>
    <div class="page-hero-overlay"></div>
    <div class="container page-hero-content">
        <span class="section-label">HUBUNGI KAMI</span>
        <h1 class="section-title">Kontak <span>& Informasi</span></h1>
        <nav aria-label="breadcrumb" class="mt-2">
            <ol class="breadcrumb" style="background:none;padding:0;font-size:0.82rem;">
                <li class="breadcrumb-item"><a href="../" class="text-muted text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active" style="color:var(--gold);">Contact</li>
            </ol>
        </nav>
    </div>
</section>

<section class="content-section">
    <div class="container">
        <div class="row g-5">
            <!-- Contact Form -->
            <div class="col-lg-7" data-aos="fade-right">
                <div class="glass-card">
                    <span class="section-label">KIRIM PESAN</span>
                    <h2 class="section-title mb-2" style="font-size:1.8rem;">Ada <span>Pertanyaan?</span></h2>
                    <div class="section-divider mb-4"></div>

                    <?php if ($success): ?>
                    <div class="alert-success-custom auto-hide-alert mb-4">
                        <i class="bi bi-check-circle-fill me-2"></i><?= $success ?>
                    </div>
                    <?php endif; ?>

                    <?php if ($error): ?>
                    <div class="alert-danger-custom mb-4">
                        <i class="bi bi-exclamation-circle-fill me-2"></i><?= $error ?>
                    </div>
                    <?php endif; ?>

                    <form method="POST" action="">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">NAMA LENGKAP *</label>
                                <input type="text" name="nama" class="form-control"
                                       placeholder="Masukkan nama Anda"
                                       value="<?= htmlspecialchars($_POST['nama'] ?? '') ?>"
                                       required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">EMAIL *</label>
                                <input type="email" name="email" class="form-control"
                                       placeholder="nama@email.com"
                                       value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
                                       required>
                            </div>
                            <div class="col-12">
                                <label class="form-label">SUBJEK</label>
                                <select name="subjek" class="form-select">
                                    <option value="">-- Pilih Subjek --</option>
                                    <option value="Info Pendakian" <?= ($_POST['subjek'] ?? '') === 'Info Pendakian' ? 'selected' : '' ?>>Info Pendakian</option>
                                    <option value="Perizinan SIMAKSI" <?= ($_POST['subjek'] ?? '') === 'Perizinan SIMAKSI' ? 'selected' : '' ?>>Perizinan SIMAKSI</option>
                                    <option value="Pemandu Wisata" <?= ($_POST['subjek'] ?? '') === 'Pemandu Wisata' ? 'selected' : '' ?>>Pemandu Wisata</option>
                                    <option value="Kondisi Jalur" <?= ($_POST['subjek'] ?? '') === 'Kondisi Jalur' ? 'selected' : '' ?>>Kondisi Jalur</option>
                                    <option value="Lainnya" <?= ($_POST['subjek'] ?? '') === 'Lainnya' ? 'selected' : '' ?>>Lainnya</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">PESAN *</label>
                                <textarea name="pesan" class="form-control" rows="6"
                                          placeholder="Tulis pesan Anda di sini..." required><?= htmlspecialchars($_POST['pesan'] ?? '') ?></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn-gold w-100" style="justify-content:center;padding:14px;">
                                    <i class="bi bi-send-fill me-2"></i>KIRIM PESAN
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="col-lg-5" data-aos="fade-left">
                <span class="section-label">INFORMASI</span>
                <h2 class="section-title mb-3" style="font-size:1.8rem;">Cara <span>Menghubungi</span></h2>
                <div class="section-divider mb-4"></div>

                <div class="d-flex flex-column gap-3 mb-4">
                    <div class="info-card">
                        <div class="info-card-icon"><i class="bi bi-geo-alt-fill"></i></div>
                        <div>
                            <div class="info-card-title">LOKASI</div>
                            <div class="info-card-text">Balai Taman Nasional Gunung Merbabu<br>Boyolali, Jawa Tengah, Indonesia</div>
                        </div>
                    </div>
                    <div class="info-card">
                        <div class="info-card-icon"><i class="bi bi-telephone-fill"></i></div>
                        <div>
                            <div class="info-card-title">TELEPON / WA</div>
                            <div class="info-card-text">+62 885225341329</div>
                        </div>
                    </div>
                    <div class="info-card">
                        <div class="info-card-icon"><i class="bi bi-envelope-fill"></i></div>
                        <div>
                            <div class="info-card-title">EMAIL</div>
                            <div class="info-card-text">info@merbabu.id<br>pendakian@merbabu.id</div>
                        </div>
                    </div>
                    <div class="info-card">
                        <div class="info-card-icon"><i class="bi bi-clock-fill"></i></div>
                        <div>
                            <div class="info-card-title">JAM OPERASIONAL</div>
                            <div class="info-card-text">Senin — Jumat: 08.00 — 16.00 WIB<br>Pendaftaran online: 24 jam</div>
                        </div>
                    </div>
                </div>

                <!-- Emergency Contact -->
                <div class="glass-card" style="border-color:rgba(255,71,87,0.3);">
                    <div class="d-flex align-items-center gap-2 mb-3">
                        <i class="bi bi-exclamation-triangle-fill" style="color:#ff4757;font-size:1.2rem;"></i>
                        <h6 style="font-family:'Cinzel',serif;color:#ff4757;margin:0;font-size:0.85rem;letter-spacing:1.5px;">KONTAK DARURAT</h6>
                    </div>
                    <div class="d-flex flex-column gap-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span style="font-size:0.85rem;color:rgba(255,255,255,0.7);">Basarnas</span>
                            <span style="font-size:0.85rem;color:#ff4757;font-weight:700;">115</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span style="font-size:0.85rem;color:rgba(255,255,255,0.7);">SAR TNGMb</span>
                            <span style="font-size:0.85rem;color:#ff4757;font-weight:700;">+62 813-2800-6677</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span style="font-size:0.85rem;color:rgba(255,255,255,0.7);">Ambulans</span>
                            <span style="font-size:0.85rem;color:#ff4757;font-weight:700;">119</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php include '../includes/footer.php'; ?>
