@extends('layouts.website')

@section('title', 'Ekstrakulikuler')

@section('content')

<div class="container my-5">
    <div class="section-header text-center mb-5">
        <h3 class="fw-bold" style="color: #1a237e;">Kegiatan Ekstrakulikuler</h3>
    </div>

    <div class="row g-4">
        {{-- Item 1: Pramuka --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 text-center p-4">
                <div class="mb-3">
                    <i class="fas fa-campground fa-3x text-warning"></i>
                </div>
                <h5 class="fw-bold text-dark">Pramuka</h5>
                <p class="text-muted small">Membentuk karakter disiplin, mandiri, dan jiwa kepemimpinan.</p>
            </div>
        </div>

        {{-- Item 2: Olahraga (Basket/Futsal) --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 text-center p-4">
                <div class="mb-3">
                    <i class="fas fa-basketball-ball fa-3x text-warning"></i>
                </div>
                <h5 class="fw-bold text-dark">Olahraga</h5>
                <p class="text-muted small">Futsal, Basket, dan Voli untuk kesehatan dan prestasi.</p>
            </div>
        </div>

        {{-- Item 3: Rohis --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 text-center p-4">
                <div class="mb-3">
                    <i class="fas fa-quran fa-3x text-warning"></i>
                </div>
                <h5 class="fw-bold text-dark">Rohis</h5>
                <p class="text-muted small">Memperdalam ilmu agama dan kegiatan sosial keagamaan.</p>
            </div>
        </div>

        {{-- Item 4: PMR --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 text-center p-4">
                <div class="mb-3">
                    <i class="fas fa-first-aid fa-3x text-warning"></i>
                </div>
                <h5 class="fw-bold text-dark">PMR</h5>
                <p class="text-muted small">Palang Merah Remaja, melatih kepedulian dan pertolongan pertama.</p>
            </div>
        </div>

        {{-- Item 5: Seni Tari/Musik --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 text-center p-4">
                <div class="mb-3">
                    <i class="fas fa-music fa-3x text-warning"></i>
                </div>
                <h5 class="fw-bold text-dark">Seni & Budaya</h5>
                <p class="text-muted small">Seni Tari, Musik, dan Teater untuk melestarikan budaya.</p>
            </div>
        </div>

        {{-- Item 6: English Club --}}
        <div class="col-md-4">
            <div class="card h-100 shadow-sm border-0 text-center p-4">
                <div class="mb-3">
                    <i class="fas fa-language fa-3x text-warning"></i>
                </div>
                <h5 class="fw-bold text-dark">English Club</h5>
                <p class="text-muted small">Meningkatkan kemampuan berbahasa Inggris secara aktif.</p>
            </div>
        </div>
    </div>
</div>

@endsection