<?php // components/forms/contact_info.php ?>
<div class="bg-white border border-slate-300/80 rounded-xl shadow-sm overflow-hidden">
    <div class="px-4 py-3 bg-stone-50/50 border-b border-slate-300/80">
        <h3 class="text-xs font-black text-slate-950 uppercase tracking-tight">3. Contact & Regional Localization</h3>
    </div>
    
    <div class="p-4 sm:p-5 space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            
            <div class="sm:col-span-2 space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Communications Email</label>
                <input type="email" name="email" value="<?= htmlspecialchars($employee['email'] ?? '') ?>" placeholder="staffname@domain.com" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-mono font-black text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
            </div>

            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Country</label>
                <select name="country" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
                    <option value="Nigeria" <?= ($employee['country'] ?? 'Nigeria') === 'Nigeria' ? 'selected' : '' ?>>Nigeria</option>
                    <option value="Other" <?= ($employee['country'] ?? '') === 'Other' ? 'selected' : '' ?>>Other</option>
                </select>
            </div>

            <div class="space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">State of Residence / Origin</label>
                <input type="text" name="state" value="<?= htmlspecialchars($employee['state'] ?? '') ?>" placeholder="e.g., Bayelsa, Lagos" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
            </div>

            <div class="sm:col-span-2 space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Local Government Area (LGA)</label>
                <input type="text" name="lga" value="<?= htmlspecialchars($employee['lga'] ?? '') ?>" placeholder="e.g., Yenagoa, Ikeja" class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 focus:outline-none focus:border-indigo-700 focus:bg-white transition">
            </div>

            <div class="sm:col-span-2 space-y-1.5">
                <label class="block text-[9px] font-black text-slate-500 uppercase tracking-wider px-0.5">Residential Home Address</label>
                <textarea name="address" rows="2" placeholder="Street layout details..." class="w-full bg-stone-50/40 border border-slate-300 p-2 rounded text-xs font-bold text-slate-950 placeholder-slate-400 focus:outline-none focus:border-indigo-700 focus:bg-white transition resize-none"><?= htmlspecialchars($employee['address'] ?? '') ?></textarea>
            </div>
        </div>
    </div>
</div>