import { Link, usePage } from '@inertiajs/react';
import { SeoHead } from '@/components/seo-head';
import { motion } from 'framer-motion';
import { ArrowRight, ChevronRight } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import PublicLayout from '@/layouts/public-layout';

interface TimelineEntry {
    id: number;
    year: number;
    title: string;
    description: string;
    sort_order: number;
}

interface BoardMember {
    id: number;
    name: string;
    title: string;
    institution: string;
    bio: string | null;
    photo_url: string | null;
    sort_order: number;
}

interface UniquePoint { id: number; title: string; body: string | null }

interface Props {
    timeline: TimelineEntry[];
    board_members: BoardMember[];
    unique_points: UniquePoint[];
}

function useInView(threshold = 0.12) {
    const ref = useRef<HTMLDivElement>(null);
    const [inView, setInView] = useState(false);
    useEffect(() => {
        const observer = new IntersectionObserver(
            ([e]) => {
                if (e.isIntersecting) {
                    setInView(true);
                    observer.disconnect();
                }
            },
            { threshold },
        );
        if (ref.current) observer.observe(ref.current);
        return () => observer.disconnect();
    }, [threshold]);
    return { ref, inView };
}

function initials(name: string) {
    return name
        .split(' ')
        .filter(Boolean)
        .map((w) => w[0])
        .slice(0, 2)
        .join('')
        .toUpperCase();
}

export default function About({ timeline, board_members, unique_points }: Props) {
    const timelineSection = useInView(0.05);
    const leadershipSection = useInView();
    const uniqueSection = useInView();

    return (
        <div>
            <SeoHead
                title="About ABEC Africa"
                description="Learn about the African Biomedical Engineering Consortium — our mission, history, leadership board, and what makes ABEC unique in advancing biomedical engineering across Africa."
                image="/images/african-graduates-caps-gowns.jpg"
                keywords="about ABEC Africa, African Biomedical Engineering Consortium history, biomedical engineering leadership Africa, ABEC board members, ABEC mission"
                jsonLd={{
                    '@context': 'https://schema.org',
                    '@type': 'AboutPage',
                    url: 'https://abecafrica.org/about',
                    name: 'About ABEC Africa',
                    isPartOf: { '@id': 'https://abecafrica.org/#website' },
                    about: { '@id': 'https://abecafrica.org/#organization' },
                    inLanguage: 'en-GB',
                }}
            />
            {/* HERO */}
            <section className="relative min-h-[70vh] flex items-end overflow-hidden">
                <div className="absolute inset-0">
                    <img
                        src="/images/african-university-convocation.jpg"
                        alt="African university convocation ceremony"
                        className="w-full h-full object-cover object-center"
                    />
                    <div
                        className="absolute inset-0"
                        style={{
                            background:
                                'linear-gradient(to top, rgba(17,17,19,0.97) 0%, rgba(17,17,19,0.7) 40%, rgba(27,38,92,0.25) 75%, transparent 100%)',
                        }}
                    />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 pt-48 w-full">
                    <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
                        <div className="flex items-center gap-3 mb-4">
                            <div className="w-8 h-px bg-[#d0d4ec]/60" />
                            <span className="text-[#d0d4ec]/70 text-xs tracking-[0.2em] uppercase font-semibold">Who We Are</span>
                        </div>
                        <h1 className="text-5xl lg:text-7xl font-black text-white tracking-tight leading-tight mb-4">About ABEC</h1>
                        <p className="text-white/60 text-lg max-w-2xl leading-relaxed">
                            A pan-African platform dedicated to strengthening healthcare systems through Biomedical Engineering, innovation,
                            research, and entrepreneurship.
                        </p>
                    </motion.div>
                </div>
            </section>

            {/* VISION / MISSION / GOAL */}
            <section className="py-20 bg-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid md:grid-cols-3 gap-px bg-[#d0d4ec]">
                        {[
                            {
                                label: 'Our Vision',
                                text: 'To promote and share excellence in Biomedical Engineering for improving the health and wealth of Africa through a strong regional academic and technological platform.',
                            },
                            {
                                label: 'Our Mission',
                                text: 'To build Biomedical Engineering expertise that improves healthcare systems across Africa.',
                            },
                            {
                                label: 'Our Goal',
                                text: 'To lay strong foundations of human capital in Africa with expertise in Biomedical Engineering across academia, research, industry, and innovation through modern and traditional learning platforms.',
                            },
                        ].map((item) => (
                            <div key={item.label} className="bg-white p-10">
                                <div className="section-rule" />
                                <h3 className="label-caps mb-4">{item.label}</h3>
                                <p className="text-[#1b265c]/75 leading-[1.85]">{item.text}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* OUR STORY — left-aligned box, image visible on right */}
            <section className="relative overflow-hidden">
                <div className="absolute inset-0">
                    <img
                        src="/images/professor-reading-library.jpg"
                        alt="African professor reading in library"
                        className="w-full h-full object-cover object-right"
                    />
                    <div
                        className="absolute inset-0"
                        style={{
                            background: 'linear-gradient(to right, rgba(17,17,19,0.15) 0%, rgba(17,17,19,0.08) 50%, transparent 100%)',
                        }}
                    />
                </div>

                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
                    {/* Box sits on the left, ~52% of the container */}
                    <div className="lg:max-w-[52%] bg-white shadow-lg">
                        <div className="p-8 lg:p-14">
                            <div className="section-rule" />
                            <span className="label-caps block mb-4">Our Story</span>
                            <h2 className="text-4xl font-black text-[#1b265c] tracking-tight leading-tight mb-8">Born from a Bold Idea</h2>
                            <div className="space-y-5 text-[#1b265c]/75 leading-[1.85]">
                                <p>
                                    ABEC was inspired and supported by the United Nations Economic Commission for Africa (UNECA) during the first
                                    Innovators' Summer School held in Uganda in 2012, under the visionary leadership of Dr. Victor Konde.
                                </p>
                                <p>
                                    Prof. Arti Ahluwalia from the University of Pisa served as Patron, working to replicate and contextualize her
                                    Euro-Asia consortium experience into the African context — a bold idea to strengthen biomedical engineering
                                    education across a continent.
                                </p>
                                <p>
                                    What began as a summer school grew into a legally incorporated consortium in 2020 (Reg No: 80020002433980,
                                    Uganda) with a continental footprint spanning 19 universities in 9 countries.
                                </p>
                                <p>
                                    Today, ABEC operates from its coordination offices in Mbarara City, Uganda, hosted within the premises of
                                    Soar Research Foundation.
                                </p>
                            </div>
                        </div>

                        {/* Founded badge strip */}
                        <div className="flex items-center bg-[#1b265c] px-8 lg:px-14 py-4">
                            <span className="text-white text-3xl font-black mr-4">2012</span>
                            <span className="text-white/50 text-xs tracking-widest uppercase">Founded at the First Innovators' Summer School, Uganda</span>
                        </div>
                    </div>
                </div>
            </section>

            {/* TIMELINE */}
            <section ref={timelineSection.ref} className="py-24 bg-[#f0f1f8]">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="mb-16">
                        <div className="section-rule" />
                        <span className="label-caps block mb-4">Milestones</span>
                        <h2 className="text-4xl font-black text-[#1b265c] tracking-tight">A Decade of Impact</h2>
                    </div>

                    <div className="relative">
                        {/* Left spine */}
                        <div className="absolute top-0 bottom-0 hidden md:block" style={{ left: '5.5rem', width: '1px', background: '#d0d4ec' }} />

                        <div className="space-y-6">
                            {timeline.map((item, i) => (
                                <motion.div
                                    key={item.id}
                                    initial={{ opacity: 0, x: -20 }}
                                    animate={timelineSection.inView ? { opacity: 1, x: 0 } : {}}
                                    transition={{ duration: 0.45, delay: i * 0.07 }}
                                    className="flex items-start gap-0"
                                >
                                    {/* Year label */}
                                    <div className="hidden md:flex flex-shrink-0 w-20 pt-4 justify-end pr-4">
                                        <span
                                            className="text-sm font-black text-[#df2548] tracking-wide leading-none"
                                            style={{ fontFamily: 'var(--font-display)' }}
                                        >
                                            {item.year}
                                        </span>
                                    </div>

                                    {/* Dot */}
                                    <div className="hidden md:flex flex-shrink-0 flex-col items-center pt-3.5">
                                        <div className="w-4 h-4 rounded-full bg-[#df2548] border-4 border-[#f0f1f8] flex-shrink-0" />
                                    </div>

                                    {/* Card */}
                                    <div className="flex-1 md:pl-8 pb-2">
                                        {/* Mobile year badge */}
                                        <div className="md:hidden flex items-center gap-3 mb-3">
                                            <div className="px-3 py-1 bg-[#df2548] text-white text-xs font-bold tracking-wider">{item.year}</div>
                                            <div className="flex-1 h-px bg-[#d0d4ec]" />
                                        </div>
                                        <div className="bg-white border border-[#d0d4ec] p-6 hover:border-[#df2548] transition-colors group">
                                            <h3 className="font-bold text-[#1b265c] mb-2">{item.title}</h3>
                                            <p className="text-[#555e8a] text-sm leading-relaxed">{item.description}</p>
                                        </div>
                                    </div>
                                </motion.div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* FOUNDING LEADERSHIP — right-aligned box, image visible on left */}
            <section ref={leadershipSection.ref} className="relative overflow-hidden">
                <div className="absolute inset-0">
                    <img
                        src="/images/senior-professional-window.jpg"
                        alt="Senior academic professional"
                        className="w-full h-full object-cover object-left"
                    />
                    <div
                        className="absolute inset-0"
                        style={{
                            background: 'linear-gradient(to left, rgba(17,17,19,0.15) 0%, rgba(17,17,19,0.08) 50%, transparent 100%)',
                        }}
                    />
                </div>

                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
                    {/* Box sits on the right — wider so founders fit in 2 rows */}
                    <div className="lg:max-w-[75%] lg:ml-auto bg-white shadow-lg">
                        <div className="p-8 lg:p-10">
                            <div className="section-rule" />
                            <span className="label-caps block mb-4">Founding Leadership</span>
                            <h2 className="text-4xl font-black text-[#1b265c] tracking-tight mb-10">The Founders</h2>

                            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
                                {board_members.map((person, i) => (
                                    <motion.div
                                        key={person.id}
                                        initial={{ opacity: 0, y: 20 }}
                                        animate={leadershipSection.inView ? { opacity: 1, y: 0 } : {}}
                                        transition={{ duration: 0.45, delay: i * 0.1 }}
                                        className="flex items-start gap-4 p-5 border border-[#d0d4ec] group hover:border-[#df2548] transition-colors"
                                    >
                                        {person.photo_url ? (
                                            <img
                                                src={person.photo_url}
                                                alt={person.name}
                                                className="w-14 h-14 object-cover flex-shrink-0 rounded-full"
                                            />
                                        ) : (
                                            <div className="w-14 h-14 bg-[#1b265c] flex items-center justify-center flex-shrink-0 rounded-full group-hover:bg-[#df2548] transition-colors">
                                                <span className="text-white font-black text-lg">{initials(person.name)}</span>
                                            </div>
                                        )}
                                        <div className="min-w-0">
                                            <h3 className="font-extrabold text-[#1b265c] leading-snug">{person.name}</h3>
                                            <p className="text-[#df2548] text-xs font-semibold tracking-wide uppercase mt-0.5">{person.title}</p>
                                            <p className="text-[#555e8a] text-xs mt-1 leading-snug">{person.institution}</p>
                                            {person.bio && (
                                                <p className="text-[#1b265c]/60 text-xs mt-2 leading-relaxed line-clamp-2">{person.bio}</p>
                                            )}
                                        </div>
                                    </motion.div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* WHAT MAKES ABEC UNIQUE */}
            <section ref={uniqueSection.ref} className="relative overflow-hidden py-24">
                <div className="absolute inset-0">
                    <img
                        src="/images/african-astronaut-aspirational.jpg"
                        alt="African astronaut — aspirational"
                        className="w-full h-full object-cover object-center"
                    />
                    <div
                        className="absolute inset-0"
                        style={{
                            background: 'linear-gradient(105deg, rgba(17,17,19,0.97) 0%, rgba(27,38,92,0.92) 45%, rgba(17,17,19,0.7) 100%)',
                        }}
                    />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid lg:grid-cols-2 gap-16 items-start">
                        <div>
                            <div className="w-12 h-0.5 bg-[#d0d4ec] mb-6" />
                            <span className="text-white/40 text-xs tracking-[0.18em] uppercase font-semibold block mb-4">
                                More Than a Network
                            </span>
                            <h2 className="text-4xl font-black text-white tracking-tight leading-tight mb-6">What Makes ABEC Unique</h2>
                            <p className="text-white/60 leading-relaxed mb-8">
                                ABEC is more than a network — it is a movement. For over a decade, we have built the infrastructure,
                                relationships, and platforms that make African healthcare transformation possible.
                            </p>
                            <Link
                                href="/members"
                                className="inline-flex items-center gap-2 h-11 px-6 bg-[#d0d4ec] text-[#1b265c] text-xs font-bold tracking-[0.15em] uppercase hover:bg-white transition-colors"
                            >
                                Explore the Network <ArrowRight size={14} />
                            </Link>
                        </div>
                        <div className="bg-white p-6 lg:p-8 space-y-3">
                            {unique_points.map((point, i) => (
                                <motion.div
                                    key={point.id}
                                    initial={{ opacity: 0, x: 20 }}
                                    animate={uniqueSection.inView ? { opacity: 1, x: 0 } : {}}
                                    transition={{ duration: 0.4, delay: i * 0.07 }}
                                    className="flex gap-4 items-start"
                                >
                                    <div className="w-5 h-5 bg-[#df2548] flex items-center justify-center flex-shrink-0 mt-0.5">
                                        <ChevronRight size={10} className="text-white" />
                                    </div>
                                    <p className="text-[#1b265c]/80 leading-relaxed">{point.title}</p>
                                </motion.div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section className="relative overflow-hidden">
                <div className="absolute inset-0">
                    <img src="/images/african-graduates-caps-gowns.jpg" alt="" className="w-full h-full object-cover" />
                    <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgba(10,38,71,0.97) 0%, rgba(10,38,71,0.92) 40%, rgba(10,38,71,0.35) 65%, transparent 100%)' }} />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
                    <div className="max-w-lg">
                        <span className="text-[#d0d4ec]/60 text-xs tracking-[0.2em] uppercase font-semibold block mb-3">Join the Consortium</span>
                        <h2 className="text-4xl font-black text-white tracking-tight mb-4">Become Part of ABEC</h2>
                        <p className="text-white/60 leading-relaxed mb-8 text-sm">
                            Connect with biomedical engineers across Africa. Students join free. Institutions from $100/year.
                        </p>
                        <Link
                            href="/join"
                            className="inline-flex items-center gap-2 h-12 px-8 bg-[#d0d4ec] text-[#1b265c] text-xs font-bold tracking-[0.15em] uppercase hover:bg-white transition-colors"
                        >
                            Apply for Membership <ArrowRight size={14} />
                        </Link>
                    </div>
                </div>
            </section>
        </div>
    );
}

About.layout = (page: React.ReactNode) => <PublicLayout>{page}</PublicLayout>;