@php
    $slug = $page->slug ?? 'page';
    $icons = [
        'about-us' => 'fa-building-columns',
        'mission' => 'fa-bullseye',
        'vision' => 'fa-eye',
        'objective' => 'fa-list-check',
        'online-education' => 'fa-laptop-file',
    ];
    $icon = $icons[$slug] ?? 'fa-book-open-reader';
@endphp

<style>
    .uni-page-hero{padding:135px 0 70px;background:radial-gradient(circle at 12% 10%,rgba(245,158,11,.18),transparent 28%),linear-gradient(135deg,#0f2f22,#153f2d 58%,#0b2419);color:#fff;position:relative;overflow:hidden}.uni-page-hero:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 42px);pointer-events:none}.uni-page-hero .container{position:relative;z-index:2}.uni-badge{display:inline-flex;gap:10px;align-items:center;border:1px solid rgba(230,196,119,.42);background:rgba(255,255,255,.08);color:#e6c477;border-radius:999px;padding:10px 18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}.uni-title{font-size:clamp(38px,6vw,68px);font-weight:900;letter-spacing:-.04em;margin:22px 0 14px}.uni-sub{max-width:820px;color:rgba(255,255,255,.85);font-size:18px;line-height:1.8}.uni-content-card{margin-top:-42px;position:relative;z-index:3;border-radius:28px;border:1px solid rgba(15,47,34,.12);box-shadow:0 28px 80px rgba(15,47,34,.15);overflow:hidden;background:#fff}.uni-content-head{padding:28px 32px;background:linear-gradient(90deg,#fbf7ee,#fff);border-bottom:1px solid rgba(15,47,34,.1);display:flex;align-items:center;gap:18px}.uni-icon{width:62px;height:62px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#c99a3f,#9a7b55);color:#fff;font-size:25px;box-shadow:0 16px 30px rgba(201,154,63,.25)}.uni-content-body{padding:38px 42px;font-size:17px;line-height:1.9;color:#344054}.uni-content-body h1,.uni-content-body h2,.uni-content-body h3{color:#153f2d;font-weight:850}.uni-side-card{border-radius:24px;background:#fbf7ee;border:1px solid rgba(154,123,85,.16);padding:28px}.uni-side-card .small-title{font-weight:900;color:#153f2d}.uni-side-card li{margin-bottom:12px;color:#667085}.uni-cta{margin:42px 0 70px;border-radius:28px;background:linear-gradient(135deg,#153f2d,#0f2f22);color:#fff;padding:34px;display:flex;justify-content:space-between;gap:22px;align-items:center}.uni-cta p{margin:0;color:rgba(255,255,255,.78)}@media(max-width:768px){.uni-content-head{padding:22px;align-items:flex-start}.uni-content-body{padding:26px 22px}.uni-cta{flex-direction:column;align-items:flex-start}}
</style>

<section class="uni-page-hero">
    <div class="container">
        <a href="{{ route('front.home') }}" class="btn btn-sm btn-light rounded-pill mb-4"><i class="fa-solid fa-arrow-left me-1"></i> {{ __('front.home') }}</a>
        <div class="uni-badge"><i class="fa-solid {{ $icon }}"></i> Afghan Online Education</div>
        <h1 class="uni-title">{{ $page->title }}</h1>
        <p class="uni-sub">Learn Online. Grow Beyond. Build the Future. A modern digital learning environment for Afghan students, teachers, and lifelong learners.</p>
    </div>
</section>

<section class="pb-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-8">
                <div class="uni-content-card">
                    <div class="uni-content-head">
                        <div class="uni-icon"><i class="fa-solid {{ $icon }}"></i></div>
                        <div>
                            <div class="text-uppercase small text-muted fw-bold">University Information</div>
                            <h2 class="mb-0 fw-bold text-success-emphasis">{{ $page->title }}</h2>
                        </div>
                    </div>
                    <div class="uni-content-body">
                        @if(!$page->body)
                            <p class="text-muted mb-0">{{ __('front.no_content_yet') }}</p>
                        @else
                            {!! $page->body !!}
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="uni-side-card sticky-lg-top" style="top:100px;">
                    <div class="small-title mb-3"><i class="fa-solid fa-star text-warning me-2"></i>Our focus</div>
                    <ul class="list-unstyled mb-0">
                        <li><i class="fa-solid fa-check text-success me-2"></i>Quality online education</li>
                        <li><i class="fa-solid fa-check text-success me-2"></i>Live classes and digital courses</li>
                        <li><i class="fa-solid fa-check text-success me-2"></i>Support for Afghan girls and boys</li>
                        <li><i class="fa-solid fa-check text-success me-2"></i>Modern university learning system</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="uni-cta">
            <div>
                <h3 class="mb-2">Start your learning journey today</h3>
                <p>Apply online and join Afghan Online Education from anywhere.</p>
            </div>
            <a href="{{ route('front.apply.create') }}" class="btn btn-warning rounded-pill px-4 fw-bold">Apply Online</a>
        </div>
    </div>
</section>