@use('App\Models\Setting')
@use('App\Support\Img')
@php
$club = Setting::get('club_name', 'UU Computer Programming Club');
$code = "class UUProgrammingClub {\n  mission = 'Learn. Build. Compete.';\n  weekly  = ['DSA', 'Web Dev', 'Contests'];\n\n  join(you) {\n    return you.code() + you.grow();\n  }\n}\n\nnew UUProgrammingClub().join('you');";
@endphp

<style>
    /* ---------- Animated title: types in from the left, pauses, deletes, repeats ---------- */
    .tt { display: flex; justify-content: center; margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-size: clamp(1.05rem, 5.2vw, 2.25rem); }
    @media (min-width: 640px) { .tt { font-size: 3rem; } }
    @media (min-width: 1024px) { .tt { font-size: 3.75rem; } }
    .tt-box { display: inline-grid; max-width: 100%; text-align: left; }
    .tt-ghost, .tt-live { grid-area: 1 / 1; }
    .tt-ghost { visibility: hidden; }
    .tt-live { opacity: 0; transition: opacity .2s ease; background: linear-gradient(90deg, #2563eb, #3b82f6 45%, #f59e0b);
        -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
    .tt-live.on { opacity: 1; }
    .tt-caret { display: inline-block; width: .07em; height: .95em; margin-left: .06em; vertical-align: -.1em; border-radius: 2px; background: #f59e0b; animation: tt-blink 1s steps(2) infinite; }
    @keyframes tt-blink { 50% { opacity: 0; } }
    .tt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    @media (prefers-reduced-motion: reduce) { .tt-caret { animation: none; } }

    /* ---------- Phone: everything a bit smaller and tighter ---------- */
    @media (max-width: 639px) {
        .hp-top { padding-top: 1.5rem !important; }
        .hp-tag { margin-top: .6rem !important; font-size: .9rem !important; line-height: 1.55 !important; }
        .hp-slider-sec { margin-top: 1.25rem !important; }
        .hp-slider { border-radius: 1rem !important; }
        .hp-cap { padding: 1rem !important; }
        .hp-cap h2 { font-size: 1.05rem !important; }
        .hp-cap p { margin-top: .2rem !important; font-size: .75rem !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .hp-arrow { padding: .35rem !important; }
        .hp-arrow svg { width: 1rem !important; height: 1rem !important; }
        .hp-dots { right: .9rem !important; bottom: .75rem !important; }

        .hp-sec { padding-top: 2rem !important; padding-bottom: 2rem !important; }
        .hp-hero { gap: 1.5rem !important; }
        .hp-hero h2 { font-size: 1.4rem !important; line-height: 1.3 !important; }
        .hp-hero p { margin-top: .6rem !important; font-size: .9rem !important; line-height: 1.6 !important; }
        .hp-btns { margin-top: 1.1rem !important; gap: .6rem !important; }
        .hp-btns .btn { padding: .55rem 1.05rem; font-size: .82rem; }
        .hp-editor { border-radius: .8rem !important; }
        .hp-editor .hp-code { min-height: 11.5rem !important; padding: .85rem !important; }
        .hp-editor pre { font-size: .7rem !important; line-height: 1.6 !important; }

        .hp-stats { gap: .6rem !important; }
        .hp-stat { padding: .9rem .4rem !important; border-radius: .9rem !important; }
        .hp-stat .num { font-size: 1.6rem !important; }
        .hp-stat .lbl { margin-top: .25rem !important; font-size: .72rem !important; }

        .hp-head { justify-content: center !important; gap: 0 !important; text-align: center; }
        .hp-head > div { margin-bottom: 1rem !important; }
        .hp-head h2 { font-size: 1.35rem !important; }
        .hp-head p { margin-top: .35rem !important; font-size: .85rem !important; }
        .hp-head .btn { margin-bottom: 1.25rem !important; padding: .5rem 1rem; font-size: .8rem; }
        .hp-grid { gap: 1rem !important; }
        .hp-people { gap: 1.25rem !important; justify-items: center; }
        .hp-empty { padding: 1.75rem 1rem !important; font-size: .9rem; }
    }
</style>
<noscript><style>.tt-live { opacity: 1 !important; }</style></noscript>

<x-layouts.public>
    {{-- 1. Title (animated) --}}
    <section class="hp-top mx-auto max-w-7xl px-4 pt-10 text-center sm:px-6 lg:px-8">
        <h1 class="tt" x-data="titleType(@js($club))">
            <span class="tt-sr">{{ $club }}</span>
            <span class="tt-box" aria-hidden="true">
                <span class="tt-ghost">{{ $club }}</span>
                <span class="tt-live" :class="{ 'on': ready }"><span x-text="out">{{ $club }}</span><i class="tt-caret"></i></span>
            </span>
        </h1>
        <p class="hp-tag mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">{{ Setting::get('tagline') }}</p>
    </section>

    {{-- 2. Slider --}}
    <section class="hp-slider-sec mx-auto mt-8 max-w-7xl px-4 sm:px-6 lg:px-8">
        <div x-data="slider({{ max($slides->count(), 1) }})" @mouseenter="stop()" @mouseleave="start()"
             class="hp-slider relative aspect-[16/10] overflow-hidden rounded-3xl border border-slate-200 bg-slate-200 shadow-xl dark:border-slate-800 dark:bg-slate-800 sm:aspect-[21/9]">
            @forelse($slides as $idx => $slide)
                <div x-show="i === {{ $idx }}" @if($idx > 0) x-cloak @endif x-transition.opacity.duration.700ms class="absolute inset-0">
                    @if($slide->image)
                        <img src="{{ Img::url($slide->image) }}" alt="{{ $slide->title }}" class="h-full w-full object-cover" @if($idx > 0) loading="lazy" @endif>
                    @else
                        <div class="h-full w-full bg-gradient-to-br from-blue-600 via-blue-500 to-amber-500"></div>
                    @endif
                    <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-slate-950/10 to-transparent"></div>
                    <div class="hp-cap absolute bottom-0 left-0 p-6 text-white sm:p-10">
                        @if($slide->title)<h2 class="text-2xl font-bold sm:text-4xl">{{ $slide->title }}</h2>@endif
                        @if($slide->subtitle)<p class="mt-2 max-w-xl text-sm text-slate-200 sm:text-base">{{ $slide->subtitle }}</p>@endif
                    </div>
                </div>
            @empty
                <div class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500/30 to-amber-400/30 p-6 text-center text-slate-700 dark:text-slate-200">
                    <p>Slider is empty. Add images from Dashboard → Homepage slider.</p>
                </div>
            @endforelse

            @if($slides->count() > 1)
                <button type="button" @click="prev()" class="hp-arrow absolute left-3 top-1/2 -translate-y-1/2 rounded-full bg-white/80 p-2 text-slate-800 shadow backdrop-blur hover:bg-white" aria-label="Previous slide"><x-icon name="chevron-left" class="h-5 w-5"/></button>
                <button type="button" @click="next()" class="hp-arrow absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-white/80 p-2 text-slate-800 shadow backdrop-blur hover:bg-white" aria-label="Next slide"><x-icon name="chevron-right" class="h-5 w-5"/></button>
                <div class="hp-dots absolute bottom-4 right-6 flex gap-2">
                    @foreach($slides as $idx => $slide)
                        <button type="button" @click="i = {{ $idx }}" :class="i === {{ $idx }} ? 'w-6 bg-amber-400' : 'w-2.5 bg-white/70'" class="h-2.5 rounded-full transition-all" aria-label="Go to slide {{ $idx + 1 }}"></button>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    {{-- 3. Hero --}}
    <section class="hp-sec hp-hero section grid items-center gap-10 lg:grid-cols-2">
        <div data-aos="fade-right">
            <h2 class="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-4xl">Write code. Solve problems. Grow together.</h2>
            <p class="mt-4 max-w-lg text-slate-600 dark:text-slate-400">Weekly problem-solving sessions, hands-on workshops and contests for every CSE student, from your first loop to your first ICPC regional.</p>
            <div class="hp-btns mt-8 flex flex-wrap gap-3">
                <a href="{{ route('join') }}" class="btn btn-primary">Join the club</a>
                <a href="{{ route('events.index') }}" class="btn btn-ghost">See events</a>
            </div>
        </div>
        <div data-aos="fade-left" class="hp-editor overflow-hidden rounded-2xl border border-slate-700 bg-slate-900 shadow-2xl shadow-blue-900/20">
            <div class="flex items-center gap-2 border-b border-slate-800 bg-slate-950 px-4 py-3">
                <span class="h-3 w-3 rounded-full bg-red-400"></span><span class="h-3 w-3 rounded-full bg-amber-400"></span><span class="h-3 w-3 rounded-full bg-emerald-400"></span>
                <span class="ml-3 font-mono text-xs text-slate-400">club.js</span>
            </div>
            <div x-data="typing(@js($code))" class="hp-code min-h-[17rem] p-5">
                <pre class="whitespace-pre-wrap font-mono text-sm leading-relaxed text-emerald-300"><span x-text="out"></span><span class="ml-0.5 inline-block h-4 w-2 translate-y-0.5 animate-pulse bg-amber-400"></span></pre>
            </div>
        </div>
    </section>

    {{-- 4. Stats --}}
    <section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="hp-stats grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach($stats as $label => $value)
                <div class="hp-stat card p-6 text-center" x-data="counter({{ (int) $value }})">
                    <p class="num text-4xl font-extrabold text-blue-600 dark:text-blue-400"><span x-text="n">0</span><span class="text-amber-500">+</span></p>
                    <p class="lbl mt-2 text-sm font-medium text-slate-600 dark:text-slate-400">{{ $label }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- 5. Upcoming events --}}
    <section class="hp-sec section">
        <div class="hp-head flex flex-wrap items-end justify-between gap-4">
            <x-section-title title="Upcoming events" subtitle="Contests, workshops and seminars you can join next." />
            <a href="{{ route('events.index') }}" class="btn btn-ghost mb-10">All events <x-icon name="arrow-right" class="h-4 w-4"/></a>
        </div>
        @if($events->isEmpty())
            <div class="hp-empty card p-10 text-center text-slate-500">No upcoming events yet. Check back soon.</div>
        @else
            <div class="hp-grid grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($events as $event)<div data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}"><x-event-card :event="$event" /></div>@endforeach
            </div>
        @endif
    </section>

    {{-- 6. Committee preview --}}
    <section class="hp-sec section pt-0">
        <div class="hp-head flex flex-wrap items-end justify-between gap-4">
            <x-section-title title="Executive committee" subtitle="The students who run the club this session." />
            <a href="{{ route('committee') }}" class="btn btn-ghost mb-10">Full committee <x-icon name="arrow-right" class="h-4 w-4"/></a>
        </div>
        @if($committee->isEmpty())
            <div class="hp-empty card p-10 text-center text-slate-500">The committee will be announced soon.</div>
        @else
            <div class="hp-people hp-grid grid justify-items-center gap-8 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($committee as $person)<div data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}"><x-committee-card :person="$person" /></div>@endforeach
            </div>
        @endif
    </section>

    <script>
        document.addEventListener('alpine:init', () => {
            // Types the title in from the left, holds, deletes it, then starts again
            Alpine.data('titleType', (text) => ({
                out: text,
                ready: false,
                init() {
                    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { this.ready = true; return; }

                    let i = 0, dir = 1;
                    const tick = () => {
                        i += dir;
                        this.out = text.slice(0, i);
                        let delay = dir === 1 ? 90 : 45;
                        if (dir === 1 && i >= text.length) { dir = -1; delay = 2400; }
                        else if (dir === -1 && i <= 0) { dir = 1; delay = 700; }
                        setTimeout(tick, delay);
                    };

                    this.out = '';
                    this.ready = true;
                    setTimeout(tick, 400);
                },
            }));
        });
    </script>
</x-layouts.public>