@extends('layouts.app')
@section('title', 'Kompetensi Keahlian - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')
    <!-- Banner / Header -->
    <section class="relative bg-blue-700 text-white py-20">
        <div class="max-w-6xl mx-auto text-center">
            <h1 class="text-4xl font-bold mb-3">Kompetensi Keahlian</h1>
            <p class="text-lg opacity-90">Mengenal bidang-bidang keahlian yang ada di sekolah kami</p>
        </div>
    </section>

    <!-- Daftar Kompetensi -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-6xl mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold text-blue-700 mb-10">Daftar Kompetensi Keahlian</h2>

            <div class="grid md:grid-cols-3 gap-8">
                @forelse ($kompetensis as $item)
                    <div class="bg-white rounded-2xl shadow hover:shadow-lg transition p-6" data-aos="fade-up">
                        <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->name }}"
                            class="rounded-xl w-full h-48 object-cover mb-4">
                        <h3 class="text-xl font-bold text-blue-700 mb-2">{{ $item->name }}</h3>
                        <p class="text-gray-600 text-sm leading-relaxed text-justify">
                            {{ $item->description }}
                        </p>
                    </div>
                @empty
                    <p class="col-span-3 text-gray-500">Belum ada data kompetensi yang tersedia.</p>
                @endforelse
            </div>
        </div>
    </section>
@endsection