@extends('layouts.appNew')
@section('title',@$title)
@section('content')
<section id="kegiatan" class="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
            <div class="max-w-xl">
                <h2 class="text-4xl font-extrabold text-slate-900 mb-4 tracking-tight">Kegiatan Sekolah Adiwiyata</h2>
                <p class="text-slate-500">Kumpulan laporan aktivitas harian dari sekolah-sekolah Adiwiyata Jakarta dalam upaya pelestarian lingkungan.</p>
            </div>
        </div>

        <!-- Activity Grid -->
        <div id="activity-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-8">
					@foreach($kegiatan as $dataKeg)
					<?php
				        $image = json_decode($dataKeg->image);
				    ?>
                    <div class="activity-card group bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden flex flex-col h-full fade-in">
                        <div class="relative h-48 overflow-hidden">
                            <img src="{{ asset($image[0]) }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" alt="SMAN 42: Peduli Bumi &amp; Lingkungan">
                            <div class="absolute top-4 left-4">
                                <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-green-600 text-white">
                                    {{ $dataKeg->kategori }}
                                </span>
                            </div>
                        </div>
                        <div class="p-6 flex flex-col flex-grow">
                            <div class="flex items-center text-slate-400 text-xs font-semibold mb-3">
                                <span class="material-symbols-outlined text-sm mr-1">calendar_today</span> {{ date('D',strtotime($dataKeg->created_at)) }}, {{ date('d M Y',strtotime($dataKeg->created_at)) }}
                            </div>
                            <h3 class="text-lg font-bold text-slate-900 mb-2 leading-tight group-hover:text-green-600 transition">{{ $dataKeg->judul }}</h3>
                            <a href="{{ url('kegiatan/'.$dataKeg->slug) }}" class="flex items-center justify-between group/btn py-2 text-green-600 font-bold text-sm">
                                <span>Lihat Selengkapnya</span>
                                <span class="material-symbols-outlined group-hover/btn:translate-x-1 transition">arrow_forward</span>
                            </a>
                        </div>
                    </div>
					@endforeach
                
                </div>

        <div class="mt-16 text-center">
            <button class="bg-white border-2 border-slate-200 text-slate-700 font-bold px-10 py-4 rounded-2xl hover:bg-slate-50 transition">Muat Lebih Banyak Kegiatan</button>
        </div>
    </section>
@endsection