@extends('public.layout')

@section('title', 'MeXCo Campus')

@push('styles')
<style>
    .campus-hero {
        text-align: center;
        max-width: 760px;
        margin: 0 auto;
    }
    .campus-hero .section-lead {
        margin-left: auto;
        margin-right: auto;
    }
    .campus-cta {
        width: min(720px, 100%);
        margin: 0 auto;
        padding: 2rem 1.5rem;
        border-radius: 20px;
        background: linear-gradient(180deg, #ECFDF5 0%, #fff 55%);
        border: 1px solid #BBF7D0;
        text-align: center;
    }
    .campus-cta .section-kicker { color: #059669; }
    .campus-cta .section-title {
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
    }
    .campus-cta .section-lead {
        margin-left: auto;
        margin-right: auto;
        max-width: 32rem;
    }
    .campus-cta .section-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        justify-content: center;
        margin-top: 1.25rem;
    }
    .campus-points {
        margin: 1.5rem auto 0;
        padding: 0;
        list-style: none;
        max-width: 420px;
        color: var(--muted);
        line-height: 1.7;
        text-align: left;
    }
    .campus-points li {
        position: relative;
        padding-left: 1.15rem;
        margin-bottom: .45rem;
    }
    .campus-points li::before {
        content: '';
        position: absolute;
        left: 0;
        top: .55em;
        width: .45rem;
        height: .45rem;
        border-radius: 50%;
        background: #34D399;
    }
</style>
@endpush

@section('content')
<section class="section">
    <div class="container campus-hero">
        <div class="section-kicker">Sponsorship</div>
        <h1 class="section-title">MeXCo Campus</h1>
        <p class="section-lead">Full-featured event platform sponsored by MeXCo for eligible student events.</p>
    </div>
</section>

<section class="section section-alt section-center" id="campus-plan">
    <div class="container">
        <div class="campus-cta">
            <div class="section-kicker">Campus Plan</div>
            <h2 class="section-title">Full MeXCo for eligible student events</h2>
            <p class="section-lead">
                Sponsored license at RM0 with standard features and 30-day retention after your event ends.
            </p>
            <ul class="campus-points">
                <li>Plan = Campus · License price = RM0</li>
                <li>All standard MeXCo features enabled</li>
                <li>Default retention: 30 days after event completion</li>
            </ul>
            <div class="section-actions">
                <a href="{{ route('mexco.register', ['plan' => 'campus']) }}" class="btn-purple">Apply for Campus Plan</a>
            </div>
        </div>
    </div>
</section>
@endsection
