import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent } from '@/Components/ui/card';
import WebLayout from '@/Layouts/Web/WebLayout';
import { Head, Link } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';
import {
    ArrowRight,
    BookOpen,
    Briefcase,
    DollarSign,
    Globe,
    HeartHandshake,
    Laptop,
    Lightbulb,
    Monitor,
    Rocket,
    Sparkles,
    Target,
    TrendingUp,
    Users,
} from 'lucide-react';

// ─── glass shorthand ───────────────────────────────────────────────────────────

const G =
    'border border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]';

// ─── animation helper ──────────────────────────────────────────────────────────

function reveal(delay = 0, reduced = false) {
    return {
        initial: reduced ? {} : { opacity: 0, y: 22 },
        whileInView: { opacity: 1, y: 0 },
        viewport: { once: true, amount: 0.1 },
        transition: { duration: 0.55, ease: [0.25, 0.1, 0.25, 1], delay },
    };
}

// ─── page data ────────────────────────────────────────────────────────────────

const VALUES = [
    {
        icon: Target,
        title: 'Ownership',
        desc: 'We operate like owners because we are owners. Every engineer, designer, and operator takes full responsibility for outcomes — not just outputs. No hand-offs. No hiding behind process.',
        badge: 'brand',
    },
    {
        icon: Sparkles,
        title: 'Craft',
        desc: 'We obsess over the quality of what we ship. A receipt layout, a loading state, an error message — every detail matters to the merchant who depends on it every single day.',
        badge: 'lime',
    },
    {
        icon: HeartHandshake,
        title: 'Impact',
        desc: 'We measure ourselves by the real difference we make to real businesses. When a merchant in Kisumu processes a compliant receipt in three seconds instead of filing it three months late, that is impact.',
        badge: 'brand',
    },
    {
        icon: Rocket,
        title: 'Boldness',
        desc: 'Africa\'s commerce problems are not small. Small thinking will not solve them. We move fast, take considered risks, and back big ideas with rigorous execution.',
        badge: 'lime',
    },
];

const BENEFITS = [
    {
        icon: Globe,
        title: 'Remote-first',
        desc: 'Work from anywhere across East Africa — or beyond. Async culture with regular team gatherings.',
    },
    {
        icon: DollarSign,
        title: 'Competitive pay',
        desc: 'Salaries benchmarked in TZS and USD, paid reliably, reviewed annually. No surprises.',
    },
    {
        icon: HeartHandshake,
        title: 'Health cover',
        desc: 'Comprehensive medical cover for you and your dependants, across our operating markets.',
    },
    {
        icon: Monitor,
        title: 'Equipment budget',
        desc: 'Annual budget to kit out your workspace with the hardware and peripherals you need to do your best work.',
    },
    {
        icon: BookOpen,
        title: 'Learning budget',
        desc: 'Dedicated budget for courses, books, conferences, and certifications. We invest in your growth.',
    },
    {
        icon: TrendingUp,
        title: 'Equity & ownership',
        desc: 'Early team members share in the upside. As Upepo grows, so does your stake in what you helped build.',
    },
];

// ─── page ─────────────────────────────────────────────────────────────────────

export default function Careers() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="Careers — Upepo POS" />

            {/* ── Hero ─────────────────────────────────────────────────────── */}
            <section className="relative overflow-hidden bg-background pb-24 pt-32">
                <div
                    aria-hidden
                    className="pointer-events-none absolute inset-0 flex items-start justify-end"
                >
                    <div className="mr-[-120px] mt-[-80px] h-[480px] w-[480px] rounded-full bg-accent/10 blur-[100px]" />
                </div>
                <div
                    aria-hidden
                    className="pointer-events-none absolute bottom-0 left-0"
                >
                    <div className="ml-[-80px] h-[320px] w-[320px] rounded-full bg-primary/8 blur-[90px]" />
                </div>

                <div className="relative mx-auto max-w-4xl px-6 text-center">
                    <motion.div {...rv(0)}>
                        <Badge variant="lime" className="mb-6">
                            We&apos;re hiring
                        </Badge>
                    </motion.div>
                    <motion.h1
                        {...rv(0.08)}
                        className="uf-display text-5xl font-bold leading-[1.08] tracking-tight text-foreground sm:text-6xl lg:text-7xl"
                    >
                        Build the future of{' '}
                        <span className="text-primary">African commerce.</span>
                    </motion.h1>
                    <motion.p
                        {...rv(0.16)}
                        className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground"
                    >
                        Upepo POS is built by a small, focused team with an outsized mission.
                        We are looking for people who care deeply about craft, ownership, and
                        the impact software can have on the lives of real entrepreneurs.
                    </motion.p>
                </div>
            </section>

            {/* ── Culture statement ────────────────────────────────────────── */}
            <section className="bg-primary/5 py-20">
                <div className="mx-auto max-w-3xl px-6">
                    <motion.div {...rv(0)} className={`rounded-2xl p-10 ${G}`}>
                        <div className="flex items-center gap-3 text-primary mb-4">
                            <Users size={22} strokeWidth={1.75} />
                            <span className="text-sm font-semibold tracking-widest uppercase text-muted-foreground">
                                How we work
                            </span>
                        </div>
                        <p className="text-xl leading-relaxed text-foreground">
                            We are a lean, high-trust team distributed across East Africa. We
                            do not measure contribution by hours in a seat. We measure it by
                            clarity of thinking, quality of execution, and care for the
                            merchants who depend on what we ship. If you thrive on autonomy,
                            take feedback well, and want your work to matter — you will fit in
                            here.
                        </p>
                    </motion.div>
                </div>
            </section>

            {/* ── Values ───────────────────────────────────────────────────── */}
            <section className="bg-background py-24">
                <div className="mx-auto max-w-6xl px-6">
                    <motion.div {...rv(0)} className="mb-14 text-center">
                        <Badge variant="brand" className="mb-4">
                            Our values
                        </Badge>
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            What we stand for
                        </h2>
                        <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
                            Four principles that guide every decision — from product to people.
                        </p>
                    </motion.div>

                    <div className="grid gap-6 sm:grid-cols-2">
                        {VALUES.map((v, i) => {
                            const Icon = v.icon;
                            return (
                                <motion.div key={v.title} {...rv(0.07 * i)}>
                                    <Card className={`h-full ${G} border-0`}>
                                        <CardContent className="p-8">
                                            <div className="mb-5 flex items-center gap-4">
                                                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                                    <Icon size={20} strokeWidth={1.75} />
                                                </div>
                                                <Badge variant={v.badge}>{v.title}</Badge>
                                            </div>
                                            <p className="text-muted-foreground leading-relaxed">
                                                {v.desc}
                                            </p>
                                        </CardContent>
                                    </Card>
                                </motion.div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* ── Open roles ───────────────────────────────────────────────── */}
            <section className="bg-primary/5 py-24">
                <div className="mx-auto max-w-3xl px-6">
                    <motion.div {...rv(0)} className="mb-12 text-center">
                        <Badge variant="brand" className="mb-4">
                            Open roles
                        </Badge>
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            Current openings
                        </h2>
                    </motion.div>

                    {/* Empty state */}
                    <motion.div {...rv(0.1)}>
                        <Card className={`${G} border-0`}>
                            <CardContent className="flex flex-col items-center py-20 text-center">
                                <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/30 text-muted-foreground">
                                    <Briefcase size={28} strokeWidth={1.5} />
                                </div>
                                <h3 className="uf-display text-xl font-semibold text-foreground">
                                    No open roles right now
                                </h3>
                                <p className="mt-3 max-w-sm text-muted-foreground">
                                    We hire slowly and intentionally. There are no open positions at
                                    the moment, but we are always interested in exceptional people.
                                </p>
                                <div className="mt-8">
                                    <Button asChild variant="outline" className="gap-2">
                                        <Link href="/contact">
                                            Send us your CV anyway{' '}
                                            <ArrowRight size={15} />
                                        </Link>
                                    </Button>
                                </div>
                            </CardContent>
                        </Card>
                    </motion.div>
                </div>
            </section>

            {/* ── Benefits ─────────────────────────────────────────────────── */}
            <section className="bg-background py-24">
                <div className="mx-auto max-w-6xl px-6">
                    <motion.div {...rv(0)} className="mb-14 text-center">
                        <Badge variant="lime" className="mb-4">
                            Perks &amp; benefits
                        </Badge>
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            What you get
                        </h2>
                        <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
                            We take care of the people who take care of Upepo.
                        </p>
                    </motion.div>

                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        {BENEFITS.map((b, i) => {
                            const Icon = b.icon;
                            return (
                                <motion.div key={b.title} {...rv(0.06 * i)}>
                                    <Card className={`h-full ${G} border-0`}>
                                        <CardContent className="p-7">
                                            <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-accent/15 text-foreground">
                                                <Icon size={18} strokeWidth={1.75} />
                                            </div>
                                            <h3 className="mb-2 font-semibold text-foreground">
                                                {b.title}
                                            </h3>
                                            <p className="text-sm leading-relaxed text-muted-foreground">
                                                {b.desc}
                                            </p>
                                        </CardContent>
                                    </Card>
                                </motion.div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* ── CTA ──────────────────────────────────────────────────────── */}
            <section className="bg-primary/5 py-24">
                <div className="mx-auto max-w-2xl px-6 text-center">
                    <motion.div {...rv(0)}>
                        <Lightbulb
                            className="mx-auto mb-6 text-primary"
                            size={40}
                            strokeWidth={1.5}
                        />
                    </motion.div>
                    <motion.h2
                        {...rv(0.08)}
                        className="uf-display text-4xl font-bold text-foreground sm:text-5xl"
                    >
                        Think you belong here?
                    </motion.h2>
                    <motion.p
                        {...rv(0.16)}
                        className="mt-4 text-lg text-muted-foreground"
                    >
                        Even if there is no open role that fits, reach out. Tell us who you
                        are and what you want to build.
                    </motion.p>
                    <motion.div
                        {...rv(0.24)}
                        className="mt-10 flex flex-wrap items-center justify-center gap-4"
                    >
                        <Button asChild size="lg" className="gap-2">
                            <Link href="/contact">
                                Get in touch <ArrowRight size={16} />
                            </Link>
                        </Button>
                    </motion.div>
                </div>
            </section>
        </WebLayout>
    );
}