@extends('layouts.app')

@section('title', 'Panduan Penggunaan - 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 .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,
.dark .bg-purple-50,
.dark .bg-emerald-50,
.dark .bg-orange-50 {
    background: #334155 !important;
    border-color: #475569 !important;
}

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

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

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

.dark .bg-blue-100,
.dark .bg-purple-100,
.dark .bg-emerald-100,
.dark .bg-orange-100 {
    background: #334155 !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 .text-2xl.font-bold {
    color: #f1f5f9 !important;
}

.dark .space-y-3 > div {
    color: #f1f5f9 !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;
}
</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">PANDUAN LENGKAP</span>
            </div>
            <h1 class="text-5xl sm:text-6xl font-bold text-gray-900 mb-6">
                Cara Menggunakan <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">FIN-ANALYSIS PRO</span>
            </h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Ikuti panduan langkah demi langkah kami untuk melakukan analisis keuangan dengan mudah
            </p>
        </div>
    </div>

    <!-- Steps Section -->
    <div class="py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto">
            <div class="space-y-6">
                @foreach([
                    [
                        'step' => '1',
                        'icon' => 'fas fa-building',
                        'color' => 'blue',
                        'title' => 'Masukkan Data Perusahaan',
                        'desc' => 'Mulai dengan mengisi informasi dasar perusahaan Anda. Isi nama perusahaan, pilih bidang usaha yang sesuai, tentukan periode analisis, dan pilih mata uang yang ingin digunakan dalam analisis.',
                        'tips' => [
                            'Pastikan nama perusahaan konsisten untuk memudahkan pelacakan riwayat',
                            'Pilih periode yang sama dengan laporan keuangan Anda',
                            'Anda bisa mengubah informasi di kemudian hari'
                        ]
                    ],
                    [
                        'step' => '2',
                        'icon' => 'fas fa-calculator',
                        'color' => 'purple',
                        'title' => 'Input Data Keuangan',
                        'desc' => 'Masukkan data dari laporan keuangan Anda ke dalam form yang telah disediakan. Data yang dibutuhkan meliputi aset lancar, aset tetap, utang lancar, utang jangka panjang, total pendapatan, dan biaya operasional.',
                        'tips' => [
                            'Ambil data dari neraca (Balance Sheet) untuk aset dan utang',
                            'Ambil data dari laporan laba rugi (Income Statement) untuk pendapatan dan biaya',
                            'Pastikan semua angka dalam periode waktu yang sama'
                        ]
                    ],
                    [
                        'step' => '3',
                        'icon' => 'fas fa-chart-bar',
                        'color' => 'emerald',
                        'title' => 'Lihat & Analisis Hasil',
                        'desc' => 'Sistem akan otomatis menghitung Z-Score dan menampilkan kategori zona kesehatan finansial Anda. Lihat visualisasi grafik, interpretasi detail, dan rekomendasi tindakan yang dapat Anda ambil.',
                        'tips' => [
                            'Baca interpretasi secara menyeluruh untuk memahami kondisi bisnis Anda',
                            'Ikuti rekomendasi yang sesuai untuk meningkatkan kesehatan finansial',
                            'Unduh laporan PDF untuk dokumentasi atau presenter ke stakeholder'
                        ]
                    ],
                    [
                        'step' => '4',
                        'icon' => 'fas fa-download',
                        'color' => 'orange',
                        'title' => 'Simpan & Bagikan Laporan',
                        'desc' => 'Semua analisis Anda secara otomatis tersimpan di riwayat. Anda dapat mengunduh laporan PDF kapan saja, membandingkan hasil antar periode, atau membagikan link sharing untuk akses terbatas.',
                        'tips' => [
                            'Laporan PDF berisi semua detail analisis dalam format profesional',
                            'Gunakan riwayat untuk melihat tren kesehatan finansial dari waktu ke waktu',
                            'Bagikan link sharing dengan investor atau pemangku kepentingan lainnya'
                        ]
                    ],
                ] as $item)
                <div class="relative">
                    <!-- Step Card -->
                    <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                        <div class="flex flex-col md:flex-row">
                            <!-- Left Side - Number -->
                            <div class="hidden md:flex md:w-32 bg-gradient-to-br {{ $item['color'] === 'blue' ? 'from-blue-500 to-blue-600' : ($item['color'] === 'purple' ? 'from-purple-500 to-purple-600' : ($item['color'] === 'emerald' ? 'from-emerald-500 to-emerald-600' : 'from-orange-500 to-orange-600')) }} items-center justify-center">
                                <div class="text-center">
                                    <div class="text-6xl font-bold text-white mb-2">{{ $item['step'] }}</div>
                                    <i class="{{ $item['icon'] }} text-white text-2xl"></i>
                                </div>
                            </div>
                            
                            <!-- Right Side - Content -->
                            <div class="flex-1 p-8">
                                <div class="md:hidden mb-4">
                                    <div class="inline-flex items-center justify-center h-14 w-14 rounded-lg {{ $item['color'] === 'blue' ? 'bg-blue-100' : ($item['color'] === 'purple' ? 'bg-purple-100' : ($item['color'] === 'emerald' ? 'bg-emerald-100' : 'bg-orange-100')) }}">
                                        <span class="text-2xl font-bold {{ $item['color'] === 'blue' ? 'text-blue-600' : ($item['color'] === 'purple' ? 'text-purple-600' : ($item['color'] === 'emerald' ? 'text-emerald-600' : 'text-orange-600')) }}">{{ $item['step'] }}</span>
                                    </div>
                                </div>
                                
                                <h3 class="text-2xl font-bold text-gray-900 mb-3">{{ $item['title'] }}</h3>
                                <p class="text-gray-600 mb-6 leading-relaxed">{{ $item['desc'] }}</p>
                                
                                <!-- Tips -->
                                <div class="space-y-3">
                                    <p class="font-semibold text-gray-800 flex items-center">
                                        <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>Tips Berguna
                                    </p>
                                    <ul class="space-y-2 ml-6">
                                        @foreach($item['tips'] as $tip)
                                        <li class="flex items-start">
                                            <span class="text-{{ $item['color'] }}-600 mr-3 font-bold">→</span>
                                            <span class="text-gray-600">{{ $tip }}</span>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Arrow to next step -->
                    @if($item['step'] !== '4')
                    <div class="hidden md:flex justify-center my-4">
                        <div class="w-1 h-12 bg-gradient-to-b from-{{ $item['color'] }}-300 to-gray-200"></div>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Video/Demo Section -->
    <div class="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div class="max-w-5xl mx-auto">
            <h2 class="text-4xl font-bold text-gray-900 text-center mb-12">Fitur-Fitur Utama</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-8 border border-blue-200">
                    <i class="fas fa-file-alt text-3xl text-blue-600 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Laporan PDF Professional</h3>
                    <p class="text-gray-700">Unduh laporan analisis dalam format PDF siap cetak dengan desain profesional dan lengkap dengan semua visualisasi grafik.</p>
                </div>

                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-8 border border-purple-200">
                    <i class="fas fa-history text-3xl text-purple-600 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Riwayat Lengkap</h3>
                    <p class="text-gray-700">Simpan semua analisis dan bandingkan perubahan kesehatan finansial dari waktu ke waktu untuk melihat tren perkembangan.</p>
                </div>

                <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl p-8 border border-emerald-200">
                    <i class="fas fa-share-alt text-3xl text-emerald-600 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Bagikan Laporan</h3>
                    <p class="text-gray-700">Buat link sharing untuk memberikan akses terbatas kepada investor, mitra, atau stakeholder lainnya tanpa akun.</p>
                </div>

                <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-8 border border-orange-200">
                    <i class="fas fa-file-excel text-3xl text-orange-600 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Export Excel</h3>
                    <p class="text-gray-700">Export data analisis dalam format Excel untuk penggunaan lebih lanjut dan integrasi dengan sistem lainnya.</p>
                </div>

                <div class="bg-gradient-to-br from-pink-50 to-pink-100 rounded-xl p-8 border border-pink-200">
                    <i class="fas fa-star text-3xl text-pink-600 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Favorit & Label</h3>
                    <p class="text-gray-700">Tandai analisis penting sebagai favorit atau tambahkan label custom untuk organisasi yang lebih mudah.</p>
                </div>

                <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-xl p-8 border border-indigo-200">
                    <i class="fas fa-shield-alt text-3xl text-indigo-600 mb-4"></i>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Keamanan Terjamin</h3>
                    <p class="text-gray-700">Semua data dienkripsi end-to-end dengan SSL/TLS dan disimpan di server aman dengan backup regular.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <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-4xl mx-auto text-center">
            <h2 class="text-4xl font-bold mb-6">Siap Memulai?</h2>
            <p class="text-xl text-blue-100 mb-8">Ikuti panduan di atas dan lakukan analisis keuangan pertama Anda sekarang juga</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('analysis.step1') }}" class="px-8 py-4 bg-white text-blue-600 font-bold rounded-lg hover:bg-gray-100 transition inline-flex items-center justify-center">
                    <i class="fas fa-play-circle mr-2"></i>Mulai Analisis Gratis
                </a>
                <a href="{{ route('public.faq') }}" class="px-8 py-4 bg-blue-500 text-white font-bold rounded-lg hover:bg-blue-400 transition border-2 border-white inline-flex items-center justify-center">
                    <i class="fas fa-question-circle mr-2"></i>Baca FAQ
                </a>
            </div>
        </div>
    </div>
</div>
@endsection