@extends('layouts.app')

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

@section('full-width', true)

@section('content')
<!-- Hero Section dengan Background Gradient Modern -->
<div class="relative overflow-hidden bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900">
    <!-- Animated Background Elements -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
        <div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
        <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
    </div>

    <!-- Floating Shapes -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute left-1/4 top-1/4 w-64 h-64 bg-white opacity-5 rounded-full transform rotate-45"></div>
        <div class="absolute right-1/4 bottom-1/4 w-96 h-96 bg-white opacity-5 rounded-lg transform rotate-12"></div>
        <div class="absolute left-1/3 bottom-1/3 w-48 h-48 bg-white opacity-5 rounded-full"></div>
    </div>

    <!-- Main Hero Content -->
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <!-- Left Column - Text Content -->
            <div class="text-center lg:text-left">
                <!-- Badge -->
                <div class="inline-flex items-center bg-white/10 backdrop-blur-sm rounded-full px-4 py-2 mb-6">
                    <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse mr-2"></span>
                    <span class="text-sm font-medium text-white">Altman Z-Score Analysis</span>
                </div>

                <!-- Main Heading -->
                <h1 class="text-4xl lg:text-6xl font-bold text-white mb-6 leading-tight">
                    Analisis Kesehatan
                    <span class="block text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-pink-300">
                        Keuangan Perusahaan
                    </span>
                </h1>

                <!-- Description -->
                <p class="text-xl text-blue-100 mb-8 leading-relaxed">
                    FIN-ANALYSIS PRO hadir untuk membantu Anda menganalisis risiko kebangkrutan perusahaan dengan metode Altman Z-Score yang akurat dan terpercaya.
                </p>

                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                    @auth
                        <a href="{{ route('analysis.step1') }}" 
                           class="group relative inline-flex items-center px-8 py-4 bg-white text-blue-900 font-semibold rounded-xl shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 overflow-hidden">
                            <span class="absolute inset-0 bg-gradient-to-r from-yellow-300 to-pink-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                            <span class="relative flex items-center">
                                <i class="fas fa-rocket mr-2 group-hover:animate-bounce"></i>
                                Mulai Analisis Baru
                                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                            </span>
                        </a>
                    @else
                        <a href="{{ route('register') }}" 
                           class="group relative inline-flex items-center px-8 py-4 bg-white text-blue-900 font-semibold rounded-xl shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 overflow-hidden">
                            <span class="absolute inset-0 bg-gradient-to-r from-yellow-300 to-pink-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                            <span class="relative flex items-center">
                                <i class="fas fa-user-plus mr-2"></i>
                                Daftar Gratis
                                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                            </span>
                        </a>
                        <a href="{{ route('login') }}" 
                           class="inline-flex items-center px-8 py-4 border-2 border-white/30 text-white font-semibold rounded-xl hover:bg-white/10 transform hover:-translate-y-1 transition-all duration-300">
                            <i class="fas fa-sign-in-alt mr-2"></i>
                            Masuk
                        </a>
                    @endauth
                </div>

                <!-- Stats -->
                <div class="mt-12 grid grid-cols-3 gap-4 max-w-md mx-auto lg:mx-0">
                    <div class="text-center">
                        <div class="text-3xl font-bold text-white">1000+</div>
                        <div class="text-sm text-blue-200">Analisis Selesai</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-white">500+</div>
                        <div class="text-sm text-blue-200">Perusahaan</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-white">98%</div>
                        <div class="text-sm text-blue-200">User Puas</div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Dashboard Preview -->
            <div class="hidden lg:block relative">
                <div class="relative bg-white/5 backdrop-blur-sm rounded-2xl p-4 border border-white/10 shadow-2xl">
                    <!-- Chart Preview -->
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <div class="w-3 h-3 bg-green-400 rounded-full"></div>
                                <span class="text-sm text-white">Z-Score Overview</span>
                            </div>
                            <div class="flex space-x-1">
                                <div class="w-2 h-2 bg-white/30 rounded-full"></div>
                                <div class="w-2 h-2 bg-white/30 rounded-full"></div>
                                <div class="w-2 h-2 bg-white/30 rounded-full"></div>
                            </div>
                        </div>
                        
                        <!-- Animated Chart Bars -->
                        <div class="grid grid-cols-5 gap-2 h-40 items-end">
                            @foreach([65, 80, 45, 70, 90] as $height)
                                <div class="relative group">
                                    <div class="bg-gradient-to-t from-blue-400 to-purple-400 rounded-t-lg transition-all duration-300 group-hover:from-yellow-400 group-hover:to-pink-400"
                                         style="height: {{ $height }}%"></div>
                                    <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-xs text-white/70">
                                        X{{ $loop->index + 1 }}
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <!-- Gauge Preview -->
                        <div class="mt-8 relative pt-4">
                            <div class="w-full h-2 bg-white/20 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 animate-pulse" style="width: 75%"></div>
                            </div>
                            <div class="flex justify-between mt-2 text-xs text-white/70">
                                <span>Bahaya</span>
                                <span>Waspada</span>
                                <span>Aman</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Floating Card -->
                <div class="absolute -bottom-6 -left-6 bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20 w-48 animate-float">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-green-400 rounded-full flex items-center justify-center">
                            <i class="fas fa-check text-white"></i>
                        </div>
                        <div>
                            <div class="text-sm text-white">Z-Score: 2.85</div>
                            <div class="text-xs text-white/70">Zona Waspada</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Wave Separator -->
    <div class="absolute bottom-0 left-0 right-0">
        <svg class="fill-current text-gray-50 dark:text-gray-900" viewBox="0 0 1440 120">
            <path d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"></path>
        </svg>
    </div>
</div>

<!-- Features Section -->
<div class="py-24 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                Fitur <span class="text-blue-600 dark:text-blue-400">Unggulan</span>
            </h2>
            <p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
                Dilengkapi dengan berbagai fitur canggih untuk membantu analisis keuangan Anda
            </p>
        </div>

        <!-- Features Grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Feature 1 -->
            <div class="group relative bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300">
                <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
                <div class="relative z-10">
                    <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-white/20 transition-colors">
                        <i class="fas fa-chart-line text-3xl text-blue-600 dark:text-blue-400 group-hover:text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 group-hover:text-white">Analisis Akurat</h3>
                    <p class="text-gray-600 dark:text-gray-400 group-hover:text-white/90">
                        Menggunakan metode Altman Z-Score yang teruji dan diakui secara internasional
                    </p>
                </div>
            </div>

            <!-- Feature 2 -->
            <div class="group relative bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300">
                <div class="absolute inset-0 bg-gradient-to-r from-green-600 to-emerald-600 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
                <div class="relative z-10">
                    <div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-white/20 transition-colors">
                        <i class="fas fa-bolt text-3xl text-green-600 dark:text-green-400 group-hover:text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 group-hover:text-white">Cepat & Mudah</h3>
                    <p class="text-gray-600 dark:text-gray-400 group-hover:text-white/90">
                        Proses analisis hanya dalam 3 langkah sederhana dan hasil instan
                    </p>
                </div>
            </div>

            <!-- Feature 3 -->
            <div class="group relative bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300">
                <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
                <div class="relative z-10">
                    <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-white/20 transition-colors">
                        <i class="fas fa-file-pdf text-3xl text-purple-600 dark:text-purple-400 group-hover:text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 group-hover:text-white">Laporan PDF</h3>
                    <p class="text-gray-600 dark:text-gray-400 group-hover:text-white/90">
                        Generate laporan profesional dalam format PDF siap cetak
                    </p>
                </div>
            </div>

            <!-- Feature 4 -->
            <div class="group relative bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300">
                <div class="absolute inset-0 bg-gradient-to-r from-orange-600 to-red-600 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10"></div>
                <div class="relative z-10">
                    <div class="w-16 h-16 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center mb-4 group-hover:bg-white/20 transition-colors">
                        <i class="fas fa-history text-3xl text-orange-600 dark:text-orange-400 group-hover:text-white"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 group-hover:text-white">Riwayat Lengkap</h3>
                    <p class="text-gray-600 dark:text-gray-400 group-hover:text-white/90">
                        Semua hasil analisis tersimpan rapi dan mudah diakses kapan saja
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- How It Works Section -->
<div class="py-24 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                Cara <span class="text-blue-600 dark:text-blue-400">Kerja</span>
            </h2>
            <p class="text-xl text-gray-600 dark:text-gray-400">
                Analisis keuangan dalam 3 langkah mudah
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8 relative">
            <!-- Step 1 -->
            <div class="relative text-center">
                <div class="absolute top-12 left-1/2 w-full h-0.5 bg-gradient-to-r from-blue-400 to-transparent hidden md:block"></div>
                <div class="relative inline-flex items-center justify-center w-24 h-24 bg-blue-100 dark:bg-blue-900 rounded-full mb-6 mx-auto">
                    <span class="text-3xl font-bold text-blue-600 dark:text-blue-400">1</span>
                    <div class="absolute -top-2 -right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs">
                        <i class="fas fa-check"></i>
                    </div>
                </div>
                <h3 class="text-xl font-semibold mb-3">Data Perusahaan</h3>
                <p class="text-gray-600 dark:text-gray-400">
                    Masukkan informasi dasar perusahaan seperti nama, bidang usaha, dan periode laporan
                </p>
                <div class="mt-4 text-blue-600 dark:text-blue-400">
                    <i class="fas fa-building text-2xl"></i>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="relative text-center">
                <div class="absolute top-12 left-1/2 w-full h-0.5 bg-gradient-to-r from-blue-400 to-transparent hidden md:block"></div>
                <div class="relative inline-flex items-center justify-center w-24 h-24 bg-purple-100 dark:bg-purple-900 rounded-full mb-6 mx-auto">
                    <span class="text-3xl font-bold text-purple-600 dark:text-purple-400">2</span>
                </div>
                <h3 class="text-xl font-semibold mb-3">Data Keuangan</h3>
                <p class="text-gray-600 dark:text-gray-400">
                    Input data keuangan seperti aset, utang, pendapatan, dan biaya operasional
                </p>
                <div class="mt-4 text-purple-600 dark:text-purple-400">
                    <i class="fas fa-chart-pie text-2xl"></i>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="relative text-center">
                <div class="relative inline-flex items-center justify-center w-24 h-24 bg-green-100 dark:bg-green-900 rounded-full mb-6 mx-auto">
                    <span class="text-3xl font-bold text-green-600 dark:text-green-400">3</span>
                </div>
                <h3 class="text-xl font-semibold mb-3">Hasil Analisis</h3>
                <p class="text-gray-600 dark:text-gray-400">
                    Dapatkan hasil Z-Score lengkap dengan interpretasi dan rekomendasi
                </p>
                <div class="mt-4 text-green-600 dark:text-green-400">
                    <i class="fas fa-check-circle text-2xl"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Statistics Section with Parallax -->
<div class="relative bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-800 dark:to-indigo-800 py-20 overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <svg class="absolute left-0 top-0 h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon points="0,0 100,0 0,100" fill="white"/>
        </svg>
        <svg class="absolute right-0 bottom-0 h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon points="100,100 0,100 100,0" fill="white"/>
        </svg>
    </div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
                <div class="text-5xl font-bold text-white mb-2 counter" data-target="5000">0</div>
                <div class="text-blue-200">Analisis Selesai</div>
            </div>
            <div>
                <div class="text-5xl font-bold text-white mb-2 counter" data-target="2500">0</div>
                <div class="text-blue-200">Perusahaan Terdaftar</div>
            </div>
            <div>
                <div class="text-5xl font-bold text-white mb-2 counter" data-target="150">0</div>
                <div class="text-blue-200">Konsultan Aktif</div>
            </div>
            <div>
                <div class="text-5xl font-bold text-white mb-2 counter" data-target="98">0%</div>
                <div class="text-blue-200">Tingkat Kepuasan</div>
            </div>
        </div>
    </div>
</div>

<!-- Testimonials Section -->
<div class="py-24 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                Apa Kata <span class="text-blue-600 dark:text-blue-400">Mereka</span>
            </h2>
            <p class="text-xl text-gray-600 dark:text-gray-400">
                Testimoni dari para pengguna setia FIN-ANALYSIS PRO
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            <!-- Testimonial 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-6">
                    <img class="w-16 h-16 rounded-full object-cover" src="https://ui-avatars.com/api/?name=Budi+Santoso&background=2563eb&color=fff" alt="Budi Santoso">
                    <div class="ml-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white">Budi Santoso</h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400">CFO, PT Maju Jaya</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300 italic">
                    "FIN-ANALYSIS PRO sangat membantu dalam mengevaluasi kesehatan keuangan perusahaan. Hasil analisisnya akurat dan mudah dipahami."
                </p>
                <div class="mt-4 text-yellow-400">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>

            <!-- Testimonial 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-6">
                    <img class="w-16 h-16 rounded-full object-cover" src="https://ui-avatars.com/api/?name=Siti+Nuraini&background=16a34a&color=fff" alt="Siti Nuraini">
                    <div class="ml-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white">Siti Nuraini</h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Owner, Fashion Boutique</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-dark-300 italic">
                    "Aplikasi yang sangat user-friendly! Saya bisa melakukan analisis keuangan sendiri tanpa perlu konsultan. Sangat direkomendasikan!"
                </p>
                <div class="mt-4 text-yellow-400">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>

            <!-- Testimonial 3 -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-6">
                    <img class="w-16 h-16 rounded-full object-cover" src="https://ui-avatars.com/api/?name=Ahmad+Hidayat&background=9333ea&color=fff" alt="Ahmad Hidayat">
                    <div class="ml-4">
                        <h4 class="font-semibold text-gray-900 dark:text-white">Ahmad Hidayat</h4>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Akuntan Publik</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300 italic">
                    "Tools yang sangat berguna untuk profesi saya. Memudahkan dalam memberikan rekomendasi keuangan kepada klien."
                </p>
                <div class="mt-4 text-yellow-400">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pricing Section (Optional) -->
<div class="py-24 bg-white dark:bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                Pilih <span class="text-blue-600 dark:text-blue-400">Paket</span> Anda
            </h2>
            <p class="text-xl text-gray-600 dark:text-gray-400">
                Mulai analisis keuangan dengan paket yang sesuai kebutuhan
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <!-- Free Plan -->
            <div class="border-2 border-gray-200 dark:border-gray-700 rounded-2xl p-8 hover:border-blue-500 transition-colors">
                <h3 class="text-2xl font-bold mb-2">Gratis</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">Untuk mencoba fitur dasar</p>
                <div class="text-4xl font-bold mb-6">Rp 0</div>
                <ul class="space-y-3 mb-8">
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        5 Analisis per bulan
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Laporan PDF dasar
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Riwayat 30 hari
                    </li>
                </ul>
                <a href="{{ route('register') }}" class="block text-center btn-outline w-full">
                    Mulai Gratis
                </a>
            </div>

            <!-- Pro Plan -->
            <div class="relative border-2 border-blue-500 rounded-2xl p-8 shadow-xl transform scale-105 bg-gradient-to-b from-white to-blue-50 dark:from-gray-800 dark:to-gray-800">
                <div class="absolute top-0 right-0 bg-blue-500 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg text-sm font-semibold">
                    POPULER
                </div>
                <h3 class="text-2xl font-bold mb-2">Pro</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">Untuk bisnis berkembang</p>
                <div class="text-4xl font-bold mb-6">Rp 299k<span class="text-lg font-normal text-gray-500">/bln</span></div>
                <ul class="space-y-3 mb-8">
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Analisis tidak terbatas
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Laporan PDF lengkap
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Riwayat selamanya
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Export Excel
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Prioritas support
                    </li>
                </ul>
                <a href="{{ route('register') }}?plan=pro" class="block text-center btn-primary w-full">
                    Pilih Pro
                </a>
            </div>

            <!-- Enterprise Plan -->
            <div class="border-2 border-gray-200 dark:border-gray-700 rounded-2xl p-8 hover:border-purple-500 transition-colors">
                <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">Untuk perusahaan besar</p>
                <div class="text-4xl font-bold mb-6">Custom</div>
                <ul class="space-y-3 mb-8">
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Semua fitur Pro
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        API Access
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Multiple users
                    </li>
                    <li class="flex items-center text-gray-600 dark:text-gray-400">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        Dedicated support
                    </li>
                </ul>
                <!-- Enterprise Plan -->
<div class="border-2 border-gray-200 dark:border-gray-700 rounded-2xl p-8 hover:border-purple-500 transition-colors">
    <h3 class="text-2xl font-bold mb-2">Enterprise</h3>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Untuk perusahaan besar</p>
    <div class="text-4xl font-bold mb-6">Custom</div>
    <ul class="space-y-3 mb-8">
        <li class="flex items-center text-gray-600 dark:text-gray-400">
            <i class="fas fa-check text-green-500 mr-2"></i>
            Semua fitur Pro
        </li>
        <li class="flex items-center text-gray-600 dark:text-gray-400">
            <i class="fas fa-check text-green-500 mr-2"></i>
            API Access
        </li>
        <li class="flex items-center text-gray-600 dark:text-gray-400">
            <i class="fas fa-check text-green-500 mr-2"></i>
            Multiple users
        </li>
        <li class="flex items-center text-gray-600 dark:text-gray-400">
            <i class="fas fa-check text-green-500 mr-2"></i>
            Dedicated support
        </li>
    </ul>
    <a href="{{ route('public.contact') }}" class="block text-center btn-outline w-full">
        Hubungi Kami
    </a>
</div>
            </div>
        </div>
    </div>
</div>

<!-- CTA Section -->
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-800 dark:to-indigo-800 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold text-white mb-4">
            Siap Menganalisis Kesehatan Keuangan Perusahaan?
        </h2>
        <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
            Mulai sekarang dan dapatkan wawasan berharga untuk pengambilan keputusan bisnis yang lebih baik
        </p>
        @auth
            <a href="{{ route('analysis.step1') }}" 
               class="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-xl shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
                <i class="fas fa-rocket mr-2"></i>
                Mulai Analisis Sekarang
            </a>
        @else
            <a href="{{ route('register') }}" 
               class="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-xl shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
                <i class="fas fa-user-plus mr-2"></i>
                Daftar Gratis
            </a>
        @endauth
    </div>
</div>

<!-- Footer (already in layout, but we can add extra content) -->
@endsection

@push('styles')
<style>
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.counter {
    animation: countUp 2s ease-out;
}
</style>
@endpush

@push('scripts')
<script>
// Counter animation
document.addEventListener('DOMContentLoaded', function() {
    const counters = document.querySelectorAll('.counter');
    const speed = 200;
    
    counters.forEach(counter => {
        const updateCount = () => {
            const target = parseInt(counter.getAttribute('data-target'));
            const count = parseInt(counter.innerText);
            const increment = Math.trunc(target / speed);
            
            if (count < target) {
                counter.innerText = Math.min(count + increment, target) + (target === 98 ? '%' : '');
                setTimeout(updateCount, 1);
            } else {
                counter.innerText = target + (target === 98 ? '%' : '');
            }
        };
        
        updateCount();
    });
});

// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});
</script>
@endpush