<?php
/**
 * Contact Page — Quote Request & Office Info
 * Path: contact.php
 */
include_once 'header.php';

$site_name    = get_site_setting('site_name');
$site_phone   = get_site_setting('site_phone');
$site_email   = get_site_setting('site_email');
$site_address = get_site_setting('site_address');

$form_success = '';
$form_error   = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'contact_form') {
    $name    = trim($_POST['name'] ?? '');
    $phone   = trim($_POST['phone'] ?? '');
    $email   = trim($_POST['email'] ?? '');
    $service = trim($_POST['service'] ?? '');
    $message = trim($_POST['message'] ?? '');

    if ($name && $phone && $email) {
        if (save_contact_inquiry($name, $phone, $email, $service, $message)) {
            $form_success = 'ধন্যবাদ! আপনার অনুরোধ জমা হয়েছে। আমাদের টিম শীঘ্রই যোগাযোগ করবে।';
        } else {
            $form_error = 'জমা দিতে সমস্যা হয়েছে। সরাসরি কল করুন: ' . $site_phone;
        }
    } else {
        $form_error = 'নাম, ফোন ও ইমেইল বাধ্যতামূলক।';
    }
}

$service_options = [];
$categories = get_categories(true);
foreach ($categories as $cat) {
    $subs = get_subcategories($cat['id'], true);
    if (!empty($subs)) {
        foreach ($subs as $sub) {
            $service_options[] = [
                'group' => $cat['name'],
                'value' => $cat['name'] . ' — ' . $sub['name'],
                'label' => $sub['name'],
            ];
        }
    } else {
        $service_options[] = [
            'group' => $cat['name'],
            'value' => $cat['name'],
            'label' => $cat['name'],
        ];
    }
}
// Extra service lines
foreach (['Elevator Maintenance & Repair', 'Emergency Breakdown Service', 'Other / General Inquiry'] as $extra) {
    $service_options[] = [
        'group' => 'Other Services',
        'value' => $extra,
        'label' => $extra,
    ];
}

// Group for <optgroup>
$grouped_services = [];
foreach ($service_options as $opt) {
    $grouped_services[$opt['group']][] = $opt;
}
?>

<section class="relative bg-gradient-to-r from-slate-950 to-blue-900 text-white py-14 md:py-20">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <nav class="text-xs text-sky-400 font-bold uppercase mb-3">
            <a href="index.php" class="hover:text-white">Home</a> <span class="mx-2">/</span> Contact
        </nav>
        <h1 class="text-3xl md:text-5xl font-black uppercase">Contact Us</h1>
        <div class="w-16 h-1 bg-secondary mx-auto mt-4"></div>
        <p class="text-gray-300 text-sm max-w-lg mx-auto mt-4">কোট, ইনস্টলেশন বা ইমারজেন্সি সাপোর্ট — আমরা ২৪/৭ প্রস্তুত</p>
    </div>
</section>

<section class="py-16 md:py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">

            <!-- Contact Info -->
            <div class="lg:col-span-5 space-y-6">
                <div>
                    <h2 class="text-2xl font-black text-primary uppercase mb-2">Get In Touch</h2>
                    <p class="text-gray-500 text-sm">সরাসরি কল করুন বা ফর্ম পূরণ করুন — আমাদের ইঞ্জিনিয়ারিং সুপারভাইজার দ্রুত যোগাযোগ করবে।</p>
                </div>

                <div class="space-y-4">
                    <a href="tel:<?php echo htmlspecialchars($site_phone); ?>"
                        class="flex items-center gap-4 bg-white p-5 rounded-2xl border border-gray-100 hover:shadow-md hover:border-primary/20 transition-all group">
                        <div class="w-12 h-12 rounded-xl bg-blue-50 text-primary group-hover:bg-primary group-hover:text-white flex items-center justify-center text-xl transition-all">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold uppercase text-gray-400">Hotline</span>
                            <p class="font-black text-gray-900"><?php echo htmlspecialchars($site_phone); ?></p>
                        </div>
                    </a>

                    <a href="mailto:<?php echo htmlspecialchars($site_email); ?>"
                        class="flex items-center gap-4 bg-white p-5 rounded-2xl border border-gray-100 hover:shadow-md transition-all group">
                        <div class="w-12 h-12 rounded-xl bg-blue-50 text-primary group-hover:bg-primary group-hover:text-white flex items-center justify-center text-xl transition-all">
                            <i class="fa-solid fa-envelope"></i>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold uppercase text-gray-400">Email</span>
                            <p class="font-black text-gray-900 text-sm"><?php echo htmlspecialchars($site_email); ?></p>
                        </div>
                    </a>

                    <div class="flex items-start gap-4 bg-white p-5 rounded-2xl border border-gray-100">
                        <div class="w-12 h-12 rounded-xl bg-blue-50 text-primary flex items-center justify-center text-xl flex-shrink-0">
                            <i class="fa-solid fa-location-dot"></i>
                        </div>
                        <div>
                            <span class="text-[10px] font-bold uppercase text-gray-400">Head Office</span>
                            <p class="font-semibold text-gray-800 text-sm leading-relaxed"><?php echo htmlspecialchars($site_address); ?></p>
                        </div>
                    </div>
                </div>

                <!-- Map placeholder -->
                <div class="rounded-2xl overflow-hidden border border-gray-100 shadow-sm aspect-video bg-gray-200 relative">
                    <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?w=800" class="w-full h-full object-cover opacity-80" alt="Coverage Map">
                    <div class="absolute inset-0 bg-gradient-to-t from-primary/70 to-transparent flex items-end p-5">
                        <p class="text-white text-sm font-bold">
                            <i class="fa-solid fa-map-location-dot mr-2 text-secondary"></i>
                            Coverage: Dhaka, Chattogram, Sylhet & major cities
                        </p>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="lg:col-span-7">
                <div class="bg-white rounded-2xl p-6 md:p-8 border border-gray-100 shadow-sm">
                    <h3 class="text-xl font-black text-primary uppercase mb-1">Request Technical Dispatch</h3>
                    <p class="text-xs text-gray-500 mb-6">বিস্তারিত পূরণ করুন — আমাদের টিম তৎক্ষণাৎ যোগাযোগ করবে</p>

                    <?php if ($form_success): ?>
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-700 rounded-xl text-sm flex items-center">
                        <i class="fa-solid fa-circle-check mr-3 text-lg"></i><?php echo $form_success; ?>
                    </div>
                    <?php endif; ?>
                    <?php if ($form_error): ?>
                    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm flex items-center">
                        <i class="fa-solid fa-triangle-exclamation mr-3"></i><?php echo $form_error; ?>
                    </div>
                    <?php endif; ?>

                    <form method="post" action="" class="space-y-4">
                        <input type="hidden" name="action" value="contact_form">

                        <div>
                            <label class="block text-xs font-bold uppercase text-gray-600 mb-1">Full Name / Company *</label>
                            <input type="text" name="name" required placeholder="Your Name or Company"
                                class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white">
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-bold uppercase text-gray-600 mb-1">Phone *</label>
                                <input type="tel" name="phone" required placeholder="+880 17XX-XXXXXX"
                                    class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white">
                            </div>
                            <div>
                                <label class="block text-xs font-bold uppercase text-gray-600 mb-1">Email *</label>
                                <input type="email" name="email" required placeholder="name@company.com"
                                    class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white">
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase text-gray-600 mb-1">Required Service</label>
                            <select name="service" class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white">
                                <option value="">— Select Service / Product Category —</option>
                                <?php foreach ($grouped_services as $group => $opts): ?>
                                <optgroup label="<?php echo htmlspecialchars($group); ?>">
                                    <?php foreach ($opts as $opt): ?>
                                    <option value="<?php echo htmlspecialchars($opt['value']); ?>"><?php echo htmlspecialchars($opt['label']); ?></option>
                                    <?php endforeach; ?>
                                </optgroup>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-bold uppercase text-gray-600 mb-1">Project Details / Message</label>
                            <textarea name="message" rows="4" placeholder="Facility location, system details, issues..."
                                class="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-primary focus:bg-white"></textarea>
                        </div>

                        <button type="submit" class="w-full bg-primary hover:bg-secondary text-white font-bold py-4 rounded-xl transition-all shadow-md text-sm uppercase tracking-wider">
                            <i class="fa-solid fa-paper-plane mr-2"></i> Send Request
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<?php include_once 'footer.php'; ?>
