@extends('layouts.public')

@section('title', setting('university_name').' — '.setting('university_tagline'))
@section('description', 'King Ceasor University is a Chartered university in Kampala, Uganda offering programmes in medicine, health sciences, law, management, computing and engineering.')

@section('content')

    {{-- ------------------------------------------------------------ Hero --}}
    <section class="relative overflow-hidden bg-brand-900">
        <div class="absolute inset-0" aria-hidden="true">
            <div class="absolute inset-0 bg-gradient-to-br from-brand-900 via-brand-800 to-brand-950"></div>
            <div class="absolute -right-40 -top-40 h-[32rem] w-[32rem] rounded-full bg-gold-300/10 blur-3xl"></div>
            <div class="absolute -bottom-32 -left-24 h-96 w-96 rounded-full bg-brand-400/10 blur-3xl"></div>
        </div>

        <div class="container-page relative py-20 lg:py-28">
            <div class="max-w-3xl">
                <p class="mb-5 inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1.5 text-xs font-medium uppercase tracking-widest text-gold-300 ring-1 ring-inset ring-white/15">
                    <span class="h-1.5 w-1.5 rounded-full bg-gold-300"></span>
                    Chartered University &middot; Est. {{ $stats['established'] }}
                </p>

                <h1 class="font-display text-5xl leading-[1.05] tracking-tight text-white sm:text-6xl lg:text-7xl">
                    {{ setting('university_name') }}
                </h1>

                <p class="mt-5 font-display text-2xl italic text-gold-300 sm:text-3xl">
                    {{ setting('university_tagline') }}
                </p>

                <p class="mt-6 max-w-2xl text-lg leading-relaxed text-slate-300">
                    Education that transforms lives — empowering learners with the knowledge, skills, values
                    and leadership qualities needed to thrive in a rapidly changing world.
                </p>

                <div class="mt-9 flex flex-col gap-3 sm:flex-row">
                    <x-button :href="route('apply')" variant="secondary" size="lg">
                        Apply Now
                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                            <path fill-rule="evenodd" d="M3 10a1 1 0 0 1 1-1h9.6l-3.3-3.3a1 1 0 1 1 1.4-1.4l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H4a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
                        </svg>
                    </x-button>

                    <x-button :href="route('programmes.index')" size="lg"
                              class="border border-white/25 bg-white/5 text-white hover:bg-white/10 focus-visible:ring-white">
                        Explore Programmes
                    </x-button>
                </div>

                <dl class="mt-14 grid max-w-lg grid-cols-3 gap-6 border-t border-white/10 pt-8">
                    <div>
                        <dt class="text-xs uppercase tracking-wider text-slate-400">Programmes</dt>
                        <dd class="mt-1 font-display text-3xl text-white">{{ $stats['programmes'] }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs uppercase tracking-wider text-slate-400">Schools</dt>
                        <dd class="mt-1 font-display text-3xl text-white">{{ $stats['schools'] }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs uppercase tracking-wider text-slate-400">Campuses</dt>
                        <dd class="mt-1 font-display text-3xl text-white">4</dd>
                    </div>
                </dl>
            </div>
        </div>
    </section>

    {{-- --------------------------------------------- Applications open --}}
    @if ($intake?->isAcceptingApplications())
        <section class="border-b border-slate-200 bg-canvas">
            <div class="container-page py-10">
                <div class="flex flex-col items-start justify-between gap-6 lg:flex-row lg:items-center">
                    <div class="flex items-start gap-4">
                        <span class="mt-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-700 text-white">
                            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                <path d="M5.5 2A1.5 1.5 0 0 0 4 3.5v13A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5V7.6a1.5 1.5 0 0 0-.4-1L11.8 2.4a1.5 1.5 0 0 0-1-.4H5.5Zm2 8h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1 0-1.5Zm0 3h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1 0-1.5Z"/>
                            </svg>
                        </span>
                        <div>
                            <p class="text-xs font-semibold uppercase tracking-widest text-brand-700">Applications Open</p>
                            <h2 class="mt-1 text-2xl font-semibold text-slate-900">{{ $intake->name }}</h2>
                            <p class="mt-1 text-sm text-slate-600">
                                Applications close <strong class="text-slate-900">{{ $intake->deadlineLabel() }}</strong>
                                @if (! is_null($intake->daysUntilClose()))
                                    <span class="text-slate-400">&middot;</span>
                                    {{ $intake->daysUntilClose() }} {{ Str::plural('day', $intake->daysUntilClose()) }} remaining
                                @endif
                            </p>
                        </div>
                    </div>

                    <x-button :href="route('apply')" size="lg" class="w-full shrink-0 sm:w-auto">Apply Now</x-button>
                </div>
            </div>
        </section>
    @endif

    {{-- ---------------------------------------------------------- Why KCU --}}
    <section class="container-page py-20">
        <div class="max-w-2xl">
            <p class="text-xs font-semibold uppercase tracking-widest text-brand-700">Why KCU</p>
            <h2 class="mt-3 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">
                A university built on truth
            </h2>
            <p class="mt-4 text-lg text-slate-600">
                Our motto is <em class="font-display not-italic text-brand-700">{{ setting('university_motto') }}</em> —
                {{ strtolower(setting('university_motto_meaning')) }}. It sets the standard for our teaching,
                our research and the graduates we send into the world.
            </p>
        </div>

        <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            @foreach ([
                ['Chartered & Accredited', 'A Chartered institution accredited by the Uganda National Council for Higher Education.', 'M10 1 2 4.5v5c0 4.6 3.4 8.9 8 9.9 4.6-1 8-5.3 8-9.9v-5L10 1Zm3.7 7.2-4.2 4.2a1 1 0 0 1-1.4 0L6 10.3a1 1 0 1 1 1.4-1.4l1.4 1.4 3.5-3.5a1 1 0 0 1 1.4 1.4Z'],
                ['ECFMG-Recognised MBChB', 'Our medical degree has achieved recognition through ECFMG pathways, opening international opportunities.', 'M9.2 2.3a1.5 1.5 0 0 1 1.6 0l6 3.7a1 1 0 0 1 0 1.7l-6 3.7a1.5 1.5 0 0 1-1.6 0l-6-3.7a1 1 0 0 1 0-1.7l6-3.7ZM4 10.4v3.1c0 .5.3 1 .7 1.3l4.5 2.5c.5.3 1.1.3 1.6 0l4.5-2.5c.4-.3.7-.8.7-1.3v-3.1l-4.6 2.9a3 3 0 0 1-3.2 0L4 10.4Z'],
                ['Competency-Based Learning', 'We are embracing Competency-Based Education and Training so graduates arrive ready to practise.', 'M3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-5v2h2a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2h2v-2H4a1 1 0 0 1-1-1V4Zm4.5 3.5a1 1 0 0 1 1.4 0L10 8.6l1.1-1.1a1 1 0 1 1 1.4 1.4l-1.8 1.8a1 1 0 0 1-1.4 0L7.5 8.9a1 1 0 0 1 0-1.4Z'],
                ['Global Partnerships', 'Collaborations with institutions across Africa, Europe, Asia and the Americas.', 'M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM4.1 9h2.4c.1-1.6.4-3 .9-4.2A6 6 0 0 0 4.1 9Zm0 2a6 6 0 0 0 3.3 4.2c-.5-1.2-.8-2.6-.9-4.2H4.1Zm4.4 0c.1 1.9.6 3.4 1.1 4.3.6-.9 1-2.4 1.1-4.3h-2.2Zm2.2-2c-.1-1.9-.5-3.4-1.1-4.3-.5.9-1 2.4-1.1 4.3h2.2Zm2 2c-.1 1.6-.4 3-.9 4.2A6 6 0 0 0 15.9 11h-2.4Zm2.4-2a6 6 0 0 0-3.3-4.2c.5 1.2.8 2.6.9 4.2h2.4Z'],
            ] as [$title, $body, $icon])
                <x-card class="group transition hover:border-brand-300 hover:shadow-md">
                    <span class="mb-5 flex h-11 w-11 items-center justify-center rounded-lg bg-brand-50 text-brand-700 transition group-hover:bg-brand-700 group-hover:text-white">
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="{{ $icon }}"/></svg>
                    </span>
                    <h3 class="text-base font-semibold text-slate-900">{{ $title }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-slate-600">{{ $body }}</p>
                </x-card>
            @endforeach
        </div>
    </section>

    {{-- ----------------------------------------------- Explore programmes --}}
    <section class="bg-canvas py-20">
        <div class="container-page">
            <div class="flex flex-col justify-between gap-6 lg:flex-row lg:items-end">
                <div class="max-w-2xl">
                    <p class="text-xs font-semibold uppercase tracking-widest text-brand-700">Academics</p>
                    <h2 class="mt-3 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Explore programmes</h2>
                    <p class="mt-4 text-lg text-slate-600">
                        Undergraduate degrees, professional diplomas and bridging certificates across
                        medicine, law, business, computing and the earth sciences.
                    </p>
                </div>

                <form action="{{ route('programmes.index') }}" method="GET" class="w-full lg:max-w-sm" role="search">
                    <label for="programme-search" class="sr-only">Search programmes</label>
                    <div class="flex gap-2">
                        <x-input id="programme-search" name="q" type="search"
                                 placeholder="Search programmes, e.g. Nursing" />
                        <x-button type="submit" class="shrink-0">Search</x-button>
                    </div>
                </form>
            </div>

            @if ($featured->isNotEmpty())
                <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ($featured as $programme)
                        <x-card class="flex h-full flex-col transition hover:border-brand-300 hover:shadow-md">
                            <x-badge color="gold" size="sm" class="self-start">{{ $programme->levelLabel() }}</x-badge>

                            <h3 class="mt-4 text-lg font-semibold leading-snug text-slate-900">
                                <a href="{{ route('programmes.show', $programme) }}" class="hover:text-brand-700">
                                    <span class="absolute inset-0"></span>
                                    {{ $programme->name }}
                                </a>
                            </h3>

                            <p class="mt-2 text-sm text-slate-500">{{ $programme->school->name }}</p>

                            <div class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 pt-5 text-xs text-slate-500">
                                <span class="flex items-center gap-1.5">
                                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm1-12a1 1 0 1 0-2 0v4c0 .3.1.5.3.7l2.5 2.5a1 1 0 0 0 1.4-1.4L11 9.6V6Z" clip-rule="evenodd"/></svg>
                                    {{ $programme->durationLabel() }}
                                </span>
                                <span class="flex items-center gap-1.5">
                                    <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2a6 6 0 0 0-6 6c0 4.2 5.2 9.4 5.4 9.6a.8.8 0 0 0 1.2 0C10.8 17.4 16 12.2 16 8a6 6 0 0 0-6-6Zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/></svg>
                                    {{ $programme->studyModeLabel() }}
                                </span>
                            </div>
                        </x-card>
                    @endforeach
                </div>
            @endif

            <div class="mt-10 text-center">
                <x-button :href="route('programmes.index')" variant="outline" size="lg">
                    View all {{ $stats['programmes'] }} programmes
                </x-button>
            </div>
        </div>
    </section>

    {{-- --------------------------------------------- Schools & faculties --}}
    <section class="container-page py-20">
        <div class="max-w-2xl">
            <p class="text-xs font-semibold uppercase tracking-widest text-brand-700">Our Structure</p>
            <h2 class="mt-3 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Schools &amp; faculties</h2>
        </div>

        <div class="mt-12 grid gap-6 lg:grid-cols-3">
            @foreach ($schools as $school)
                <a href="{{ route('schools.show', $school) }}"
                   class="group relative flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white p-7 transition hover:border-brand-700 hover:shadow-lg">
                    <span class="font-display text-5xl text-slate-200 transition group-hover:text-gold-300">
                        {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                    </span>

                    <h3 class="mt-5 text-xl font-semibold leading-snug text-slate-900 group-hover:text-brand-800">
                        {{ $school->name }}
                    </h3>

                    <p class="mt-3 flex-1 text-sm leading-relaxed text-slate-600">{{ $school->description }}</p>

                    <span class="mt-6 inline-flex items-center gap-2 text-sm font-medium text-brand-700">
                        {{ $school->programmes_count }} {{ Str::plural('programme', $school->programmes_count) }}
                        <svg class="h-4 w-4 transition group-hover:translate-x-1" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                            <path fill-rule="evenodd" d="M3 10a1 1 0 0 1 1-1h9.6l-3.3-3.3a1 1 0 1 1 1.4-1.4l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H4a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
                        </svg>
                    </span>
                </a>
            @endforeach
        </div>
    </section>

    {{-- ------------------------------------------------------ Campus life --}}
    <section class="bg-brand-900 py-20 text-white">
        <div class="container-page grid gap-12 lg:grid-cols-2 lg:items-center">
            <div>
                <p class="text-xs font-semibold uppercase tracking-widest text-gold-300">Campus Life</p>
                <h2 class="mt-3 font-display text-4xl tracking-tight sm:text-5xl">More than a degree</h2>
                <p class="mt-5 text-lg leading-relaxed text-slate-300">
                    Life at KCU extends well beyond the lecture theatre. Students join a community with active
                    guilds, sports, professional societies and volunteering programmes across all four campuses —
                    Bunga, Mulago, Namugongo and Kisoro.
                </p>

                <div class="mt-8 flex flex-col gap-3 sm:flex-row">
                    <x-button :href="route('pages.show', 'student-life')" variant="secondary">Explore Student Life</x-button>
                    <x-button :href="route('pages.show', 'research')"
                              class="border border-white/25 bg-white/5 text-white hover:bg-white/10 focus-visible:ring-white">
                        Research &amp; Innovation
                    </x-button>
                </div>
            </div>

            <dl class="grid gap-4 sm:grid-cols-2">
                @foreach ([
                    ['Bunga Campus', 'Main campus on Ggaba Road, Makindye Division, Kampala.'],
                    ['Mulago Campus', 'Clinical training beside Mulago National Referral Hospital.'],
                    ['Namugongo Campus', 'In Kira Town, Wakiso District, north-east of Kampala.'],
                    ['Kisoro Campus', 'Serving students in south-western Uganda.'],
                ] as [$name, $detail])
                    <div class="rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
                        <dt class="font-semibold text-gold-300">{{ $name }}</dt>
                        <dd class="mt-2 text-sm leading-relaxed text-slate-300">{{ $detail }}</dd>
                    </div>
                @endforeach
            </dl>
        </div>
    </section>

    {{-- ------------------------------------------------------ Latest news --}}
    @if ($news->isNotEmpty())
        <section class="container-page py-20">
            <div class="flex items-end justify-between gap-6">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-widest text-brand-700">Stay Updated</p>
                    <h2 class="mt-3 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Latest news</h2>
                </div>
                <x-button :href="route('news.index')" variant="ghost" class="hidden shrink-0 sm:inline-flex">
                    All news
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M3 10a1 1 0 0 1 1-1h9.6l-3.3-3.3a1 1 0 1 1 1.4-1.4l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H4a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>
                </x-button>
            </div>

            <div class="mt-12 grid gap-8 lg:grid-cols-3">
                @foreach ($news as $article)
                    <article class="group relative flex flex-col">
                        <div class="flex items-center gap-3 text-xs">
                            @if ($article->category)
                                <x-badge color="brand" size="sm">{{ $article->category }}</x-badge>
                            @endif
                            <time datetime="{{ $article->published_at?->toDateString() }}" class="text-slate-500">
                                {{ $article->published_at?->format('j F Y') }}
                            </time>
                        </div>

                        <h3 class="mt-3 text-lg font-semibold leading-snug text-slate-900 group-hover:text-brand-700">
                            <a href="{{ route('news.show', $article) }}">
                                <span class="absolute inset-0"></span>
                                {{ $article->title }}
                            </a>
                        </h3>

                        <p class="mt-3 line-clamp-3 text-sm leading-relaxed text-slate-600">{{ $article->excerpt }}</p>
                    </article>
                @endforeach
            </div>
        </section>
    @endif

    {{-- --------------------------------------------------- Upcoming events --}}
    @if ($events->isNotEmpty())
        <section class="bg-canvas py-20">
            <div class="container-page">
                <div class="flex items-end justify-between gap-6">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-widest text-brand-700">What's On</p>
                        <h2 class="mt-3 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Upcoming events</h2>
                    </div>
                    <x-button :href="route('events.index')" variant="ghost" class="hidden shrink-0 sm:inline-flex">All events</x-button>
                </div>

                <ul class="mt-12 space-y-4">
                    @foreach ($events as $event)
                        <li>
                            <a href="{{ route('events.show', $event) }}"
                               class="flex flex-col gap-5 rounded-xl border border-slate-200 bg-white p-6 transition hover:border-brand-300 hover:shadow-md sm:flex-row sm:items-center">
                                <div class="flex h-16 w-16 shrink-0 flex-col items-center justify-center rounded-lg bg-brand-700 text-white">
                                    <span class="font-display text-2xl leading-none">{{ $event->starts_at->format('j') }}</span>
                                    <span class="mt-0.5 text-[10px] uppercase tracking-wider">{{ $event->starts_at->format('M') }}</span>
                                </div>

                                <div class="min-w-0 flex-1">
                                    <h3 class="text-base font-semibold text-slate-900">{{ $event->title }}</h3>
                                    <p class="mt-1 text-sm text-slate-600">{{ $event->excerpt }}</p>
                                    @if ($event->location)
                                        <p class="mt-1.5 flex items-center gap-1.5 text-xs text-slate-500">
                                            <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2a6 6 0 0 0-6 6c0 4.2 5.2 9.4 5.4 9.6a.8.8 0 0 0 1.2 0C10.8 17.4 16 12.2 16 8a6 6 0 0 0-6-6Zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/></svg>
                                            {{ $event->location }}
                                        </p>
                                    @endif
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </section>
    @endif

    {{-- ---------------------------------------------------- Admissions CTA --}}
    <section class="container-page py-20">
        <div class="relative overflow-hidden rounded-2xl bg-brand-800 px-8 py-16 text-center sm:px-16">
            <div class="absolute inset-0" aria-hidden="true">
                <div class="absolute -right-20 -top-20 h-72 w-72 rounded-full bg-gold-300/10 blur-3xl"></div>
                <div class="absolute -bottom-24 -left-16 h-72 w-72 rounded-full bg-brand-400/10 blur-3xl"></div>
            </div>

            <div class="relative mx-auto max-w-2xl">
                <h2 class="font-display text-4xl tracking-tight text-white sm:text-5xl">
                    Ready to begin your journey?
                </h2>
                <p class="mt-5 text-lg text-slate-300">
                    Create an account, complete your application online and track it through to a decision —
                    all from your phone or computer.
                </p>

                <div class="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
                    <x-button :href="route('apply')" variant="secondary" size="lg">Start Application</x-button>
                    <x-button :href="route('admissions')" size="lg"
                              class="border border-white/25 bg-white/5 text-white hover:bg-white/10 focus-visible:ring-white">
                        How to Apply
                    </x-button>
                </div>
            </div>
        </div>
    </section>

@endsection
