@extends('layouts.app')

@section('content')
{{-- HERO --}}
<section class="relative isolate overflow-hidden bg-ink">
    <img src="{{ asset('images/speaker-bible.jpg') }}" alt="" class="absolute inset-0 -z-20 h-full w-full object-cover object-center opacity-60">
    <div class="absolute inset-0 -z-10 bg-linear-to-r from-ink via-ink/85 to-navy/30"></div>
    <div class="mx-auto grid max-w-7xl items-center gap-10 px-4 py-20 sm:px-6 lg:grid-cols-5 lg:px-8 lg:py-32">
        <div class="lg:col-span-3">
            <p class="eyebrow !text-gold-light">Nova Excellence Awards &middot; Community Alliance</p>
            <h1 class="mt-4 font-display text-5xl font-bold leading-[1.05] text-white sm:text-6xl lg:text-7xl">
                {{ __('Where excellence') }} <span class="bg-linear-to-r from-gold-light to-gold bg-clip-text text-transparent">{{ __('becomes community.') }}</span>
            </h1>
            <p class="mt-6 max-w-xl text-lg leading-relaxed text-white/80">
                {{ __('Join a verified alliance of leaders, innovators, entrepreneurs and creators. Get your digital Nova Member Card, join events, mentor the next generation and be part of lasting impact across Africa and beyond.') }}
            </p>
            <div class="mt-9 flex flex-wrap gap-3">
                <a href="{{ route('register') }}" class="btn btn-gold">{{ __('Become a member') }}</a>
                <a href="{{ route('membership') }}" class="btn btn-ghost">{{ __('See membership tiers') }}</a>
            </div>
        </div>
        <div class="hidden justify-self-end lg:col-span-2 lg:block">
            <img src="{{ asset('images/nca-logo.png') }}" alt="Nova Community Alliance seal" class="w-72 drop-shadow-[0_20px_50px_rgba(212,166,42,0.35)]">
        </div>
    </div>
</section>

{{-- PILLARS --}}
<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
    <x-section-heading :eyebrow="__('What we celebrate')" :title="__('Four pillars, one alliance')" :center="true">
        {{ __('The same values that drive the Nova Excellence Awards shape every part of NCA.') }}
    </x-section-heading>
    <div class="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        @foreach ([
            ['Excellence', 'We set a high bar and celebrate those who clear it.', 'M12 3l2.7 5.5 6 .9-4.4 4.2 1 6-5.3-2.8L6.7 19.6l1-6L3.3 9.4l6-.9L12 3z'],
            ['Innovation', 'New ideas, new businesses, new answers to old problems.', 'M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0012 3z'],
            ['Impact', 'Scholarships, mentorship and community projects that last.', 'M4 20V10M10 20V4M16 20v-8M22 20H2'],
            ['Leadership', 'Verified leaders who open doors for others.', 'M12 12a4 4 0 100-8 4 4 0 000 8zM4 21a8 8 0 0116 0'],
        ] as [$t, $d, $icon])
            <div class="card p-7 transition hover:-translate-y-1 hover:shadow-lg">
                <span class="grid h-12 w-12 place-items-center rounded-2xl bg-nova/10 text-nova">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="{{ $icon }}"/></svg>
                </span>
                <h3 class="mt-5 text-2xl font-bold text-navy">{{ __($t) }}</h3>
                <p class="mt-2 text-sm leading-relaxed text-slate-600">{{ __($d) }}</p>
            </div>
        @endforeach
    </div>
</section>

{{-- HOW IT WORKS --}}
<section class="bg-navy py-20 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <x-section-heading :eyebrow="__('How it works')" :title="__('From sign-up to Member Card in days')" :dark="true" />
        <ol class="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-5">
            @foreach ([
                ['Register', 'Fill in your details on your phone or through an NCA agent.'],
                ['Verify', 'Confirm your number and upload your ID and a selfie.'],
                ['Pay', 'Pay the registration fee securely with M-Pesa.'],
                ['Review', 'Our verifiers check your application and may call you.'],
                ['Activate', 'Get your member number and QR Member Card.'],
            ] as $i => [$t, $d])
                <li class="rounded-2xl border border-white/10 bg-white/5 p-6">
                    <span class="font-display text-5xl font-bold text-gold/80">{{ $i + 1 }}</span>
                    <h3 class="mt-2 text-xl font-bold text-gold-light">{{ __($t) }}</h3>
                    <p class="mt-2 text-sm leading-relaxed text-white/70">{{ __($d) }}</p>
                </li>
            @endforeach
        </ol>
        <a href="{{ route('how') }}" class="btn btn-ghost mt-10">{{ __('Read the full journey') }}</a>
    </div>
</section>

{{-- MEMBERSHIP PREVIEW --}}
<section class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
    <x-section-heading :eyebrow="__('Membership')" :title="__('A tier for every stage')" :center="true">
        {{ __('Fees shown are provisional and will be confirmed before launch.') }}
    </x-section-heading>
    <div class="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        @foreach ($tiers as $slug => $tier)
            <x-tier-card :slug="$slug" :tier="$tier" />
        @endforeach
    </div>
</section>

{{-- IN THE FIELD --}}
<section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
    <div class="grid items-center gap-10 lg:grid-cols-2">
        <div class="grid grid-cols-2 gap-4">
            <img src="{{ asset('images/medal-ceremony.jpg') }}" alt="An honouree receiving a medal at a school ceremony" loading="lazy" class="h-72 w-full rounded-3xl object-cover shadow-lg">
            <img src="{{ asset('images/community-rally.jpg') }}" alt="A speaker leading students in a rallying chant" loading="lazy" class="mt-10 h-72 w-full rounded-3xl object-cover shadow-lg">
        </div>
        <div>
            <x-section-heading :eyebrow="__('In the field')" :title="__('Recognition that reaches schools and villages')" />
            <p class="mt-5 leading-relaxed text-slate-600">{{ __('NCA takes the spirit of the Nova Excellence Awards into classrooms and communities: mentoring talks, books and learning materials for learners, and recognition for young people who are working hard.') }}</p>
            <a href="{{ route('events') }}" class="btn btn-outline mt-7">{{ __('See our events') }}</a>
        </div>
    </div>
</section>

{{-- NEWS --}}
<section class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
    <div class="flex flex-wrap items-end justify-between gap-4">
        <x-section-heading :eyebrow="__('News')" :title="__('Latest from NCA')" />
        <a href="{{ route('news') }}" class="btn btn-outline">{{ __('All news') }}</a>
    </div>
    <div class="mt-10 grid gap-6 md:grid-cols-3">
        @foreach ($news as $slug => $a)
            <x-news-card :slug="$slug" :article="$a" />
        @endforeach
    </div>
</section>

{{-- CTA --}}
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="relative overflow-hidden rounded-[2rem] bg-linear-to-br from-nova-deep via-nova to-navy p-10 text-center text-white sm:p-16">
        <h2 class="font-display text-4xl font-bold sm:text-5xl">{{ __('Ready to join the alliance?') }}</h2>
        <p class="mx-auto mt-4 max-w-xl text-white/80">{{ __('Registration takes about ten minutes. Keep your national ID handy.') }}</p>
        <div class="mt-8 flex flex-wrap justify-center gap-3">
            <a href="{{ route('register') }}" class="btn btn-gold">{{ __('Start registration') }}</a>
            <a href="{{ route('contact') }}" class="btn btn-ghost">{{ __('Talk to us') }}</a>
        </div>
    </div>
</section>
@endsection