import { JobOpeningCard } from '@/components/platform/JobOpeningCard';
import Seo from '@/components/Seo';
import { useCurrency } from '@/hooks/useCurrency';
import PlatformLayout from '@/Layouts/PlatformLayout';
import type { JobOpeningSummary } from '@/types/platform';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import {
    ArrowRight,
    Code2,
    Globe,
    Heart,
    Sparkles,
    Users,
    Zap,
} from 'lucide-react';
import { useRef } from 'react';

const ease = [0.16, 1, 0.3, 1] as const;

interface Props {
    openings: JobOpeningSummary[];
    totalOpenings: number;
    showSeeAll: boolean;
}

function FadeUp({
    children,
    delay = 0,
    className,
}: {
    children: React.ReactNode;
    delay?: number;
    className?: string;
}) {
    const ref = useRef<HTMLDivElement>(null);
    const inView = useInView(ref, { once: true, margin: '-60px' });
    return (
        <motion.div
            ref={ref}
            initial={{ opacity: 0, y: 28 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.65, delay, ease }}
            className={className}
        >
            {children}
        </motion.div>
    );
}

const buildPerks = (format: (amountBase: number) => string) => [
    {
        icon: Globe,
        title: 'Remote-first',
        desc: 'Work from anywhere in East Africa. We have hub offices in Nairobi, Kampala, and Dar es Salaam.',
    },
    {
        icon: Zap,
        title: 'Meaningful impact',
        desc: 'Your code reaches 280,000+ borrowers across four countries. Every feature ships to real institutions.',
    },
    {
        icon: Heart,
        title: 'Generous benefits',
        desc: 'Competitive salary benchmarked to top East African tech, medical cover, and 25 days annual leave.',
    },
    {
        icon: Sparkles,
        title: 'Learning budget',
        desc: `${format(770)} annual budget for conferences, courses, books, and certifications. Yours to use freely.`,
    },
    {
        icon: Users,
        title: 'Small, senior team',
        desc: 'No layers of management. Direct access to founders. Your ideas ship fast.',
    },
    {
        icon: Code2,
        title: 'Modern stack',
        desc: 'Laravel 13, React 18, TypeScript, Tailwind v4, Pest tests. No legacy tech debt.',
    },
];

export default function Careers({
    openings,
    totalOpenings,
    showSeeAll,
}: Props) {
    const { format } = useCurrency();
    const perks = buildPerks(format);

    return (
        <PlatformLayout>
            <Seo
                title="Careers"
                description="Join the team building the MFI operating system for East Africa. Explore open roles at Upepo Finance."
            />

            {/* Hero */}
            <section className="relative overflow-hidden pt-32 pb-20">
                <div className="pointer-events-none absolute inset-0 overflow-hidden">
                    <div
                        className="pf-blob pf-blob-1 absolute -top-24 right-1/4 h-[450px] w-[450px] opacity-20"
                        style={{
                            background:
                                'radial-gradient(circle, hsl(var(--primary) / 0.45), transparent 70%)',
                        }}
                    />
                </div>
                <div className="pf-container relative z-10 mx-auto max-w-3xl text-center">
                    <FadeUp delay={0.1}>
                        <h1 className="pf-display text-foreground mb-6 text-4xl font-bold md:text-5xl lg:text-6xl">
                            Build the future of{' '}
                            <span className="pf-gradient-text">
                                African finance
                            </span>
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <p className="text-muted-foreground mb-10 text-lg leading-relaxed">
                            Join a distributed team across East Africa building
                            financial infrastructure that matters. We're small,
                            ambitious, and moving fast.
                        </p>
                    </FadeUp>
                    <FadeUp delay={0.3}>
                        <div className="flex flex-wrap justify-center gap-4">
                            <a
                                href="#open-roles"
                                className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                See open roles{' '}
                                <ArrowRight className="h-4 w-4" />
                            </a>
                            <Link
                                href="/about"
                                className="pf-btn-ghost inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                Meet the team
                            </Link>
                        </div>
                    </FadeUp>
                </div>
            </section>

            {/* Perks */}
            <section className="pf-section pf-section-tint">
                <div className="pf-container">
                    <FadeUp className="mb-14 text-center">
                        <h2 className="pf-display text-foreground mb-4 text-3xl font-bold">
                            Work that ships. Work that matters.
                        </h2>
                    </FadeUp>
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                        {perks.map((perk, i) => (
                            <FadeUp key={perk.title} delay={i * 0.08}>
                                <div className="pf-card h-full p-6">
                                    <div className="pf-icon-box mb-4 h-10 w-10">
                                        <perk.icon className="h-5 w-5" />
                                    </div>
                                    <h3 className="text-foreground mb-2 font-semibold">
                                        {perk.title}
                                    </h3>
                                    <p className="text-muted-foreground text-sm leading-relaxed">
                                        {perk.desc}
                                    </p>
                                </div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Open roles */}
            <section id="open-roles" className="pf-section">
                <div className="pf-container">
                    <FadeUp className="mb-12 text-center">
                        <h2 className="pf-display text-foreground mb-4 text-3xl font-bold">
                            {totalOpenings > 0
                                ? `${totalOpenings} open ${totalOpenings === 1 ? 'role' : 'roles'}`
                                : 'No open roles right now'}
                        </h2>
                        <p className="text-muted-foreground mx-auto max-w-xl text-sm">
                            {totalOpenings > 0
                                ? 'All roles are open to candidates across East Africa. Most allow fully remote work.'
                                : "We're not actively hiring at the moment, but we're always glad to hear from great people."}
                        </p>
                    </FadeUp>

                    {openings.length > 0 && (
                        <div className="mx-auto grid max-w-5xl grid-cols-1 gap-5 md:grid-cols-2">
                            {openings.map((role, i) => (
                                <FadeUp key={role.id} delay={i * 0.06}>
                                    <JobOpeningCard role={role} />
                                </FadeUp>
                            ))}
                        </div>
                    )}

                    {showSeeAll && (
                        <FadeUp className="mt-10 text-center" delay={0.1}>
                            <Link
                                href="/careers/all"
                                className="pf-btn-ghost inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                See all {totalOpenings} open roles
                                <ArrowRight className="h-4 w-4" />
                            </Link>
                        </FadeUp>
                    )}
                </div>
            </section>

            {/* No perfect fit CTA */}
            <section className="pf-section pf-section-dark">
                <div className="pf-container text-center">
                    <FadeUp>
                        <h2 className="pf-display mb-4 text-3xl font-bold">
                            Don't see a perfect fit?
                        </h2>
                        <p className="mx-auto mb-10 max-w-sm text-sm opacity-80">
                            We hire for talent and mission alignment. Send us
                            your CV and tell us how you'd contribute.
                        </p>
                        <a
                            href="mailto:careers@upepofinance.com"
                            className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                        >
                            Get in touch <ArrowRight className="h-4 w-4" />
                        </a>
                    </FadeUp>
                </div>
            </section>
        </PlatformLayout>
    );
}