@extends('layouts.public')

@section('title', 'Tentang - IPA')

@section('content')
    <section class="bg-gradient-to-br from-primary-500 to-primary-600 text-white">
        <div class="container-custom py-16">
            <h1 class="text-4xl font-bold">Tentang IPA</h1>
            <p class="text-white/90 mt-2 text-lg">Portal Informasi Pemanfaatan Aset Daerah</p>
        </div>
    </section>

    <section class="container-custom py-12 max-w-4xl">
        <div class="card p-8 prose prose-lg max-w-none">
            <h2 class="text-2xl font-bold text-gray-900">Profil Aplikasi</h2>
            <p class="text-gray-600 leading-relaxed">
                IPA (Implementasi Pemanfaatan Aset) merupakan portal informasi resmi yang menyediakan data aset daerah yang dapat dimanfaatkan atau disewa oleh masyarakat umum. Sistem ini dirancang untuk mempermudah akses informasi aset daerah secara terpusat, transparan, dan mudah diakses.
            </p>

            <h3 class="text-xl font-bold text-gray-900 mt-8">Tujuan</h3>
            <ul class="text-gray-600 leading-relaxed space-y-2">
                <li>Menyediakan platform publikasi informasi aset daerah</li>
                <li>Mempermudah masyarakat memperoleh informasi aset</li>
                <li>Menjadi media promosi aset daerah</li>
                <li>Meningkatkan potensi pemanfaatan aset daerah</li>
                <li>Membantu OPD dalam mengelola publikasi aset</li>
                <li>Meningkatkan transparansi informasi aset daerah</li>
            </ul>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-10">
            <div class="card p-6">
                <h3 class="text-lg font-semibold text-gray-900">Portal Publik</h3>
                <p class="text-sm text-gray-600 mt-2">Informasi aset daerah dapat diakses oleh masyarakat umum secara cepat dan konsisten.</p>
            </div>
            <div class="card p-6">
                <h3 class="text-lg font-semibold text-gray-900">Data Terpusat</h3>
                <p class="text-sm text-gray-600 mt-2">Semua aset terdaftar dalam satu platform resmi yang mudah dijelajahi.</p>
            </div>
            <div class="card p-6">
                <h3 class="text-lg font-semibold text-gray-900">Kontak Resmi</h3>
                <p class="text-sm text-gray-600 mt-2">Pengguna dapat langsung menghubungi pengelola aset melalui informasi kontak resmi.</p>
            </div>
        </div>

        @if($opds->count())
            <div class="mt-10">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">OPD Pengelola</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @foreach($opds as $opd)
                        <div class="card p-5">
                            <h3 class="font-semibold text-gray-900">{{ $opd->name }}</h3>
                            @if($opd->address)
                                <p class="text-sm text-gray-600 mt-2 flex items-start gap-2">
                                    <svg class="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    {{ $opd->address }}
                                </p>
                            @endif
                            @if($opd->phone)
                                <p class="text-sm text-gray-600 mt-1 flex items-center gap-2">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                                    {{ $opd->phone }}
                                </p>
                            @endif
                            @if($opd->email)
                                <p class="text-sm text-gray-600 mt-1 flex items-center gap-2">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                    {{ $opd->email }}
                                </p>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </section>
@endsection