<div>
    {{-- Encabezado --}}
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;">
        <div>
            <h1 style="font-size:1.5rem;font-weight:700;color:#0f172a;margin:0;">Configuración</h1>
            <p style="font-size:13px;color:#64748b;margin:4px 0 0;">Parámetros del sistema — solo visible para administradores</p>
        </div>
    </div>

    {{-- Tabs --}}
    <div style="display:flex;gap:0.25rem;margin-bottom:1.5rem;background:#f1f5f9;padding:4px;border-radius:0.75rem;width:fit-content;">
        @foreach([
            ['entidad',  'Entidad'],
            ['capital',  'Capital Semilla'],
            ['mail',     'Correo SMTP'],
            ['logo',     'Logo'],
        ] as [$key, $label])
        <button wire:click="$set('tab', '{{ $key }}')"
            style="padding:0.5rem 1.1rem;border-radius:0.5rem;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all 0.15s;
                {{ $tab === $key ? 'background:#fff;color:#002d6b;box-shadow:0 1px 4px rgba(0,0,0,0.1);' : 'background:transparent;color:#64748b;' }}">
            {{ $label }}
        </button>
        @endforeach
    </div>

    {{-- TAB: Entidad --}}
    @if($tab === 'entidad')
    <div style="background:#fff;border-radius:1rem;border:1px solid #e8ecf4;padding:1.75rem;max-width:640px;">
        <h2 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 1.25rem;">Datos de la entidad</h2>

        @if(session('success_entidad'))
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:0.75rem 1rem;border-radius:0.625rem;font-size:13px;margin-bottom:1rem;">
            ✅ {{ session('success_entidad') }}
        </div>
        @endif

        <div style="display:flex;flex-direction:column;gap:1rem;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Nombre de la entidad *</label>
                    <input wire:model="entidad_nombre" type="text"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="FEMPHA">
                    @error('entidad_nombre') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">NIT</label>
                    <input wire:model="entidad_nit" type="text"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="900.123.456-7">
                </div>
            </div>
            <div>
                <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Dirección</label>
                <input wire:model="entidad_direccion" type="text"
                    style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                    placeholder="Calle 123 # 45-67">
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Ciudad</label>
                    <input wire:model="entidad_ciudad" type="text"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="Bogotá">
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Teléfono</label>
                    <input wire:model="entidad_telefono" type="text"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="601 123 4567">
                </div>
            </div>
            <div>
                <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Sitio web</label>
                <input wire:model="entidad_web" type="url"
                    style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                    placeholder="https://www.fempha.com.co">
                @error('entidad_web') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
            </div>
        </div>
        <button wire:click="guardarEntidad"
            style="margin-top:1.5rem;background:#002d6b;color:#fff;border:none;border-radius:0.625rem;padding:0.7rem 1.75rem;font-size:13.5px;font-weight:600;cursor:pointer;">
            Guardar cambios
        </button>
    </div>
    @endif

    {{-- TAB: Capital Semilla --}}
    @if($tab === 'capital')
    <div style="background:#fff;border-radius:1rem;border:1px solid #e8ecf4;padding:1.75rem;max-width:640px;">
        <h2 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 1.25rem;">Parámetros Capital Semilla</h2>

        @if(session('success_capital'))
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:0.75rem 1rem;border-radius:0.625rem;font-size:13px;margin-bottom:1rem;">
            ✅ {{ session('success_capital') }}
        </div>
        @endif

        <div style="display:flex;flex-direction:column;gap:1rem;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">SMMLV vigente (COP) *</label>
                    <input wire:model="smmlv" type="number" step="1000"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="1300000">
                    @error('smmlv') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Máximo SMMLV a financiar *</label>
                    <input wire:model="max_smmlv" type="number" min="1" max="50"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="10">
                    @error('max_smmlv') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
            </div>

            <div style="background:#eef3fc;border-radius:0.625rem;padding:0.875rem 1rem;font-size:13px;color:#002d6b;">
                <strong>Monto máximo calculado:</strong>
                ${{ number_format((float)$smmlv * $max_smmlv, 0, ',', '.') }} COP
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Meses de gracia *</label>
                    <input wire:model="meses_gracia" type="number" min="1" max="24"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;">
                    @error('meses_gracia') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Puntaje mínimo aprobación *</label>
                    <input wire:model="puntaje_minimo" type="number" min="0" max="100"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;">
                    @error('puntaje_minimo') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Email comité</label>
                    <input wire:model="email_comite" type="email"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="comite@fempha.com.co">
                    @error('email_comite') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Email junta directiva</label>
                    <input wire:model="email_junta" type="email"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="junta@fempha.com.co">
                    @error('email_junta') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
        <button wire:click="guardarCapitalSemilla"
            style="margin-top:1.5rem;background:#002d6b;color:#fff;border:none;border-radius:0.625rem;padding:0.7rem 1.75rem;font-size:13.5px;font-weight:600;cursor:pointer;">
            Guardar cambios
        </button>
    </div>
    @endif

    {{-- TAB: Mail --}}
    @if($tab === 'mail')
    <div style="background:#fff;border-radius:1rem;border:1px solid #e8ecf4;padding:1.75rem;max-width:640px;">
        <h2 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 0.5rem;">Configuración SMTP</h2>
        <p style="font-size:12.5px;color:#64748b;margin:0 0 1.25rem;">Los correos de notificación se enviarán con estos parámetros.</p>

        @if(session('success_mail'))
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:0.75rem 1rem;border-radius:0.625rem;font-size:13px;margin-bottom:1rem;">
            ✅ {{ session('success_mail') }}
        </div>
        @endif

        <div style="display:flex;flex-direction:column;gap:1rem;">
            <div style="display:grid;grid-template-columns:2fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Servidor SMTP *</label>
                    <input wire:model="mail_host" type="text"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="smtp.gmail.com">
                    @error('mail_host') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Puerto *</label>
                    <input wire:model="mail_port" type="number"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="587">
                    @error('mail_port') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
            </div>
            <div>
                <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Encriptación *</label>
                <select wire:model="mail_encryption"
                    style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;background:#fff;">
                    <option value="tls">TLS (recomendado)</option>
                    <option value="ssl">SSL</option>
                    <option value="none">Ninguna</option>
                </select>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Usuario *</label>
                    <input wire:model="mail_username" type="text"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="correo@dominio.com">
                    @error('mail_username') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Contraseña *</label>
                    <input wire:model="mail_password" type="password"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="••••••••">
                    @error('mail_password') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Correo remitente *</label>
                    <input wire:model="mail_from_address" type="email"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="noreply@fempha.com.co">
                    @error('mail_from_address') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.4rem;">Nombre remitente *</label>
                    <input wire:model="mail_from_name" type="text"
                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:0.625rem;padding:0.65rem 0.875rem;font-size:13.5px;outline:none;"
                        placeholder="FEMPHA Emprende">
                    @error('mail_from_name') <p style="color:#dc2626;font-size:11.5px;margin:3px 0 0;">{{ $message }}</p> @enderror
                </div>
            </div>

            <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:0.625rem;padding:0.875rem 1rem;font-size:12.5px;color:#92400e;">
                ⚠️ Para Gmail usa <strong>smtp.gmail.com</strong>, puerto <strong>587</strong>, TLS, y una <strong>contraseña de aplicación</strong> (no tu contraseña normal).
            </div>
        </div>
        <button wire:click="guardarMail"
            style="margin-top:1.5rem;background:#002d6b;color:#fff;border:none;border-radius:0.625rem;padding:0.7rem 1.75rem;font-size:13.5px;font-weight:600;cursor:pointer;">
            Guardar configuración
        </button>
    </div>
    @endif

    {{-- TAB: Logo --}}
    @if($tab === 'logo')
    <div style="background:#fff;border-radius:1rem;border:1px solid #e8ecf4;padding:1.75rem;max-width:480px;">
        <h2 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 1.25rem;">Logo de la entidad</h2>

        @if(session('success_logo'))
        <div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:0.75rem 1rem;border-radius:0.625rem;font-size:13px;margin-bottom:1rem;">
            ✅ {{ session('success_logo') }}
        </div>
        @endif

        {{-- Logo actual --}}
        @if($logo_actual)
        <div style="margin-bottom:1.5rem;">
            <p style="font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.625rem;">Logo actual</p>
            <div style="background:#001f52;padding:1rem 1.5rem;border-radius:0.75rem;display:inline-block;">
                <img src="{{ asset('images/logo.png') }}?v={{ time() }}" alt="Logo actual" style="height:3rem;object-fit:contain;">
            </div>
        </div>
        @endif

        {{-- Subir nuevo logo --}}
        <div style="margin-bottom:1.25rem;">
            <label style="display:block;font-size:11.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.5rem;">
                Subir nuevo logo
            </label>
            <p style="font-size:12px;color:#94a3b8;margin:0 0 0.625rem;">PNG o JPG · Máximo 2MB · Recomendado: fondo transparente o blanco, 400×80px</p>
            <input wire:model="logo_nuevo" type="file" accept=".png,.jpg,.jpeg"
                style="width:100%;border:1.5px dashed #e2e8f0;border-radius:0.625rem;padding:0.75rem;font-size:13px;cursor:pointer;">
            @error('logo_nuevo') <p style="color:#dc2626;font-size:11.5px;margin:4px 0 0;">{{ $message }}</p> @enderror
        </div>

        @if($logo_nuevo)
        <div style="margin-bottom:1.25rem;">
            <p style="font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.5rem;">Vista previa</p>
            <div style="background:#001f52;padding:1rem 1.5rem;border-radius:0.75rem;display:inline-block;">
                <img src="{{ $logo_nuevo->temporaryUrl() }}" alt="Vista previa" style="height:3rem;object-fit:contain;">
            </div>
        </div>
        @endif

        <button wire:click="subirLogo"
            style="background:#FF6600;color:#fff;border:none;border-radius:0.625rem;padding:0.7rem 1.75rem;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px rgba(255,102,0,0.3);">
            Actualizar logo
        </button>
    </div>
    @endif
</div>