@extends('layouts.public')

@section('title', 'Events & Seminars - ' . config('app.name'))
@section('meta_description', 'Browse upcoming admission events, seminars, and expert workshops. Register free and secure your spot.')

@push('styles')
<style>
/* ── Events page ── */
.ev-page { background: #f8fafc; min-height: 100vh; }

.ev-hero {
    background: var(--page-head-gradient);
    color: #fff;
    padding: 56px 0 72px;
    position: relative;
    overflow: hidden;
}

.ev-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,0.07) 0%, transparent 60%);
    pointer-events: none;
}

.ev-wrap {
    width: min(1180px, calc(100% - 28px));
    margin: 0 auto;
}

.ev-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    margin-bottom: 16px;
}

.ev-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 14px;
    max-width: 18ch;
}

.ev-hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.86);
    line-height: 1.68;
    max-width: 56ch;
    margin: 0 0 24px;
}

.ev-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    background: #fff;
    color: var(--brand-secondary);
    font-size: 0.93rem;
    transition: transform 0.2s ease;
    text-decoration: none;
}
.ev-hero-btn:hover { transform: translateY(-2px); }

/* ── Listing section ── */
.ev-listing {
    padding: 0 0 64px;
    margin-top: -36px;
}

.ev-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ev-card {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(15,23,42,0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    text-decoration: none;
    color: inherit;
}

.ev-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(15,23,42,0.13);
}

.ev-card-media {
    height: 200px;
    background: color-mix(in srgb, var(--brand-primary) 10%, #ffffff);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.ev-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ev-card:hover .ev-card-media img {
    transform: scale(1.06);
}

.ev-card-date {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    line-height: 1;
}

.ev-card-date-day {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--brand-accent);
    display: block;
}

.ev-card-date-mon {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    display: block;
    margin-top: 2px;
}

.ev-card-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ev-card-meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-accent);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ev-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--brand-secondary);
    margin: 0 0 8px;
    line-height: 1.35;
}

.ev-card-excerpt {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0 0 16px;
    flex: 1;
}

.ev-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-secondary);
    background: #f9fafb;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ev-card-btn:hover {
    background: color-mix(in srgb, var(--brand-primary) 8%, #ffffff);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.ev-empty {
    grid-column: 1/-1;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 64px 24px;
    text-align: center;
    color: #9ca3af;
}

/* ── CTA band ── */
.ev-cta {
    background: var(--page-head-gradient);
    border-radius: 22px;
    padding: 28px 32px;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin-top: 20px;
}

.ev-cta h3 {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 900;
    margin: 0 0 6px;
}

.ev-cta p {
    margin: 0;
    color: rgba(255,255,255,.85);
    font-size: 0.95rem;
}

.ev-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-secondary);
    font-weight: 700;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}
.ev-cta-btn:hover { transform: translateY(-2px); }

.ev-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

@media (max-width: 1024px) {
    .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-cta { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ev-grid { grid-template-columns: 1fr; }
    .ev-hero { padding: 40px 0 60px; }
}
</style>
@endpush

@section('content')
<div class="ev-page">
    <section class="ev-hero">
        <div class="ev-wrap">
            <span class="ev-hero-eyebrow">
                <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                Events & Seminars
            </span>
            <h1>Events, Workshops &amp; Webinars</h1>
            <p>Attend our upcoming admission seminars, expert sessions, and university fairs. All events are free to register.</p>
            <button type="button" onclick="ApplyModal.open()" class="ev-hero-btn">Book A Free Consultation</button>
        </div>
    </section>

    <section class="ev-listing">
        <div class="ev-wrap">
            @if($events->isEmpty())
                <div class="ev-grid">
                    <div class="ev-empty">
                        <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        <p class="font-semibold text-gray-500 text-lg">No events scheduled right now</p>
                        <p class="text-sm mt-1">Check back soon for upcoming seminars and workshops.</p>
                    </div>
                </div>
            @else
                <div class="ev-grid">
                    @foreach($events as $event)
                        <article class="ev-card">
                            <a href="{{ route('events.show', $event->slug) }}" class="ev-card-media" style="display:block;">
                                @if($event->cover_image)
                                    <img src="{{ $event->cover_url }}" alt="{{ $event->title }}">
                                @endif
                                @if($event->starts_at)
                                    <div class="ev-card-date">
                                        <span class="ev-card-date-day">{{ $event->starts_at->format('d') }}</span>
                                        <span class="ev-card-date-mon">{{ $event->starts_at->format('M') }}</span>
                                    </div>
                                @endif
                            </a>
                            <div class="ev-card-body">
                                <p class="ev-card-meta">{{ $event->starts_at ? $event->starts_at->format('D, d M Y · h:i A') : 'Date coming soon' }}</p>
                                <h2 class="ev-card-title">{{ $event->title }}</h2>
                                @if($event->excerpt)
                                    <p class="ev-card-excerpt">{{ $event->excerpt }}</p>
                                @endif
                                <a href="{{ route('events.show', $event->slug) }}" class="ev-card-btn">View Details →</a>
                            </div>
                        </article>
                    @endforeach
                </div>

                @if($events->hasPages())
                    <div class="ev-pagination">{{ $events->links() }}</div>
                @endif
            @endif

            @php $ctaData = $homeContent['final'] ?? []; @endphp
            @include('partials.final-cta', ['cta' => $ctaData])
        </div>
    </section>
</div>
@endsection