import {
    useEffect,
    useLayoutEffect,
    useRef,
    useState,
    type FormEvent,
} from 'react';
import { Head, Link, router } from '@inertiajs/react';
import {
    ArrowRight,
    ChevronRight,
    Search,
    UsersRound,
    BookOpenText,
    Heart,
    GraduationCap,
    HandHeart,
    Building2,
    FileText,
    Users,
} from 'lucide-react';
import PortalLayout from '@/layouts/portal-layout';
import '../../../css/alumni-home.css';

interface News {
    id: number;
    slug: string;
    title: string;
    excerpt?: string;
    thumbnail?: string;
    published_at?: string;
    category?: { name: string };
}
interface Activity {
    id: number;
    title: string;
    photo_path?: string;
    activity_date?: string;
    alumni_name_snapshot: string;
    program_studi_snapshot?: string;
    category?: { name: string };
}
interface Props {
    recentNews?: News[];
    recentActivities?: Activity[];
    movementPrograms?: { id: number; name: string; description: string }[];
    stats: { total_alumni?: number; total_prodi?: number };
}
const programs = [
    'Informatika',
    'Teknik Sipil',
    'Teknik Mesin',
    'Teknik Industri',
];
const quickLinks = [
    {
        icon: UsersRound,
        title: 'Direktori Alumni',
        description: 'Cari profil lulusan Fakultas Teknik UNMA',
        href: '/alumni',
    },
    {
        icon: BookOpenText,
        title: 'Profil & SKPI',
        description: 'Lihat rekam prestasi dan kompetensi alumni',
        href: '/alumni',
    },
    {
        icon: Heart,
        title: 'Alumni Bergerak',
        description: 'Kontribusi sukarela dan laporan pemanfaatan dana',
        href: '/alumni-bergerak',
    },
];
const date = (value?: string) =>
    value && !Number.isNaN(Date.parse(value))
        ? new Date(value).toLocaleDateString('id-ID', {
              day: 'numeric',
              month: 'long',
              year: 'numeric',
          })
        : '';
const image = (path: string) =>
    /^(https?:\/\/|\/)/.test(path) ? path : `/storage/${path}`;

function AnimatedNumber({ value }: { value?: number }) {
    const [display, setDisplay] = useState(0);
    const elementRef = useRef<HTMLSpanElement>(null);
    const hasAnimated = useRef(false);

    useEffect(() => {
        if (value === undefined || value === null) return;
        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            setDisplay(value);
            return;
        }

        const el = elementRef.current;
        if (!el) {
            setDisplay(value);
            return;
        }

        const observer = new IntersectionObserver(
            (entries) => {
                if (entries[0]?.isIntersecting && !hasAnimated.current) {
                    hasAnimated.current = true;
                    observer.disconnect();

                    const duration = 1200;
                    const start = performance.now();
                    const startVal = 0;

                    const animate = (now: number) => {
                        const elapsed = now - start;
                        const progress = Math.min(elapsed / duration, 1);
                        const ease = 1 - Math.pow(1 - progress, 3);
                        const current = Math.round(
                            startVal + (value - startVal) * ease,
                        );
                        setDisplay(current);

                        if (progress < 1) {
                            requestAnimationFrame(animate);
                        } else {
                            setDisplay(value);
                        }
                    };

                    requestAnimationFrame(animate);
                }
            },
            { threshold: 0.1 },
        );

        observer.observe(el);
        return () => observer.disconnect();
    }, [value]);

    if (value === undefined || value === null) return <span>?</span>;

    return <span ref={elementRef}>{display.toLocaleString('id-ID')}</span>;
}

export default function Home({
    recentNews = [],
    recentActivities = [],
    movementPrograms = [],
    stats,
}: Props) {
    const storiesRef = useRef<HTMLDivElement>(null);
    const dragRef = useRef<{ x: number; scroll: number } | null>(null);
    const [storyOffset, setStoryOffset] = useState(0);
    const previousPositions = useRef(new Map<Element, number>());

    useEffect(() => {
        const elements = document.querySelectorAll('.scroll-reveal');
        if (!elements.length) return;
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.12, rootMargin: '0px 0px -40px 0px' },
        );

        elements.forEach((el) => observer.observe(el));
        return () => observer.disconnect();
    }, []);

    useLayoutEffect(() => {
        const positions = previousPositions.current;
        const animations: Animation[] = [];
        if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            positions.forEach((left, element) => {
                if (!element.isConnected) return;
                const distance = left - element.getBoundingClientRect().left;
                if (distance)
                    animations.push(
                        element.animate(
                            [
                                { transform: `translateX(${distance}px)` },
                                { transform: 'translateX(0)' },
                            ],
                            {
                                duration: 420,
                                easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
                            },
                        ),
                    );
            });
        }
        positions.clear();
        return () => animations.forEach((animation) => animation.cancel());
    }, [storyOffset]);
    const offset = recentActivities.length
        ? storyOffset % recentActivities.length
        : 0;
    const visibleStories = [
        ...recentActivities.slice(offset),
        ...recentActivities.slice(0, offset),
    ];
    function moveStories(direction: number) {
        const track = storiesRef.current;
        if (!track || recentActivities.length < 2) return;
        const maxScroll = track.scrollWidth - track.clientWidth;
        if (maxScroll <= 1) {
            previousPositions.current.clear();
            Array.from(track.children).forEach((element) => {
                previousPositions.current.set(
                    element,
                    element.getBoundingClientRect().left,
                );
            });
            setStoryOffset(
                (current) =>
                    (current + direction + recentActivities.length) %
                    recentActivities.length,
            );
            return;
        }
        const card = track.firstElementChild as HTMLElement | null;
        const step =
            (card?.getBoundingClientRect().width ?? track.clientWidth) + 16;
        const atEnd = direction > 0 && track.scrollLeft >= maxScroll - 2;
        const atStart = direction < 0 && track.scrollLeft <= 2;
        track.scrollTo({
            left: atEnd
                ? 0
                : atStart
                  ? maxScroll
                  : track.scrollLeft + direction * step,
            behavior: window.matchMedia('(prefers-reduced-motion: reduce)')
                .matches
                ? 'instant'
                : 'smooth',
        });
    }
    const [query, setQuery] = useState('');
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState('');
    function search(event: FormEvent) {
        event.preventDefault();
        if (!query.trim()) {
            setError('Masukkan nama atau NPM alumni.');
            return;
        }
        setError('');
        router.get(
            '/alumni',
            { search: query.trim() },
            {
                onStart: () => setBusy(true),
                onFinish: () => setBusy(false),
                onError: () =>
                    setError('Pencarian belum berhasil. Silakan coba lagi.'),
            },
        );
    }
    const featured = recentNews[0];
    return (
        <PortalLayout>
            <Head title="Portal Alumni Fakultas Teknik UNMA">
                <meta
                    name="description"
                    content="Temukan alumni Fakultas Teknik Universitas Majalengka, akses SKPI, baca kabar komunitas, dan dukung program Alumni Bergerak."
                />
            </Head>
            <div className="alumni-home">
                {/* Full-bleed campus image; directional shading keeps text readable without hiding the building. */}
                <section className="relative isolate overflow-hidden bg-[#202024]">
                    <img
                        src="/images/alumni/universitas-majalengka-jabar.webp"
                        alt=""
                        fetchPriority="high"
                        className="absolute inset-0 -z-20 h-full w-full object-cover object-center transition-transform duration-1000 ease-out hover:scale-105"
                    />
                    <div className="absolute inset-0 -z-10 bg-black/35" />
                    <div className="absolute inset-0 -z-10 bg-linear-to-r from-black/75 via-black/35 to-transparent" />
                    <div className="alumni-shell flex min-h-130 items-center lg:min-h-150">
                        <div className="w-full max-w-162.5 py-14 lg:py-20">
                            <div className="w-full">
                                <p className="anim-hero-1 mb-4 text-[10px] font-semibold tracking-[.12em] text-[#F1DA91] sm:text-xs">
                                    KOMUNITAS · KOLABORASI · KONTRIBUSI
                                </p>
                                <h1 className="anim-hero-2 alumni-display text-[28px] leading-[1.1] text-white sm:text-[40px] lg:text-[56px]">
                                    Satu Portal untuk Seluruh Keluarga{' '}
                                    <span className="text-[#F1DA91]">
                                        Alumni FT UNMA
                                    </span>
                                </h1>
                                <p className="anim-hero-3 mt-5 max-w-xl text-sm leading-6 text-white/90 sm:text-[15px] sm:leading-7">
                                    Temukan rekan alumni, akses SKPI, dan ikuti
                                    kabar dari almamater. Tetap terhubung dengan
                                    Fakultas Teknik Universitas Majalengka.
                                </p>
                                <form
                                    onSubmit={search}
                                    className="anim-hero-4 mt-7"
                                    aria-label="Pencarian alumni"
                                >
                                    <div className="flex flex-col gap-3 sm:flex-row">
                                        <label className="relative min-w-0 flex-1">
                                            <span className="sr-only">
                                                Nama atau NPM alumni
                                            </span>
                                            <Search
                                                aria-hidden="true"
                                                className="absolute top-1/2 left-4 h-4.5 w-4.5 -translate-y-1/2 text-[#68686E]"
                                            />
                                            <input
                                                id="home-alumni-search"
                                                value={query}
                                                onChange={(e) =>
                                                    setQuery(e.target.value)
                                                }
                                                aria-describedby={
                                                    error
                                                        ? 'home-search-error'
                                                        : undefined
                                                }
                                                aria-invalid={!!error}
                                                maxLength={150}
                                                className="h-14 w-full rounded-lg border border-[#D7D1CC] bg-white pr-3 pl-11 text-sm transition-shadow focus:shadow-md"
                                                placeholder="Nama alumni atau NPM"
                                            />
                                        </label>
                                        <button
                                            id="home-search-submit"
                                            disabled={busy}
                                            className="h-12 rounded-lg bg-[#7A1F2A] px-5 text-sm font-semibold text-white transition-all duration-200 hover:bg-[#681923] hover:shadow-lg active:scale-[0.98] disabled:opacity-60 sm:h-14 sm:px-6"
                                        >
                                            {busy
                                                ? 'Mencari...'
                                                : 'Cari Alumni'}
                                        </button>
                                    </div>
                                    {error && (
                                        <p
                                            id="home-search-error"
                                            role="alert"
                                            className="mt-2 rounded-lg bg-white px-3 py-2 text-sm text-[#7A1F2A]"
                                        >
                                            {error}
                                        </p>
                                    )}
                                </form>
                                <p className="anim-hero-5 mt-5 mb-2 text-xs text-white">
                                    Cari berdasarkan program studi:
                                </p>
                                <div className="anim-hero-5 flex flex-wrap gap-2">
                                    {programs.map((name, i) => (
                                        <Link
                                            id={`hero-prodi-${i}`}
                                            key={name}
                                            href={`/alumni?prodi=${encodeURIComponent(name)}`}
                                            className="rounded-lg border border-white/25 bg-white/10 px-4 py-2 text-xs font-semibold text-white/90 backdrop-blur-sm transition-colors duration-200 hover:border-[#E5C85D]/50 hover:bg-[#E5C85D]/10 hover:text-[#E5C85D]"
                                        >
                                            {name}
                                        </Link>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section
                    className="border-b border-[#E7E3DF] bg-white"
                    aria-label="Ringkasan portal"
                >
                    <div className="alumni-shell flex flex-col gap-6 py-7 md:flex-row md:items-center md:justify-between md:gap-10 md:py-8">
                        <div className="scroll-reveal border-l-2 border-[#C9A227] pl-4">
                            <h2 className="alumni-display text-2xl leading-tight text-[#242428]">
                                Jejaring alumni FT UNMA
                            </h2>
                            <p className="mt-2 text-sm leading-6 text-[#5F5F64]">
                                Lintas angkatan dan program studi, tetap
                                terhubung dengan almamater.
                            </p>
                        </div>
                        <dl className="grid shrink-0 grid-cols-2 divide-x divide-[#E7E3DF] border-t border-[#E7E3DF] pt-5 md:border-t-0 md:pt-0">
                            {[
                                {
                                    icon: UsersRound,
                                    value: stats.total_alumni,
                                    label: 'Alumni terdata',
                                },
                                {
                                    icon: BookOpenText,
                                    value: stats.total_prodi,
                                    label: 'Program studi',
                                },
                            ].map(({ icon: Icon, value, label }, index) => (
                                <div
                                    key={label}
                                    className={`scroll-reveal ${index ? 'pl-5 delay-150 md:pl-8' : 'pr-5 md:pr-8'} group flex items-center gap-3 md:gap-4`}
                                >
                                    <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#F8EEEF] text-[#7A1F2A] transition-transform duration-300 group-hover:scale-110 group-hover:bg-[#7A1F2A] group-hover:text-white">
                                        <Icon
                                            aria-hidden="true"
                                            className="h-5 w-5"
                                        />
                                    </span>
                                    <div className="flex flex-col-reverse gap-1">
                                        <dt className="text-xs text-[#5F5F64]">
                                            {label}
                                        </dt>
                                        <dd className="text-2xl leading-none font-semibold tracking-tight text-[#7A1F2A] tabular-nums transition-transform duration-300 group-hover:translate-x-0.5 sm:text-3xl">
                                            <AnimatedNumber value={value} />
                                        </dd>
                                    </div>
                                </div>
                            ))}
                        </dl>
                    </div>
                </section>
                <section
                    className="alumni-shell py-10"
                    aria-label="Layanan alumni"
                >
                    <div className="grid gap-3 md:grid-cols-3">
                        {quickLinks.map(
                            ({ icon: Icon, title, description, href }, i) => (
                                <Link
                                    id={`home-service-${i}`}
                                    key={href}
                                    href={href}
                                    className={`scroll-reveal ${i === 1 ? 'delay-100' : i === 2 ? 'delay-200' : ''} card-interactive group flex min-h-28 items-center gap-4 rounded-xl border border-[#E7E3DF] bg-white p-5 hover:border-[#B39A9D]`}
                                >
                                    <div className="grid h-12 w-12 shrink-0 place-items-center rounded-lg bg-[#F8EEEF] text-[#7A1F2A] transition-all duration-300 group-hover:scale-105 group-hover:bg-[#7A1F2A] group-hover:text-white">
                                        <Icon
                                            aria-hidden="true"
                                            className="h-5 w-5"
                                        />
                                    </div>
                                    <div className="min-w-0 flex-1">
                                        <h2 className="font-semibold transition-colors duration-200 group-hover:text-[#7A1F2A]">
                                            {title}
                                        </h2>
                                        <p className="mt-1 text-sm leading-5 text-[#5F5F64]">
                                            {description}
                                        </p>
                                    </div>
                                </Link>
                            ),
                        )}
                    </div>
                </section>
                <section className="alumni-shell grid gap-12 pt-7 pb-16 lg:grid-cols-12 lg:gap-16">
                    <div className="scroll-reveal lg:col-span-5">
                        <p className="mb-2 text-xs font-semibold text-[#87630E]">
                            PROGRAM STUDI
                        </p>
                        <h2 className="alumni-display section-title">
                            Direktori Alumni FT UNMA
                        </h2>
                        <p className="mt-3 mb-7 text-sm text-[#5F5F64]">
                            Temukan alumni berdasarkan program studi.
                        </p>
                        <div className="border-y border-[#E7E3DF]">
                            {programs.map((name, i) => (
                                <Link
                                    id={`directory-prodi-${i}`}
                                    key={name}
                                    href={`/alumni?prodi=${encodeURIComponent(name)}`}
                                    className="group flex items-center gap-5 border-b border-[#E7E3DF] py-6 transition-all duration-200 last:border-0 hover:pl-2"
                                >
                                    <span className="alumni-display text-3xl text-[#987D69] transition-colors duration-200 group-hover:text-[#7A1F2A]">
                                        0{i + 1}
                                    </span>
                                    <div className="flex-1">
                                        <h3 className="font-semibold transition-colors duration-200 group-hover:text-[#7A1F2A]">
                                            {name}
                                        </h3>
                                        <p className="mt-1 text-sm text-[#5F5F64]">
                                            Lihat direktori lulusan
                                        </p>
                                    </div>
                                    <ArrowRight
                                        aria-hidden="true"
                                        className="h-4 w-4 text-[#7A1F2A] transition-transform duration-200 group-hover:translate-x-1.5"
                                    />
                                </Link>
                            ))}
                        </div>
                    </div>
                    <div className="scroll-reveal delay-150 lg:col-span-7">
                        <div className="mb-7 flex items-end justify-between gap-4">
                            <div>
                                <p className="mb-2 text-xs font-semibold text-[#87630E]">
                                    BERITA & MEDIA
                                </p>
                                <h2 className="alumni-display section-title">
                                    Kabar Fakultas & Komunitas
                                </h2>
                            </div>
                            <Link
                                id="home-news-all"
                                href="/berita"
                                className="group inline-flex shrink-0 items-center gap-1 py-3 text-xs font-semibold text-[#7A1F2A] hover:underline"
                            >
                                Semua berita{' '}
                                <ChevronRight className="h-3.5 w-3.5" />
                            </Link>
                        </div>
                        {featured ? (
                            <article className="card-interactive group overflow-hidden rounded-xl border border-[#E7E3DF] bg-white">
                                {featured.thumbnail && (
                                    <div className="overflow-hidden">
                                        <img
                                            src={image(featured.thumbnail)}
                                            alt=""
                                            loading="lazy"
                                            className="aspect-16/7 w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
                                        />
                                    </div>
                                )}
                                <div className="p-6">
                                    <p className="text-xs text-[#5F5F64]">
                                        {featured.category?.name} ·{' '}
                                        {date(featured.published_at)}
                                    </p>
                                    <h3 className="mt-3 text-xl leading-snug font-semibold">
                                        <Link
                                            id="home-news-featured"
                                            href={`/berita/${featured.slug}`}
                                            className="transition-colors duration-200 hover:text-[#7A1F2A]"
                                        >
                                            {featured.title}
                                        </Link>
                                    </h3>
                                    {featured.excerpt && (
                                        <p className="mt-3 text-sm leading-6 text-[#5F5F64]">
                                            {featured.excerpt}
                                        </p>
                                    )}
                                </div>
                            </article>
                        ) : (
                            <p className="rounded-xl border border-[#E7E3DF] bg-white p-8 text-sm text-[#5F5F64]">
                                Belum ada berita yang dipublikasikan.
                            </p>
                        )}
                        {recentNews.slice(1, 3).map((item) => (
                            <Link
                                id={`home-news-${item.id}`}
                                key={item.id}
                                href={`/berita/${item.slug}`}
                                className="card-interactive group mt-3 flex gap-4 rounded-xl border border-[#E7E3DF] bg-white p-4 hover:border-[#B39A9D]"
                            >
                                {item.thumbnail && (
                                    <div className="overflow-hidden rounded-lg">
                                        <img
                                            src={image(item.thumbnail)}
                                            alt=""
                                            loading="lazy"
                                            className="h-20 w-24 shrink-0 rounded-lg object-cover transition-transform duration-300 group-hover:scale-105"
                                        />
                                    </div>
                                )}
                                <div>
                                    <p className="text-xs text-[#5F5F64]">
                                        {date(item.published_at)}
                                    </p>
                                    <h3 className="mt-2 leading-snug font-semibold transition-colors duration-200 group-hover:text-[#7A1F2A]">
                                        {item.title}
                                    </h3>
                                </div>
                            </Link>
                        ))}
                    </div>
                </section>
                <section className="border-y border-[#EEEAE6] bg-[#F7F6F3]">
                    <div className="alumni-shell py-10 lg:py-14">
                        <div className="scroll-reveal mb-8 flex flex-wrap items-end justify-between gap-4">
                            <div>
                                <p className="mb-2 text-xs font-semibold text-[#87630E]">
                                    KIPRAH ALUMNI
                                </p>
                                <h2 className="alumni-display section-title">
                                    Cerita dan Pencapaian Alumni
                                </h2>
                                <p className="mt-3 text-sm text-[#5F5F64]">
                                    Kegiatan, pencapaian, dan kolaborasi dari
                                    komunitas alumni.
                                </p>
                            </div>
                            <Link
                                id="home-activities-all"
                                href="/berita?tab=kegiatan"
                                className="inline-flex items-center gap-1 py-3 text-sm font-semibold text-[#7A1F2A] hover:underline"
                            >
                                Semua kegiatan{' '}
                                <ChevronRight className="h-4 w-4" />
                            </Link>
                        </div>
                        {recentActivities.length > 1 && (
                            <div className="scroll-reveal mb-5 delay-100">
                                <span className="text-xs text-[#5F5F64]">
                                    Geser untuk membaca cerita lainnya
                                </span>
                            </div>
                        )}
                        <div
                            ref={storiesRef}
                            id="alumni-stories-track"
                            className="scroll-reveal alumni-stories-track delay-150"
                            onPointerDown={(event) => {
                                if (
                                    event.pointerType !== 'mouse' ||
                                    event.button !== 0
                                )
                                    return;
                                dragRef.current = {
                                    x: event.clientX,
                                    scroll: event.currentTarget.scrollLeft,
                                };
                                event.currentTarget.setPointerCapture(
                                    event.pointerId,
                                );
                            }}
                            onPointerMove={(event) => {
                                if (dragRef.current)
                                    event.currentTarget.scrollLeft =
                                        dragRef.current.scroll -
                                        (event.clientX - dragRef.current.x);
                            }}
                            onPointerUp={(event) => {
                                const drag = dragRef.current;
                                dragRef.current = null;
                                if (
                                    drag &&
                                    event.currentTarget.scrollWidth <=
                                        event.currentTarget.clientWidth + 1 &&
                                    Math.abs(event.clientX - drag.x) > 40
                                )
                                    moveStories(
                                        event.clientX < drag.x ? 1 : -1,
                                    );
                            }}
                            onPointerCancel={() => {
                                dragRef.current = null;
                            }}
                            onLostPointerCapture={() => {
                                dragRef.current = null;
                            }}
                            onDragStart={(event) => event.preventDefault()}
                            role="region"
                            aria-roledescription="carousel"
                            aria-label="Cerita alumni"
                            tabIndex={0}
                            onKeyDown={(event) => {
                                if (
                                    event.key === 'ArrowRight' ||
                                    event.key === 'ArrowLeft'
                                ) {
                                    event.preventDefault();
                                    moveStories(
                                        event.key === 'ArrowRight' ? 1 : -1,
                                    );
                                }
                            }}
                        >
                            {recentActivities.length ? (
                                visibleStories.map((activity, index) => (
                                    <article
                                        role="group"
                                        aria-roledescription="slide"
                                        aria-label={`${index + 1} dari ${recentActivities.length}`}
                                        key={activity.id}
                                        className={`card-interactive group relative grid gap-5 rounded-xl border border-[#E7E3DF] bg-white p-5 ${activity.photo_path ? 'sm:grid-cols-[160px_1fr]' : ''}`}
                                    >
                                        {activity.photo_path && (
                                            <div className="overflow-hidden rounded-lg">
                                                <img
                                                    src={image(
                                                        activity.photo_path,
                                                    )}
                                                    alt=""
                                                    loading="lazy"
                                                    className="aspect-4/3 h-full w-full rounded-lg object-cover transition-transform duration-500 ease-out group-hover:scale-105"
                                                />
                                            </div>
                                        )}
                                        <div className="flex flex-col">
                                            <p className="text-xs text-[#5F5F64]">
                                                {activity.category?.name} ·{' '}
                                                {date(activity.activity_date)}
                                            </p>
                                            <h3 className="mt-3 text-lg leading-snug font-semibold transition-colors duration-200 group-hover:text-[#7A1F2A]">
                                                {activity.title}
                                            </h3>
                                            <div className="mt-auto pt-6">
                                                <p className="text-sm font-medium">
                                                    {
                                                        activity.alumni_name_snapshot
                                                    }
                                                </p>
                                                <p className="mt-1 text-xs text-[#5F5F64]">
                                                    {
                                                        activity.program_studi_snapshot
                                                    }
                                                </p>
                                            </div>
                                        </div>
                                        <Link
                                            href={`/kegiatan/${activity.id}`}
                                            className="absolute inset-0"
                                            aria-label={activity.title}
                                        />
                                    </article>
                                ))
                            ) : (
                                <p className="text-sm text-[#5F5F64]">
                                    Belum ada kegiatan yang dipublikasikan.
                                </p>
                            )}
                        </div>
                        <Link
                            id="home-submit-activity"
                            href="/kirim-kegiatan"
                            className="scroll-reveal group mt-7 inline-flex min-h-11 items-center gap-1.5 text-sm font-semibold text-[#7A1F2A] delay-200 hover:underline"
                        >
                            Bagikan kegiatan alumni Anda{' '}
                            <ChevronRight
                                aria-hidden="true"
                                className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1"
                            />
                        </Link>
                    </div>
                </section>
                <section className="bg-[#7A1F2A] text-white">
                    <div className="alumni-shell py-10 lg:py-16">
                        <div className="grid items-start gap-8 lg:grid-cols-12 lg:gap-16">
                            <div className="scroll-reveal lg:col-span-5">
                                <p className="mb-4 flex items-center gap-2 text-xs font-semibold tracking-widest text-[#E5C85D]">
                                    <HandHeart
                                        aria-hidden="true"
                                        className="h-5 w-5"
                                    />{' '}
                                    ALUMNI BERGERAK
                                </p>
                                <h2 className="alumni-display text-2xl leading-tight sm:text-[34px] md:text-[38px] lg:text-[46px]">
                                    Gerakan Solidaritas Alumni FT UNMA
                                </h2>
                                <p className="mt-5 max-w-lg text-sm leading-7 text-white/85">
                                    Ruang kontribusi sukarela alumni untuk
                                    Fakultas Teknik. Fakultas mencatat
                                    pemanfaatan dana dan perkembangan
                                    kegiatannya di sini agar alumni dapat
                                    mengikuti penggunaannya secara terbuka.
                                </p>
                                <div className="mt-7 border-t border-white/20 pt-6">
                                    <Link
                                        id="home-movement-donate"
                                        href="/alumni-bergerak"
                                        className="inline-flex min-h-12 items-center gap-3 rounded-lg bg-[#C9A227] px-6 text-sm font-semibold text-[#2C080E] transition-all duration-200 hover:bg-[#D8B744] hover:shadow-lg active:scale-[0.98]"
                                    >
                                        <Heart
                                            aria-hidden="true"
                                            className="h-4 w-4"
                                        />{' '}
                                        Kontribusi & Transparansi
                                    </Link>
                                </div>
                            </div>
                            <div className="lg:col-span-7">
                                <h3 className="scroll-reveal mb-4 text-xs font-semibold tracking-widest text-white/80">
                                    PROGRAM FAKULTAS TEKNIK
                                </h3>
                                {movementPrograms.length ? (
                                    <div className="grid gap-4 sm:grid-cols-2">
                                        {movementPrograms
                                            .slice(0, 4)
                                            .map((program, idx) => {
                                                const Icon =
                                                    /pendidikan|beasiswa|ukt/i.test(
                                                        program.name,
                                                    )
                                                        ? GraduationCap
                                                        : /fakultas|lab|fasilitas/i.test(
                                                                program.name,
                                                            )
                                                          ? Building2
                                                          : HandHeart;
                                                return (
                                                    <Link
                                                        id={`home-donation-program-${program.id}`}
                                                        key={program.id}
                                                        href="/alumni-bergerak"
                                                        className={`scroll-reveal ${idx % 2 === 1 ? 'delay-150' : 'delay-100'} group rounded-xl border border-white/20 bg-white/6 p-6 transition-all duration-300 hover:-translate-y-1 hover:border-[#E5C85D]/70 hover:bg-white/10 hover:shadow-lg`}
                                                    >
                                                        <span className="mb-5 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-[#C9A227]/15 text-[#E5C85D] transition-transform duration-300 group-hover:scale-110">
                                                            <Icon
                                                                aria-hidden="true"
                                                                className="h-6 w-6"
                                                            />
                                                        </span>
                                                        <h4 className="text-base leading-snug font-semibold">
                                                            {program.name}
                                                        </h4>
                                                        <p className="mt-3 text-sm leading-6 text-white/85">
                                                            {
                                                                program.description
                                                            }
                                                        </p>
                                                        <span className="mt-5 inline-flex items-center gap-2 text-xs font-semibold text-[#E5C85D]">
                                                            Lihat program{' '}
                                                            <ArrowRight
                                                                aria-hidden="true"
                                                                className="h-3.5 w-3.5 transition-transform duration-200 group-hover:translate-x-1"
                                                            />
                                                        </span>
                                                    </Link>
                                                );
                                            })}
                                    </div>
                                ) : (
                                    <p className="text-sm text-white/85">
                                        Program donasi akan ditampilkan setelah
                                        dipublikasikan.
                                    </p>
                                )}
                                <div className="scroll-reveal mt-6 flex flex-wrap gap-x-6 gap-y-3 border-t border-white/20 pt-5 delay-200">
                                    <Link
                                        id="home-donors-link"
                                        href="/alumni-bergerak#donatur"
                                        className="inline-flex min-h-11 items-center gap-2 text-sm text-white/90 transition-colors duration-200 hover:text-[#E5C85D]"
                                    >
                                        <Users
                                            aria-hidden="true"
                                            className="h-4 w-4"
                                        />{' '}
                                        Daftar donatur
                                    </Link>
                                    <Link
                                        id="home-transparency-link"
                                        href="/alumni-bergerak#penyaluran"
                                        className="inline-flex min-h-11 items-center gap-2 text-sm text-white/90 transition-colors duration-200 hover:text-[#E5C85D]"
                                    >
                                        <FileText
                                            aria-hidden="true"
                                            className="h-4 w-4"
                                        />{' '}
                                        Penggunaan dana
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </PortalLayout>
    );
}