@extends('layouts.app')
@section('title', 'Fitur - FIN-ANALYSIS PRO')
@section('content')
<div style="max-width:900px;margin:0 auto">

    <div style="text-align:center;margin-bottom:3rem">
        <h1 style="font-family:'Syne',sans-serif;font-size:2.25rem;font-weight:800;color:#1E293B;margin:0 0 1rem">Fitur Unggulan</h1>
        <p style="color:#64748B;font-size:1.0625rem">Semua yang Anda butuhkan untuk analisis keuangan UMKM yang profesional.</p>
    </div>

    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:3rem">
        @foreach([
            ['#DBEAFE','#1A56DB','M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z','Analisis Z-Score','Hitung Altman Z-Score secara otomatis hanya dengan memasukkan data keuangan dasar.'],
            ['#D1FAE5','#059669','M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z','Laporan PDF','Generate laporan PDF profesional dengan satu klik, siap dicetak atau dibagikan.'],
            ['#EDE9FE','#7C3AED','M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z','Multi Perusahaan','Kelola dan pantau beberapa perusahaan sekaligus dalam satu dashboard.'],
            ['#FEF3C7','#D97706','M22 12h-4l-3 9L9 3l-3 9H2','Trend Analysis','Pantau perkembangan Z-Score dari waktu ke waktu dengan grafik visual yang interaktif.'],
            ['#FEE2E2','#DC2626','M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z','Keamanan Data','Data Anda dilindungi dengan enkripsi dan tidak pernah dibagikan ke pihak ketiga.'],
            ['#F0FDF4','#16A34A','M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z','Akurasi Tinggi','Menggunakan model Altman Z-Score yang telah terbukti secara akademis dan industri.'],
        ] as [$bg,$color,$icon,$title,$desc])
        <div class="card" style="padding:1.5rem;text-align:center">
            <div style="width:52px;height:52px;border-radius:12px;background:{{ $bg }};display:flex;align-items:center;justify-content:center;margin:0 auto .875rem">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="{{ $color }}" stroke-width="2"><path d="{{ $icon }}"/></svg>
            </div>
            <h3 style="font-weight:700;color:#1E293B;margin:0 0 .5rem;font-size:.9375rem">{{ $title }}</h3>
            <p style="color:#64748B;font-size:.8125rem;margin:0;line-height:1.6">{{ $desc }}</p>
        </div>
        @endforeach
    </div>

    <div style="text-align:center">
        <a href="{{ route('register') }}" class="btn btn-primary" style="padding:.875rem 2rem;font-size:1rem">Daftar Gratis →</a>
    </div>
</div>
@endsection