@extends('layouts.app')
@section('title', 'Tentang Desa')
@section('meta_description', 'Sejarah, asal-usul, visi misi, dan motto Desa Suka Baru')

@section('content')
<div class="bg-primary py-10">
    <div class="max-w-7xl mx-auto px-4">
        <nav class="text-blue-200 text-sm mb-2">
            <a href="{{ route('home') }}" class="hover:text-white">Beranda</a>
            <span class="mx-2">/</span>
            <span class="text-white">Profil — Tentang Desa</span>
        </nav>
        <h1 class="text-3xl font-bold text-white">Tentang Desa Suka Baru</h1>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-10">

            @if($profile->sejarah_singkat)
            <div>
                <h2 class="section-title">Sejarah Singkat</h2>
                <div class="section-divider"></div>
                <p class="text-gray-600 leading-relaxed whitespace-pre-line">{{ $profile->sejarah_singkat }}</p>
            </div>
            @endif

            @if($profile->asal_usul)
            <div>
                <h2 class="section-title">Asal-usul Nama Desa</h2>
                <div class="section-divider"></div>
                <p class="text-gray-600 leading-relaxed whitespace-pre-line">{{ $profile->asal_usul }}</p>
            </div>
            @endif

            @if($profile->sambutan_kepala_desa)
            <div>
                <h2 class="section-title">Sambutan Kepala Desa</h2>
                <div class="section-divider"></div>
                <p class="text-gray-600 leading-relaxed whitespace-pre-line">{{ $profile->sambutan_kepala_desa }}</p>
            </div>
            @endif
        </div>

        <div class="space-y-6">
            @if($profile->visi)
            <div class="bg-primary rounded-xl p-6 text-white">
                <h3 class="font-bold text-lg mb-3 flex items-center gap-2">
                    <svg class="w-5 h-5 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    Visi
                </h3>
                <p class="text-blue-100 text-sm leading-relaxed">{{ $profile->visi }}</p>
            </div>
            @endif

            @if($profile->misi)
            <div class="card p-6">
                <h3 class="font-bold text-primary text-lg mb-3">Misi</h3>
                <div class="text-gray-600 text-sm leading-relaxed whitespace-pre-line">{{ $profile->misi }}</div>
            </div>
            @endif

            @if($profile->motto)
            <div class="bg-blue-50 border border-blue-100 rounded-xl p-6 text-center">
                <p class="text-sm text-gray-400 mb-1">Motto Desa</p>
                <p class="text-xl font-bold text-primary">"{{ $profile->motto }}"</p>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection
