import { Head, Link } from '@inertiajs/react';
import PublicLayout from '@/Layouts/PublicLayout';
import Button from '@/Components/UI/Button';
import Card from '@/Components/UI/Card';

interface FeaturedInstitute {
    id: number;
    name: string;
    slug: string;
    description: string | null;
    programmes_count: number;
    flagship_programme: { title: string; slug: string } | null;
}

export default function Index({
    featuredInstitutes,
    stats,
}: {
    featuredInstitutes: FeaturedInstitute[];
    stats: { institutes: number; programmes: number; courses: number };
}) {
    return (
        <PublicLayout>
            <Head title="Home" />

            <section className="mx-auto max-w-7xl px-6 pb-section-gap pt-20 lg:px-margin-page">
                <div className="grid items-center gap-16 md:grid-cols-2">
                    <div>
                        <p className="text-label-caps text-accent-gold">Institutional Excellence in Global Leadership</p>
                        <h1 className="text-institutional-header mt-4 text-on-surface">
                            Forge Your Path as a Global Strategic Leader.
                        </h1>
                        <p className="text-body-lg mt-6 max-w-lg text-on-surface-variant">
                            Jolax Global Certification Programmes provide an elite educational environment for
                            executives, combining institutional authority with forward-thinking academic rigor.
                        </p>
                        <div className="mt-8 flex flex-wrap gap-4">
                            <Button href={route('institutes.index')} variant="primary">
                                Explore Institutes →
                            </Button>
                            <Button href={route('institutes.index')} variant="secondary">
                                View Global Ranking
                            </Button>
                        </div>

                        <div className="mt-12 flex gap-10">
                            <div>
                                <p className="text-3xl font-semibold text-on-surface">{stats.institutes}</p>
                                <p className="text-label-caps text-on-surface-variant">Institutes</p>
                            </div>
                            <div>
                                <p className="text-3xl font-semibold text-on-surface">{stats.programmes}</p>
                                <p className="text-label-caps text-on-surface-variant">Programmes</p>
                            </div>
                            <div>
                                <p className="text-3xl font-semibold text-on-surface">{stats.courses}</p>
                                <p className="text-label-caps text-on-surface-variant">Courses</p>
                            </div>
                        </div>
                    </div>

                    <div className="relative">
                        <div className="aspect-[4/5] w-full rounded-lg bg-jgcp-navy shadow-lift" />
                        <div className="absolute bottom-6 left-6 right-6 rounded-md bg-white/95 px-4 py-3 shadow-lift">
                            <p className="text-label-caps text-accent-gold">Certified Global Leader</p>
                        </div>
                    </div>
                </div>
            </section>

            <section className="mx-auto max-w-7xl px-6 pb-section-gap lg:px-margin-page">
                <div className="flex items-end justify-between">
                    <div>
                        <h2 className="text-institute-title text-on-surface">Institutes of JGCP</h2>
                        <p className="text-body-md mt-2 max-w-xl text-on-surface-variant">
                            Each Institute is a specialised hub of academic excellence, dedicated to a specific
                            domain of leadership and technical mastery.
                        </p>
                    </div>
                    <Link href={route('institutes.index')} className="text-sm font-medium text-jgcp-navy hover:underline">
                        View All Institutes →
                    </Link>
                </div>

                <div className="mt-10 grid gap-6 md:grid-cols-2">
                    {featuredInstitutes.map((institute, index) => (
                        <Card
                            key={institute.id}
                            hover
                            className={index === 1 ? '!bg-jgcp-navy !border-jgcp-navy text-white' : ''}
                        >
                            <p className={`text-label-caps ${index === 1 ? 'text-accent-gold' : 'text-on-surface-variant'}`}>
                                {institute.programmes_count} Programme{institute.programmes_count === 1 ? '' : 's'}
                            </p>
                            <h3 className={`text-course-title mt-3 ${index === 1 ? 'text-white' : 'text-on-surface'}`}>
                                {institute.name}
                            </h3>
                            <p className={`text-body-md mt-2 ${index === 1 ? 'text-white/70' : 'text-on-surface-variant'}`}>
                                {institute.description}
                            </p>
                            {institute.flagship_programme && (
                                <Link
                                    href={route('programmes.show', institute.flagship_programme.slug)}
                                    className={`mt-6 inline-block text-sm font-medium ${
                                        index === 1 ? 'text-accent-gold' : 'text-jgcp-navy'
                                    } hover:underline`}
                                >
                                    Enter Institute Portal
                                </Link>
                            )}
                        </Card>
                    ))}
                </div>
            </section>

            <section className="bg-jgcp-navy py-section-gap text-white">
                <div className="mx-auto max-w-7xl px-6 lg:px-margin-page">
                    <div className="grid items-center gap-16 md:grid-cols-2">
                        <div>
                            <p className="text-label-caps text-accent-gold">The JGCP Standard</p>
                            <h2 className="text-institute-title mt-4 text-white">
                                A Rigorous, Competency-Based Certification Architecture
                            </h2>
                            <p className="text-body-md mt-4 text-white/70">
                                Unlike traditional academic routes, JGCP focuses on demonstrated executive mastery.
                                Every certification is built around the Leadership Portfolio — a living record of
                                professional impact.
                            </p>

                            <div className="mt-8 space-y-6">
                                <div>
                                    <p className="font-semibold text-white">Institutional Validation</p>
                                    <p className="text-sm text-white/60">
                                        Every certification is verified by the Jolax Global Leadership Centre, ensuring
                                        global portability.
                                    </p>
                                </div>
                                <div>
                                    <p className="font-semibold text-white">Cross-Institute Integration</p>
                                    <p className="text-sm text-white/60">
                                        Programmes bridge disciplines, allowing leaders to synthesise economic,
                                        digital, and governance strategies.
                                    </p>
                                </div>
                                <div>
                                    <p className="font-semibold text-white">Portfolio-Led Assessment</p>
                                    <p className="text-sm text-white/60">
                                        Final certification depends on a portfolio of applied work, reviewed by
                                        institutional peers.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div className="rounded-lg border border-white/10 bg-white/5 p-10">
                            <p className="text-5xl font-bold text-accent-gold">98%</p>
                            <p className="mt-2 text-white/70">
                                Executive satisfaction, based on graduate leadership-impact surveys across our Alumni
                                Network.
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <section className="mx-auto max-w-7xl px-6 py-section-gap lg:px-margin-page">
                <h2 className="text-institute-title text-center text-on-surface">Voices of Global Leadership</h2>
                <div className="mt-10 grid gap-6 md:grid-cols-3">
                    {[
                        {
                            quote: 'The JGCP model reflects the complexity of modern board-level governance. It’s academic, yet intensely practical.',
                            name: 'Dr. Elena Kadrova',
                            role: 'Chief Operations Officer',
                        },
                        {
                            quote: 'The certification architecture redefined how our leadership team approaches organisational strategy.',
                            name: 'Marcus Thorne',
                            role: 'VP of Transformation',
                        },
                        {
                            quote: 'The Leadership Portfolio requirement pushed me to document my impact in a way no other programme has.',
                            name: 'Sarah Jenkins',
                            role: 'Managing Director',
                        },
                    ].map((testimonial) => (
                        <Card key={testimonial.name}>
                            <p className="text-2xl text-accent-gold">&ldquo;</p>
                            <p className="text-body-md text-on-surface-variant">{testimonial.quote}</p>
                            <p className="mt-6 text-sm font-semibold text-on-surface">{testimonial.name}</p>
                            <p className="text-xs text-on-surface-variant">{testimonial.role}</p>
                        </Card>
                    ))}
                </div>
            </section>

            <section className="mx-auto max-w-5xl px-6 pb-section-gap lg:px-margin-page">
                <div className="rounded-lg bg-jgcp-navy px-10 py-16 text-center text-white">
                    <h2 className="text-institute-title text-white">Begin Your Executive Transformation</h2>
                    <p className="text-body-md mx-auto mt-4 max-w-xl text-white/70">
                        Applications are now open across all {stats.institutes} Institutes. Join an elite global network
                        of certified leaders.
                    </p>
                    <div className="mt-8 flex flex-wrap justify-center gap-4">
                        <Button href={route('institutes.index')} variant="action">
                            Enrol in a Programme
                        </Button>
                        <Button href={route('institutes.index')} variant="secondary" className="border-white text-white hover:bg-white/10">
                            View Institutes
                        </Button>
                    </div>
                    <p className="text-label-caps mt-8 text-white/40">
                        Institutional Authority · Global Recognition · Professional Mastery
                    </p>
                </div>
            </section>
        </PublicLayout>
    );
}
