@extends('public.layout')
@section('title', 'Tentang Kami')
@section('content')

<section class="max-w-6xl mx-auto px-6 py-24">
    <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
        <span class="w-4 h-px bg-gray-400 inline-block"></span> Tentang
    </p>
    <h1 class="text-5xl font-bold leading-tight mb-6">Persegi</h1>
    <p class="text-gray-500 text-lg max-w-2xl leading-relaxed mb-16">
        Organisasi pemuda independen Desa Karangdadap, Kecamatan Kalibagor, Kabupaten Banyumas.
        Kami bergerak di bidang sosial, pendidikan, olahraga, dan budaya dengan prinsip
        transparansi, gotong royong, dan inovasi.
    </p>

    <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3 flex items-center gap-2">
        <span class="w-4 h-px bg-gray-400 inline-block"></span> Struktur
    </p>
    <h2 class="text-3xl font-bold mb-10">Divisi organisasi</h2>

    <div class="grid md:grid-cols-2 gap-6">
        @foreach($divisi as $div)
        <div class="border border-gray-100 rounded-xl p-6 hover:border-gray-300 transition">
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-2 flex items-center gap-2">
                <span class="w-3 h-px bg-gray-400 inline-block"></span> {{ $div->members_count }} anggota
            </p>
            <h3 class="font-bold text-lg mb-2">{{ $div->name }}</h3>
            <p class="text-sm text-gray-500 leading-relaxed">{{ $div->description }}</p>
        </div>
        @endforeach
    </div>
</section>

@endsection