import { Badge } from '@/Components/ui/badge';
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 {
    Globe,
    Heart,
    Lightbulb,
    MapPin,
    Shield,
    Target,
    Users,
    Zap,
} from 'lucide-react';

const G =
    'border border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]';

const VALUES = [
    {
        icon: Heart,
        title: 'Built for Africa, by Africa',
        desc: 'Every feature is designed around the real constraints of African business — patchy internet, mobile money, multi-currency, and the need to operate with lean teams.',
    },
    {
        icon: Shield,
        title: 'Reliability above all',
        desc: 'Offline-first is not a feature. It is a promise. Your business should never stop because of a connectivity issue. Upepo queues and syncs automatically.',
    },
    {
        icon: Lightbulb,
        title: 'Simple, not simplistic',
        desc: 'A cashier should be able to use Upepo within minutes. But the platform runs deep — full compliance, multi-location, and advanced analytics when you need them.',
    },
    {
        icon: Globe,
        title: 'One platform, many markets',
        desc: 'Kenya, Tanzania, Uganda, Rwanda — each with unique tax systems, payment networks, and regulations. Upepo handles all of them natively, out of the box.',
    },
];

const MILESTONES = [
    {
        year: '2023',
        title: 'The idea',
        desc: 'Ufanisia Africa is founded after the team observes that most POS software fails African businesses — either too basic, too expensive, or not built for offline-first environments.',
    },
    {
        year: '2024',
        title: 'Research & design',
        desc: 'Twelve months of field research across Kenya, Tanzania, Uganda, and Rwanda. Interviews with retailers, pharmacy owners, wholesalers, and hospitality operators.',
    },
    {
        year: '2025',
        title: 'Platform built',
        desc: 'The core platform is engineered from the ground up — multi-tenant architecture, offline sync engine, mobile money integrations, and full tax compliance modules.',
    },
    {
        year: '2026',
        title: 'Phase 1 launch',
        desc: 'Upepo POS launches with POS, inventory, purchasing, mobile payments, and tax compliance for KE, TZ, UG, and RW. Phase 2 (e-commerce, warehouse) follows shortly.',
    },
];

const MARKETS = [
    { code: 'KE', name: 'Kenya', note: 'M-Pesa · eTIMS · KRA' },
    { code: 'TZ', name: 'Tanzania', note: 'Airtel · EFD · TRA' },
    { code: 'UG', name: 'Uganda', note: 'Mobile Money · EFRIS · URA' },
    { code: 'RW', name: 'Rwanda', note: 'Momo · EBM · RRA' },
];

function reveal(delay = 0, reduced = false) {
    return {
        initial: reduced ? {} : { opacity: 0, y: 22 },
        whileInView: { opacity: 1, y: 0 },
        viewport: { once: true, amount: 0.12 },
        transition: { duration: 0.55, ease: [0.25, 0.1, 0.25, 1], delay },
    };
}

export default function About() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="About Us — Upepo POS" />

            {/* ── HERO ─────────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pt-36 pb-16 sm:px-6 lg:pt-48">
                <motion.div {...rv(0)} className="max-w-3xl">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Our story
                    </Badge>
                    <h1 className="uf-display mt-6 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
                        We exist because African{' '}
                        <span className="text-primary">
                            businesses deserve better.
                        </span>
                    </h1>
                    <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
                        Ufanisia Africa was founded by a team that lived the
                        frustration firsthand — watching great businesses
                        struggle with tools that were never built for them.
                        Upepo POS is our answer.
                    </p>
                </motion.div>

                {/* market badges */}
                <motion.div
                    {...rv(0.12)}
                    className="mt-12 grid gap-3 sm:grid-cols-2 lg:grid-cols-4"
                >
                    {MARKETS.map(({ code, name, note }) => (
                        <div
                            key={code}
                            className={`rounded-2xl p-5 ${G}`}
                        >
                            <p className="uf-display text-3xl font-black text-primary">
                                {code}
                            </p>
                            <p className="mt-1 font-semibold text-foreground">
                                {name}
                            </p>
                            <p className="mt-1 text-xs text-muted-foreground">
                                {note}
                            </p>
                        </div>
                    ))}
                </motion.div>
            </section>

            {/* ── MISSION ──────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6">
                <div className="grid items-center gap-12 lg:grid-cols-2">
                    <motion.div {...rv()}>
                        <Badge
                            variant="lime"
                            className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                        >
                            Mission
                        </Badge>
                        <h2 className="uf-display mt-5 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                            Powering the businesses that power Africa.
                        </h2>
                        <p className="mt-5 leading-relaxed text-muted-foreground">
                            Africa's retail and service economy is vibrant,
                            resilient, and growing — yet the software tools
                            available are often imported, overpriced, or simply
                            not designed for the realities on the ground.
                        </p>
                        <p className="mt-4 leading-relaxed text-muted-foreground">
                            Our mission is to give every African business owner
                            — from the single-location pharmacy in Nairobi to
                            the five-branch wholesale chain in Dar es Salaam —
                            the technology infrastructure they deserve, at a
                            price they can afford.
                        </p>
                    </motion.div>

                    <motion.div
                        {...rv(0.1)}
                        className={`rounded-3xl p-8 ${G}`}
                    >
                        <div className="space-y-6">
                            {[
                                {
                                    icon: Target,
                                    label: 'Vision',
                                    text: 'The most-used business operations platform across Sub-Saharan Africa by 2030.',
                                },
                                {
                                    icon: Users,
                                    label: 'Who we serve',
                                    text: 'Retail, pharmacies, wholesalers, agro-dealers, hospitality, hardware — any business that buys and sells.',
                                },
                                {
                                    icon: Zap,
                                    label: 'Our edge',
                                    text: 'Offline-first, mobile-money-native, and compliance-ready — not bolted on, built in from day one.',
                                },
                                {
                                    icon: MapPin,
                                    label: 'Where we operate',
                                    text: 'Kenya, Tanzania, Uganda, Rwanda at launch — with East Africa and West Africa expansion on the roadmap.',
                                },
                            ].map(({ icon: Icon, label, text }) => (
                                <div key={label} className="flex gap-4">
                                    <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/12">
                                        <Icon
                                            size={16}
                                            className="text-primary"
                                        />
                                    </div>
                                    <div>
                                        <p className="text-sm font-bold text-foreground">
                                            {label}
                                        </p>
                                        <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                                            {text}
                                        </p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </motion.div>
                </div>
            </section>

            {/* ── VALUES ───────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6">
                <motion.div {...rv()} className="mb-12 text-center">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        What we stand for
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                        Our values
                    </h2>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2">
                    {VALUES.map(({ icon: Icon, title, desc }, i) => (
                        <motion.div key={title} {...rv(i * 0.07)}>
                            <Card className="h-full border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]">
                                <CardContent className="p-7">
                                    <div className="mb-4 inline-flex rounded-xl bg-primary/12 p-2.5">
                                        <Icon
                                            size={20}
                                            className="text-primary"
                                        />
                                    </div>
                                    <h3 className="uf-display text-lg font-bold text-foreground">
                                        {title}
                                    </h3>
                                    <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                                        {desc}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── TIMELINE ─────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-20 sm:px-6">
                <motion.div {...rv()} className="mb-12 text-center">
                    <Badge
                        variant="lime"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Our journey
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                        From idea to platform.
                    </h2>
                </motion.div>

                <div className="relative">
                    {/* vertical line */}
                    <div className="absolute left-8 top-0 hidden h-full w-px bg-gradient-to-b from-primary/40 via-primary/20 to-transparent md:block" />

                    <div className="space-y-6">
                        {MILESTONES.map(({ year, title, desc }, i) => (
                            <motion.div
                                key={year}
                                {...rv(i * 0.08)}
                                className={`relative rounded-2xl p-6 md:ml-20 ${G}`}
                            >
                                {/* year dot */}
                                <div className="absolute -left-[4.25rem] top-6 hidden h-8 w-8 items-center justify-center rounded-full bg-primary shadow-lg shadow-primary/30 md:flex">
                                    <span className="text-[9px] font-black text-white">
                                        {year.slice(2)}
                                    </span>
                                </div>
                                <div className="flex items-start gap-4">
                                    <span className="uf-display shrink-0 text-2xl font-black text-primary md:hidden">
                                        {year}
                                    </span>
                                    <div>
                                        <p className="font-bold text-foreground">
                                            {year} — {title}
                                        </p>
                                        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                                            {desc}
                                        </p>
                                    </div>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── CTA ──────────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pb-24 sm:px-6">
                <motion.div
                    {...rv()}
                    className="relative overflow-hidden rounded-3xl bg-panel p-10 text-center sm:p-16"
                >
                    <div className="pointer-events-none absolute -top-24 -left-24 h-72 w-72 rounded-full bg-primary/20 blur-3xl" />
                    <div className="pointer-events-none absolute -right-24 -bottom-24 h-72 w-72 rounded-full bg-accent/14 blur-3xl" />
                    <div className="relative">
                        <h2 className="uf-display mx-auto max-w-xl text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                            Join us in building the future of African commerce.
                        </h2>
                        <p className="mx-auto mt-4 max-w-lg text-white/50">
                            Whether you are a business owner, a developer, or an
                            investor — we would love to hear from you.
                        </p>
                        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                            <Link
                                href="/contact"
                                className="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-primary/30 transition hover:brightness-95"
                            >
                                Get in touch
                            </Link>
                            <Link
                                href="/pricing"
                                className="inline-flex items-center gap-2 rounded-xl border border-white/14 bg-white/[0.07] px-6 py-3 text-sm font-semibold text-white/80 transition hover:bg-white/[0.12] hover:text-white"
                            >
                                View pricing
                            </Link>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}
