import { Link } from '@inertiajs/react';
import { SeoHead } from '@/components/seo-head';
import { motion } from 'framer-motion';
import { ArrowLeft, ArrowRight, ChevronDown } from 'lucide-react';
import PublicLayout from '@/layouts/public-layout';

const structure = [
    { level: 'General Assembly', desc: 'Highest governing body — all member institutions', bg: 'bg-[#1b265c] text-white' },
    { level: 'Board of Directors', desc: 'Strategic oversight and fiduciary responsibility', bg: 'bg-[#df2548] text-white' },
    { level: 'Secretariat & Divisional Directors', desc: 'Operational leadership and programme delivery', bg: 'bg-[#df2548] text-white' },
    { level: 'Regional & Country Coordination', desc: 'Continental execution across member countries', bg: 'bg-white text-[#1b265c] border border-[#d0d4ec]' },
    { level: 'Advisory Board', desc: 'Including UNECA representation and technical advisors', bg: 'bg-white text-[#1b265c] border border-[#d0d4ec]' },
];

interface Principle { id: number; title: string; body: string | null }
interface Props { principles: Principle[] }

export default function Governance({ principles }: Props) {
    return (
        <div>
            <SeoHead
                title="Governance — ABEC Africa"
                description="Explore how ABEC Africa is governed — from the General Assembly and Board of Directors through to the Secretariat, Regional Coordinators, and Advisory Board."
                image="/images/professional-reading-notebook.jpg"
                keywords="ABEC Africa governance, biomedical engineering consortium governance, ABEC board of directors, ABEC general assembly"
                url="https://abecafrica.org/about/governance"
            />
            {/* HERO */}
            <section className="relative min-h-[50vh] flex items-end overflow-hidden">
                <div className="absolute inset-0">
                    <img
                        src="/images/african-university-convocation.jpg"
                        alt="ABEC governance"
                        className="w-full h-full object-cover object-top"
                    />
                    <div
                        className="absolute inset-0"
                        style={{
                            background:
                                'linear-gradient(to top, rgba(17,17,19,0.97) 0%, rgba(17,17,19,0.75) 50%, rgba(27,38,92,0.4) 100%)',
                        }}
                    />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 pt-40 w-full">
                    <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
                        <Link
                            href="/about"
                            className="inline-flex items-center gap-2 text-white/50 hover:text-white text-xs tracking-[0.15em] uppercase font-semibold mb-6 transition-colors"
                        >
                            <ArrowLeft size={12} /> About ABEC
                        </Link>
                        <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">Structure & Accountability</span>
                        </div>
                        <h1 className="text-5xl lg:text-7xl font-black text-white tracking-tight leading-tight">Governance</h1>
                    </motion.div>
                </div>
            </section>

            {/* ORG CHART */}
            <section className="py-24 bg-white">
                <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="section-rule" />
                    <span className="label-caps block mb-4">Organisational Structure</span>
                    <h2 className="text-3xl font-black text-[#1b265c] tracking-tight mb-12">How ABEC Is Governed</h2>

                    <div className="flex flex-col items-center gap-2">
                        {structure.map((item, i) => (
                            <div key={item.level} className="flex flex-col items-center gap-2 w-full">
                                <motion.div
                                    initial={{ opacity: 0, y: 16 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ duration: 0.4, delay: i * 0.1 }}
                                    className={`px-8 py-4 ${item.bg} text-center w-full max-w-md`}
                                >
                                    <div className="font-bold text-base">{item.level}</div>
                                    <div className="text-xs mt-1 opacity-60 leading-snug">{item.desc}</div>
                                </motion.div>
                                {i < structure.length - 1 && <ChevronDown size={16} className="text-[#d0d4ec]" />}
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* PRINCIPLES */}
            <section className="py-24 bg-[#f0f1f8]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="section-rule" />
                    <span className="label-caps block mb-4">Core Principles</span>
                    <h2 className="text-3xl font-black text-[#1b265c] tracking-tight mb-12">Governance by Design</h2>

                    <div className="grid md:grid-cols-2 gap-px bg-[#d0d4ec]">
                        {principles.map((p, i) => (
                            <motion.div
                                key={p.title}
                                initial={{ opacity: 0, y: 16 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.4, delay: i * 0.08 }}
                                className="bg-white p-10"
                            >
                                <div className="section-rule" />
                                <h3 className="font-black text-[#1b265c] text-xl mb-3">{p.title}</h3>
                                <p className="text-[#555e8a] leading-relaxed">{p.body}</p>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section className="relative overflow-hidden">
                <div className="absolute inset-0">
                    <img src="/images/grand-university-library-aerial.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">Membership</span>
                        <h2 className="text-4xl font-black text-white tracking-tight mb-4">Join the Consortium</h2>
                        <p className="text-white/60 leading-relaxed mb-8 text-sm">
                            Be part of a governed, mission-driven body advancing biomedical engineering across Africa. Open to individuals and institutions.
                        </p>
                        <div className="flex flex-wrap gap-4">
                            <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>
                            <Link
                                href="/about"
                                className="inline-flex items-center gap-2 h-12 px-6 border border-white/30 text-white text-xs font-bold tracking-[0.15em] uppercase hover:border-white transition-colors"
                            >
                                <ArrowLeft size={14} /> Back to About
                            </Link>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}

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