@extends('layouts.app')

@section('title', 'Tentang Kami - FIN-ANALYSIS PRO')

@push('styles')
<style>
/* Dark mode for pages - Background and text */
.dark {
    color: #f1f5f9 !important;
}

.dark .min-h-screen.bg-gradient-to-br {
    background: linear-gradient(to bottom right, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}

.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

.dark .text-gray-600,
.dark [style*="color:rgb(75, 85, 99)"] {
    color: #cbd5e1 !important;
}

.dark .bg-white {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .bg-gray-50,
.dark .bg-gray-100 {
    background: #334155 !important;
    border-color: #475569 !important;
}

.dark .bg-blue-50 {
    background: #1e3a8a !important;
}

.dark .bg-purple-50 {
    background: #4c1d95 !important;
}

.dark .bg-emerald-50 {
    background: #064e3b !important;
}

.dark .border-blue-200,
.dark .border-purple-200,
.dark .border-emerald-200 {
    border-color: #475569 !important;
}

.dark .bg-blue-100,
.dark .bg-purple-100,
.dark .bg-emerald-100 {
    background: #334155 !important;
}

.dark .text-blue-600,
.dark .text-purple-600,
.dark .text-emerald-600 {
    color: #60a5fa !important;
}

.dark .bg-blue-500,
.dark .bg-purple-500,
.dark .bg-emerald-500 {
    background: #3b82f6 !important;
}

.dark .text-white {
    color: #f1f5f9 !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5) !important;
}

.dark .hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark .border-l-4 {
    border-color: #60a5fa !important;
}

.dark .text-red-500 {
    color: #ef4444 !important;
}

/* Light mode - Ensure correct colors stay light */
.light .text-gray-900 {
    color: #0f172a !important;
}

.light .text-gray-600 {
    color: #475569 !important;
}

.light .text-gray-700 {
    color: #334155 !important;
}

.light .bg-gradient-to-br.from-blue-50 {
    background: linear-gradient(to bottom right, #f0f9ff 0%, #ffffff 50%, #f3f0ff 100%) !important;
}
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
    <!-- Hero Section -->
    <div class="pt-20 pb-16 px-4 sm:px-6 lg:px-8">
        <div class="max-w-4xl mx-auto text-center">
            <div class="inline-block mb-6 px-4 py-2 bg-blue-100 rounded-full">
                <span class="text-blue-600 font-semibold text-sm">TENTANG KAMI</span>
            </div>
            <h1 class="text-5xl sm:text-6xl font-bold text-gray-900 mb-6">
                Analisis Keuangan <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Terpercaya</span>
            </h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Memberikan solusi analisis finansial yang akurat, cepat, dan mudah digunakan untuk membantu bisnis Anda membuat keputusan finansial yang lebih baik.
            </p>
        </div>
    </div>

    <!-- Mission Vision Values Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
                <!-- Mission -->
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 border border-blue-200">
                    <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-bullseye text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Misi Kami</h3>
                    <p class="text-gray-700 leading-relaxed">
                        Membantu UMKM Indonesia memahami kesehatan keuangan mereka dengan teknologi analisis yang terpercaya dan mudah diakses.
                    </p>
                </div>

                <!-- Vision -->
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-8 border border-purple-200">
                    <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-telescope text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Visi Kami</h3>
                    <p class="text-gray-700 leading-relaxed">
                        Menjadi platform analisis keuangan terpercaya nomor 1 untuk UMKM di Asia Tenggara pada tahun 2026.
                    </p>
                </div>

                <!-- Komitmen -->
                <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-2xl p-8 border border-emerald-200">
                    <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-heart text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Komitmen Kami</h3>
                    <p class="text-gray-700 leading-relaxed">
                        Memberikan analisis yang akurat, mudah dipahami, dan dapat ditindaklanjuti oleh setiap pelaku usaha.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Mengapa Memilih Kami -->
    <div class="py-16 px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold text-gray-900 text-center mb-16">Mengapa Memilih Kami?</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-600">
                            <i class="fas fa-bolt text-white text-xl"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Cepat & Efisien</h3>
                        <p class="text-gray-600">Analisis data keuangan dalam hitungan detik dengan teknologi terkini</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-purple-600">
                            <i class="fas fa-shield-alt text-white text-xl"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Aman & Terpercaya</h3>
                        <p class="text-gray-600">Enkripsi tingkat enterprise dengan standar keamanan internasional</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-emerald-600">
                            <i class="fas fa-chart-line text-white text-xl"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Akurat & Terukur</h3>
                        <p class="text-gray-600">Menggunakan metode Altman Z-Score yang terbukti dan terakreditasi</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-orange-600">
                            <i class="fas fa-headset text-white text-xl"></i>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Support Terbaik</h3>
                        <p class="text-gray-600">Tim support profesional siap membantu Anda 24/7</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Altman Z-Score Explanation -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-12 border border-blue-200">
                <h2 class="text-3xl font-bold text-gray-900 mb-6">Tentang Altman Z-Score</h2>
                <p class="text-gray-700 mb-6 leading-relaxed text-lg">
                    Model Altman Z-Score dikembangkan oleh Prof. Edward I. Altman pada tahun 1968 sebagai alat untuk memprediksi kebangkrutan perusahaan. Model ini telah diperbarui berkali-kali, termasuk versi Z'-Score yang kami gunakan, dirancang khusus untuk perusahaan non-publik seperti UMKM.
                </p>
                
                <div class="bg-white rounded-lg p-6 mb-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4">Formula Z':</h3>
                    <p class="font-mono text-blue-600 text-center text-lg font-bold mb-4 bg-blue-50 p-4 rounded-lg">
                        Z' = 0.717(X1) + 0.847(X2) + 3.107(X3) + 0.420(X4) + 0.998(X5)
                    </p>
                    <ul class="space-y-3 text-gray-700">
                        <li><strong>X1:</strong> Aset Lancar ÷ Total Aset</li>
                        <li><strong>X2:</strong> Laba Ditahan ÷ Total Aset</li>
                        <li><strong>X3:</strong> EBIT ÷ Total Aset</li>
                        <li><strong>X4:</strong> Nilai Pasar Ekuitas ÷ Total Utang</li>
                        <li><strong>X5:</strong> Penjualan ÷ Total Aset</li>
                    </ul>
                </div>

                <div class="grid grid-cols-3 gap-4">
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
                        <p class="text-green-600 font-bold text-lg">Z' > 2.99</p>
                        <p class="text-gray-700 mt-2">Zona Aman</p>
                    </div>
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-center">
                        <p class="text-yellow-600 font-bold text-lg">1.81 - 2.99</p>
                        <p class="text-gray-700 mt-2">Zona Waspada</p>
                    </div>
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4 text-center">
                        <p class="text-red-600 font-bold text-lg">Z' < 1.81</p>
                        <p class="text-gray-700 mt-2">Zona Bahaya</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
                <div>
                    <div class="text-5xl font-bold mb-2">10K+</div>
                    <p class="text-blue-100">Pengguna Aktif</p>
                </div>
                <div>
                    <div class="text-5xl font-bold mb-2">50K+</div>
                    <p class="text-blue-100">Analisis Selesai</p>
                </div>
                <div>
                    <div class="text-5xl font-bold mb-2">99.9%</div>
                    <p class="text-blue-100">Uptime</p>
                </div>
                <div>
                    <div class="text-5xl font-bold mb-2">4.9★</div>
                    <p class="text-blue-100">Rating Pengguna</p>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-blue-50">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-4xl font-bold text-gray-900 mb-6">Siap Memulai?</h2>
            <p class="text-xl text-gray-600 mb-8">Bergabunglah dengan ribuan bisnis yang telah mempercayai kami untuk analisis keuangan mereka</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('analysis.step1') }}" class="px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold rounded-lg hover:shadow-lg transition inline-flex items-center justify-center">
                    <i class="fas fa-arrow-right mr-2"></i>Mulai Analisis Gratis
                </a>
                <a href="{{ route('public.contact') }}" class="px-8 py-4 bg-white text-blue-600 font-bold rounded-lg border-2 border-blue-600 hover:bg-blue-50 transition inline-flex items-center justify-center">
                    <i class="fas fa-envelope mr-2"></i>Hubungi Kami
                </a>
            </div>
        </div>
    </div>
</div>
@endsection