@use('App\Models\Setting')
@use('App\Support\Img')
@php
    $items = [
        ['01', 'Mission', 'about_mission'],
        ['02', 'Vision', 'about_vision'],
        ['03', 'History', 'about_history'],
        ['04', 'CSE Department', 'about_department'],
    ];
@endphp

<style>
    .tl { position: relative; margin-top: 1rem; padding: 1rem 0; }

    /* dotted track + the dotted line that "draws" as you scroll */
    .tl-line, .tl-progress { position: absolute; top: 0; left: 50%; width: 8px; transform: translateX(-50%); border-radius: 9999px;
        background-size: 8px 16px; background-repeat: repeat-y; background-position: center top; }
    .tl-line { bottom: 0; background-image: radial-gradient(circle, rgba(167, 139, 250, .50) 2px, transparent 2.6px); }
    .dark .tl-line { background-image: radial-gradient(circle, rgba(167, 139, 250, .30) 2px, transparent 2.6px); }
    .tl-progress { height: var(--p, 0%); background-image: radial-gradient(circle, #7c3aed 3px, transparent 3.6px); }
    .tl-progress::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; border-radius: 9999px; transform: translateX(-50%);
        background: #7c3aed; box-shadow: 0 0 0 5px rgba(124, 58, 237, .20); }

    .tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; margin-bottom: 3rem; }

    /* box: light, simple background */
    .tl-card.card { position: relative; background: rgba(245, 243, 255, .7); border: 1px solid #ddd6fe; box-shadow: 0 2px 8px -4px rgba(124, 58, 237, .25); backdrop-filter: none;
        opacity: 0; transition: opacity .45s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
    .dark .tl-card.card { background: rgba(124, 58, 237, .10); border-color: rgba(167, 139, 250, .25); box-shadow: none; }

    /* light entry animation */
    .tl-left .tl-card { grid-column: 1; transform: translateX(-20px); }
    .tl-right .tl-card { grid-column: 2; transform: translateX(20px); }
    .tl-item.is-in .tl-card.card { opacity: 1; transform: none; }

    /* "hover" look: when you hover, or when the box is in the middle of the screen while scrolling */
    .tl-item.is-in .tl-card.card:hover,
    .tl-item.is-in.is-active .tl-card.card { transform: translateY(-6px); border-color: #a78bfa; box-shadow: 0 16px 30px -14px rgba(124, 58, 237, .50); }
    .dark .tl-item.is-in .tl-card.card:hover,
    .dark .tl-item.is-in.is-active .tl-card.card { border-color: rgba(167, 139, 250, .6); box-shadow: 0 16px 30px -14px rgba(124, 58, 237, .6); }

    /* small dotted connector from the box to the line */
    .tl-card::before { content: ""; position: absolute; top: 2rem; width: 2rem; border-top: 3px dotted #a78bfa; }
    .tl-left .tl-card::before { right: -2rem; }
    .tl-right .tl-card::before { left: -2rem; }

    /* dot on the line */
    .tl-dot { position: absolute; top: 1.45rem; left: 50%; z-index: 2; width: 18px; height: 18px; transform: translateX(-50%); border-radius: 9999px;
        background: #fff; border: 3px solid #c4b5fd; transition: background .4s ease, border-color .4s ease, transform .3s ease; }
    .dark .tl-dot { background: #0f172a; border-color: #5b4b8a; }
    .tl-item.is-in .tl-dot { background: #7c3aed; border-color: #ddd6fe; }
    .tl-item.is-active .tl-dot { transform: translateX(-50%) scale(1.3); }

    /* plain number, no background */
    .tl-num { font-size: 1.35rem; font-weight: 800; line-height: 1; color: #7c3aed; }
    .dark .tl-num { color: #c4b5fd; }

    /* phone: line on the left, boxes in one column */
    @media (max-width: 767px) {
        .tl-line, .tl-progress { left: 1rem; }
        .tl-item { grid-template-columns: 1fr; padding-left: 2.75rem; margin-bottom: 2rem; }
        .tl-left .tl-card, .tl-right .tl-card { grid-column: 1; transform: translateY(14px); }
        .tl-left .tl-card::before, .tl-right .tl-card::before { left: -1.75rem; right: auto; width: 1.75rem; top: 1.7rem; }
        .tl-dot { left: 1rem; top: 1.25rem; }
    }

    @media (prefers-reduced-motion: reduce) {
        .tl-card.card { opacity: 1 !important; transform: none !important; transition: none; }
    }
</style>
<noscript><style>.tl-card.card { opacity: 1 !important; transform: none !important; }</style></noscript>

<x-layouts.public title="About">
    <section class="section">
        <x-section-title title="About the club" subtitle="Who we are, what we believe in and where we came from." center />

        <div class="tl" x-data="timeline()">
            <div class="tl-line" aria-hidden="true"></div>
            <div class="tl-progress" aria-hidden="true"></div>

            @foreach($items as $i => [$num, $title, $key])
                <div class="tl-item {{ $i % 2 === 0 ? 'tl-left' : 'tl-right' }}">
                    <span class="tl-dot" aria-hidden="true"></span>
                    <div class="tl-card card p-6 sm:p-7">
                        <div class="flex items-center gap-3">
                            <span class="tl-num">{{ $num }}</span>
                            <h3 class="text-xl font-bold text-slate-900 dark:text-white">{{ $title }}</h3>
                        </div>
                        <p class="mt-4 leading-relaxed text-slate-600 dark:text-slate-300">{{ Setting::get($key) }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    @if($alumni->isNotEmpty())
        <section class="section pt-0">
            <x-section-title title="Alumni" subtitle="Club members who are now building careers across the industry." />
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($alumni as $a)
                    <div class="card flex items-center gap-4 p-4" data-aos="fade-up">
                        <img src="{{ Img::avatar($a->photo, $a->name) }}" alt="{{ $a->name }}" loading="lazy" class="h-16 w-16 rounded-full object-cover">
                        <div class="min-w-0">
                            <p class="truncate font-semibold text-slate-900 dark:text-white">{{ $a->name }}</p>
                            <p class="truncate text-sm text-slate-500">{{ $a->position }}@if($a->company), {{ $a->company }}@endif</p>
                            @if($a->batch)<p class="text-xs text-amber-600 dark:text-amber-400">Batch {{ $a->batch }}</p>@endif
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    <section id="contact" class="section pt-0">
        <div class="card mx-auto max-w-2xl p-7">
            <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Contact us</h2>
            <p class="mt-1 text-sm text-slate-500">Questions about joining, events or sponsorship? Send a message to the committee.</p>
            <form method="POST" action="{{ route('contact.store') }}" class="mt-6 grid gap-4 sm:grid-cols-2">
                @csrf
                <x-field name="name" label="Your name" required />
                <x-field name="email" label="Email" type="email" required />
                <x-field name="subject" label="Subject" class="sm:col-span-2" />
                <div class="sm:col-span-2">
                    <label for="message" class="label">Message <span class="text-red-500">*</span></label>
                    <textarea id="message" name="message" rows="4" required class="input">{{ old('message') }}</textarea>
                    @error('message')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                </div>
                <div class="sm:col-span-2"><button class="btn btn-primary">Send message</button></div>
            </form>
        </div>
    </section>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('timeline', () => ({
                init() {
                    const el = this.$el;
                    const items = el.querySelectorAll('.tl-item');
                    let ticking = false;

                    const update = () => {
                        ticking = false;

                        // The dotted line "draws" itself as you scroll down
                        const r = el.getBoundingClientRect();
                        const p = Math.min(1, Math.max(0, (window.innerHeight * 0.65 - r.top) / r.height));
                        el.style.setProperty('--p', (p * 100).toFixed(1) + '%');

                        // The box closest to the middle of the screen gets the "hover" look
                        const mid = window.innerHeight / 2;
                        let best = null, bestDist = Infinity;
                        items.forEach((item) => {
                            const c = item.querySelector('.tl-card').getBoundingClientRect();
                            const d = Math.abs(c.top + c.height / 2 - mid);
                            if (d < bestDist) { bestDist = d; best = item; }
                        });
                        items.forEach((item) => item.classList.toggle('is-active', item === best && bestDist < window.innerHeight * 0.4));
                    };

                    const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(update); } };
                    update();
                    window.addEventListener('scroll', onScroll, { passive: true });
                    window.addEventListener('resize', onScroll);

                    // Each box fades in when it scrolls into view
                    const io = new IntersectionObserver((entries) => {
                        entries.forEach((entry) => {
                            if (entry.isIntersecting) {
                                entry.target.classList.add('is-in');
                                io.unobserve(entry.target);
                            }
                        });
                    }, { threshold: 0.25 });

                    items.forEach((item) => io.observe(item));
                },
            }));
        });
    </script>
</x-layouts.public>