@extends('clients.layouts.app')

@section('title', 'Security Settings')

@section('content')
    <div class="space-y-8 animate-in fade-in duration-700">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-2">
            <div>
                <h1 class="text-4xl font-black text-slate-900 dark:text-white tracking-tight italic">Security Center</h1>
                <p class="text-sm text-slate-400 font-medium mt-1 uppercase tracking-widest">Protect your account and
                    managed services</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Change Password -->
            <div class="bg-white dark:bg-[#1e293b] rounded-lg p-10 border border-slate-100 dark:border-white/5 shadow-sm">
                <h3
                    class="text-lg font-black text-slate-900 dark:text-white uppercase tracking-widest mb-8 flex items-center">
                    <i class="fas fa-key mr-3 text-primary"></i> Change Password
                </h3>
                <div class="space-y-6">
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Current
                            Password</label>
                        <input type="password"
                            class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold focus:ring-2 focus:ring-primary/20 transition-all">
                    </div>
                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">New
                            Password</label>
                        <input type="password"
                            class="w-full bg-slate-50 dark:bg-white/[0.03] border-none rounded-lg px-4 py-3.5 text-sm font-bold focus:ring-2 focus:ring-primary/20 transition-all">
                    </div>
                    <button
                        class="w-full bg-[#1e293b] text-white py-4 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-slate-800 transition-all">Update
                        Password</button>
                </div>
            </div>

            <!-- 2FA -->
            <div class="bg-white dark:bg-[#1e293b] rounded-lg p-10 border border-slate-100 dark:border-white/5 shadow-sm">
                <h3
                    class="text-lg font-black text-slate-900 dark:text-white uppercase tracking-widest mb-8 flex items-center">
                    <i class="fas fa-fingerprint mr-3 text-primary"></i> Two-Factor Auth
                </h3>
                <div class="flex flex-col items-center text-center py-4">
                    <div
                        class="w-20 h-20 bg-rose-50 dark:bg-rose-500/10 rounded-full flex items-center justify-center text-rose-500 mb-6">
                        <i class="fas fa-shield-alt text-3xl"></i>
                    </div>
                    <h4 class="text-xl font-black text-slate-900 dark:text-white italic tracking-tight mb-2">2FA is
                        currently Disabled</h4>
                    <p class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-8 max-w-xs">Adding a second
                        layer of security will significantly protect your account.</p>
                    <button
                        class="bg-primary text-white px-8 py-4 rounded-lg font-bold text-xs uppercase tracking-widest hover:bg-primary-hover transition-all shadow-lg shadow-blue-500/20">Enable
                        2FA Now</button>
                </div>
            </div>
        </div>
    </div>
@endsection