<?php // Christo Lochenberg Developments | info@christodev.co.za | +27 61 523 9126 ?>
<div id="branding" class="tab-content <?php echo $activeTab === 'branding' ? '' : 'hidden'; ?> space-y-6">
    
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700/50 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50 dark:bg-gray-900/40 flex items-center">
            <svg class="w-4 h-4 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
            <h3 class="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider">Theme & Assets</h3>
        </div>
        <div class="p-6">
            <div class="mb-8">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-wider mb-2">Primary Theme Colour</label>
                <div class="flex items-center space-x-3 p-4 bg-gray-50 dark:bg-gray-900/30 border border-gray-200 dark:border-gray-700/50 rounded-xl">
                    <input type="color" name="theme_color" value="<?php echo $data['settings']['theme_color'] ?? '#2563eb'; ?>" class="h-10 w-14 rounded cursor-pointer border-0 p-0 bg-transparent">
                    <div class="flex flex-col">
                        <span class="text-sm font-bold text-gray-900 dark:text-white">Select your core brand UI color.</span>
                        <span class="text-xs text-gray-500 dark:text-gray-400">This triggers an automatic recompilation of the Tailwind CSS framework.</span>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="p-5 border border-gray-200 dark:border-gray-700/50 rounded-xl bg-gray-50 dark:bg-gray-900/30 flex flex-col items-center justify-center text-center">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-4 w-full border-b border-gray-200 dark:border-gray-700/50 pb-3">Browser Favicon</label>
                    <div class="h-16 flex items-center justify-center mb-4">
                        <?php if(!empty($data['settings']['favicon'])): ?>
                            <img src="<?php echo URLROOT; ?>/uploads/<?php echo $data['settings']['favicon']; ?>" class="h-10 rounded shadow-sm" alt="Favicon">
                        <?php else: ?>
                            <span class="text-xs text-gray-400 dark:text-gray-500 font-bold uppercase tracking-wider">None Uploaded</span>
                        <?php endif; ?>
                    </div>
                    <input type="file" name="favicon" class="text-xs text-gray-500 dark:text-gray-400 w-full file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-bold file:bg-primary file:text-white hover:file:opacity-90 transition-colors">
                </div>
                
                <div class="p-5 border border-gray-200 dark:border-gray-700/50 rounded-xl bg-gray-50 dark:bg-gray-900/30 flex flex-col items-center justify-center text-center">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-4 w-full border-b border-gray-200 dark:border-gray-700/50 pb-3">Light Mode Logo</label>
                    <div class="h-16 flex items-center justify-center mb-4 bg-white p-2 rounded-lg w-full border border-gray-200 shadow-sm">
                        <?php if(!empty($data['settings']['logo_light'])): ?>
                            <img src="<?php echo URLROOT; ?>/uploads/<?php echo $data['settings']['logo_light']; ?>" class="max-h-full max-w-full object-contain" alt="Light Logo">
                        <?php else: ?>
                            <span class="text-xs text-gray-400 font-bold uppercase tracking-wider">None Uploaded</span>
                        <?php endif; ?>
                    </div>
                    <input type="file" name="logo_light" class="text-xs text-gray-500 dark:text-gray-400 w-full file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-bold file:bg-primary file:text-white hover:file:opacity-90 transition-colors">
                </div>
                
                <div class="p-5 border border-gray-200 dark:border-gray-700/50 rounded-xl bg-gray-50 dark:bg-gray-900/30 flex flex-col items-center justify-center text-center">
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-4 w-full border-b border-gray-200 dark:border-gray-700/50 pb-3">Dark Mode Logo</label>
                    <div class="h-16 flex items-center justify-center mb-4 bg-gray-900 p-2 rounded-lg w-full border border-gray-700 shadow-inner">
                        <?php if(!empty($data['settings']['logo_dark'])): ?>
                            <img src="<?php echo URLROOT; ?>/uploads/<?php echo $data['settings']['logo_dark']; ?>" class="max-h-full max-w-full object-contain" alt="Dark Logo">
                        <?php else: ?>
                            <span class="text-xs text-gray-500 font-bold uppercase tracking-wider">None Uploaded</span>
                        <?php endif; ?>
                    </div>
                    <input type="file" name="logo_dark" class="text-xs text-gray-500 dark:text-gray-400 w-full file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-bold file:bg-primary file:text-white hover:file:opacity-90 transition-colors">
                </div>
            </div>
        </div>
    </div>
</div>