@extends('layouts.app')

@section('title', 'FAQ - 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 .text-gray-700 {
    color: #cbd5e1 !important;
}

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

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

.dark .bg-gray-50 {
    background: #334155 !important;
}

.dark .border-t.border-gray-200 {
    border-color: #475569 !important;
}

.dark .hover\:bg-gray-50:hover {
    background: rgba(51, 65, 85, 0.5) !important;
}

.dark .text-lg.font-bold {
    color: #f1f5f9 !important;
}

.dark .text-gray-400 {
    color: #94a3b8 !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

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

.dark .from-gray-50 {
    background: linear-gradient(to bottom right, #334155 0%, #1e293b 100%) !important;
}

.dark .to-gray-100 {
    background: linear-gradient(to bottom right, #334155 0%, #1e293b 100%) !important;
}

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

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

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

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

.light .text-blue-600 {
    color: #1e40af !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">FAQ</span>
            </div>
            <h1 class="text-5xl sm:text-6xl font-bold text-gray-900 mb-6">
                Pertanyaan <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Umum</span>
            </h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Temukan jawaban atas pertanyaan yang sering ditanyakan tentang FIN-ANALYSIS PRO
            </p>
        </div>
    </div>

    <!-- FAQ Content -->
    <div class="py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl mx-auto">
            <div class="space-y-4">
                @php
                $faqs = [
                    [
                        'icon' => 'fas fa-question-circle',
                        'q' => 'Apa itu Altman Z-Score?',
                        'a' => 'Altman Z-Score adalah model statistik yang dikembangkan oleh Prof. Edward Altman pada tahun 1968 untuk memprediksi kemungkinan kebangkrutan suatu perusahaan. Model ini menggunakan 5 rasio keuangan yang dikombinasikan dengan bobot tertentu untuk menghasilkan skor tunggal yang menunjukkan kesehatan finansial perusahaan.'
                    ],
                    [
                        'icon' => 'fas fa-lock',
                        'q' => 'Apakah data keuangan saya aman?',
                        'a' => 'Ya, keamanan data adalah prioritas utama kami. Semua data dienkripsi menggunakan SSL/TLS dan disimpan di server aman dengan backup regular. Kami tidak pernah menjual atau membagikan data Anda ke pihak ketiga. Anda memiliki kontrol penuh atas data Anda.'
                    ],
                    [
                        'icon' => 'fas fa-credit-card',
                        'q' => 'Berapa biaya menggunakan FIN-ANALYSIS PRO?',
                        'a' => 'Kami menawarkan paket bertingkat untuk semua ukuran bisnis. Paket Gratis tersedia dengan 5 analisis per bulan. Untuk analisis tidak terbatas dan fitur lengkap, tersedia paket Pro seharga Rp 299.000/bulan. Paket Enterprise tersedia untuk kebutuhan khusus.'
                    ],
                    [
                        'icon' => 'fas fa-file-alt',
                        'q' => 'Data keuangan apa yang harus saya siapkan?',
                        'a' => 'Anda memerlukan data dari laporan keuangan perusahaan Anda: Aset Lancar, Aset Tetap, Utang Lancar, Utang Jangka Panjang, Total Penjualan, COGS, dan Biaya Operasional. Data dapat dalam periode tahunan atau periode tertentu sesuai kebutuhan analisis Anda.'
                    ],
                    [
                        'icon' => 'fas fa-chart-line',
                        'q' => 'Apa arti Zona Aman, Waspada, dan Bahaya?',
                        'a' => 'Zona Aman (Z-Score > 2.99): Kondisi keuangan sehat dengan risiko kebangkrutan sangat rendah. Zona Waspada (1.81 - 2.99): Kondisi perlu diperhatikan dan monitoring lebih ketat. Zona Bahaya (Z-Score < 1.81): Risiko kebangkrutan tinggi, memerlukan tindakan perbaikan segera.'
                    ],
                    [
                        'icon' => 'fas fa-globe',
                        'q' => 'Bisakah saya menggunakan mata uang selain Rupiah?',
                        'a' => 'Ya, platform kami mendukung berbagai mata uang internasional termasuk USD, EUR, SGD, dan lainnya. Anda dapat memilih mata uang saat memasukkan data perusahaan dan semua perhitungan akan dilakukan dalam mata uang pilihan Anda.'
                    ],
                    [
                        'icon' => 'fas fa-file-pdf',
                        'q' => 'Bagaimana cara mengunduh laporan analisis?',
                        'a' => 'Setelah analisis selesai, Anda akan melihat tombol "Download PDF" di halaman hasil. Laporan PDF berisi ringkasan analisis, grafik visualisasi, interpretasi detail, dan rekomendasi. Anda juga bisa mengakses laporan dari halaman Riwayat Analisis kapan saja.'
                    ],
                    [
                        'icon' => 'fas fa-building',
                        'q' => 'Apakah ada batas jumlah perusahaan yang bisa dianalisis?',
                        'a' => 'Tidak ada batas jumlah perusahaan yang bisa Anda daftarkan. Namun, jumlah analisis per bulannya tergantung paket Anda. Paket Gratis: 5 analisis/bulan, Paket Pro: Unlimited. Data dari semua perusahaan disimpan dan dapat diakses kapan saja.'
                    ],
                    [
                        'icon' => 'fas fa-users',
                        'q' => 'Apakah saya bisa berbagi akses dengan tim saya?',
                        'a' => 'Untuk paket Pro, Anda bisa mengundang hingga 3 anggota tim. Paket Enterprise mendukung unlimited users. Setiap anggota tim dapat login dengan akun terpisah dan memiliki riwayat analisis sendiri.'
                    ],
                    [
                        'icon' => 'fas fa-redo-alt',
                        'q' => 'Apa itu "Export Excel"?',
                        'a' => 'Fitur Export Excel memungkinkan Anda mengunduh semua data analisis dalam format Excel yang dapat diedit dan digunakan untuk analisis lanjutan. File Excel berisi breakdown semua rasio keuangan, komponen Z-Score, dan timeline perubahan kondisi keuangan.'
                    ],
                ];
                @endphp

                @foreach($faqs as $i => $faq)
                <div class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
                    <button onclick="toggleFaq({{ $i }})"
                            class="w-full text-left px-6 py-5 flex items-center justify-between gap-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center gap-4 flex-1">
                            <div class="flex-shrink-0">
                                <i class="{{ $faq['icon'] }} text-blue-600 text-xl w-6"></i>
                            </div>
                            <h3 class="text-lg font-bold text-gray-900">{{ $faq['q'] }}</h3>
                        </div>
                        <svg id="arrow-{{ $i }}" class="w-6 h-6 text-gray-400 flex-shrink-0 transition-transform duration-300"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                        </svg>
                    </button>
                    <div id="faq-{{ $i }}" class="hidden border-t border-gray-200 px-6 py-5 bg-gradient-to-br from-gray-50 to-gray-100">
                        <p class="text-gray-700 leading-relaxed">{{ $faq['a'] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-4xl mx-auto text-center">
            <div class="inline-block mb-6 px-4 py-2 bg-blue-100 rounded-full">
                <i class="fas fa-question-circle text-blue-600 mr-2"></i>
                <span class="text-blue-600 font-semibold text-sm">MASIH ADA PERTANYAAN?</span>
            </div>
            <h2 class="text-4xl font-bold text-gray-900 mb-6">Tidak menemukan jawaban Anda?</h2>
            <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
                Tim support kami siap membantu menjawab pertanyaan atau masalah teknis yang Anda hadapi
            </p>
            <a href="{{ route('public.contact') }}" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold rounded-lg hover:shadow-lg transition">
                <i class="fas fa-envelope mr-2"></i>Hubungi Support
            </a>
        </div>
    </div>
</div>

@push('scripts')
<script>
function toggleFaq(i) {
    const content = document.getElementById('faq-' + i);
    const arrow = document.getElementById('arrow-' + i);
    
    if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
        arrow.style.transform = 'rotate(180deg)';
    } else {
        content.classList.add('hidden');
        arrow.style.transform = 'rotate(0deg)';
    }
}
</script>
@endpush
@endsection