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,
    CheckCircle2,
    Coffee,
    Globe,
    Package,
    Quote,
    ShoppingBasket,
    Star,
    Stethoscope,
    TrendingUp,
    Truck,
    Wifi,
    Zap,
} 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 VERTICALS = [
    {
        icon: ShoppingBasket,
        title: 'Retail & General Trade',
        subtitle: 'Dukas, supermarkets, mini-markets, convenience stores',
        desc: 'From a single-till duuka in Gikomba to a multi-branch retail chain in Westlands — Upepo handles fast-moving inventory, barcode scanning, loyalty, and eTIMS compliance out of the box.',
        highlights: ['Barcode & SKU management', 'Multi-branch stock transfer', 'eTIMS receipt compliance'],
        badge: 'brand',
        color: '#F26522',
    },
    {
        icon: Stethoscope,
        title: 'Pharmacies & Health',
        subtitle: 'Independent pharmacies, clinic dispensaries, health stores',
        desc: 'Prescription tracking, expiry-date management, and controlled-substance handling — built for the unique compliance requirements of pharmacy retail across East Africa.',
        highlights: ['Expiry & batch tracking', 'Controlled item flags', 'NHIF-ready receipts'],
        badge: 'lime',
        color: '#C5DC1C',
    },
    {
        icon: Truck,
        title: 'Wholesale & Distribution',
        subtitle: 'Wholesalers, distributors, agro-dealers, hardware stores',
        desc: 'High-volume, high-SKU operations with multi-unit pricing, bulk order management, credit accounts, and route-based sales rep tracking. Built for the pace of wholesale commerce.',
        highlights: ['Tiered pricing & volume discounts', 'Credit customer accounts', 'Route sales management'],
        badge: 'brand',
        color: '#F26522',
    },
    {
        icon: Coffee,
        title: 'Hospitality & Food & Bev',
        subtitle: 'Restaurants, cafés, fast food, catering, hotels',
        desc: 'Table management, kitchen display integration, modifiers and variants, split billing, and EFD-compliant VAT receipts — everything a food-service business needs to run smoothly.',
        highlights: ['Table & section management', 'Kitchen order routing', 'EFD VAT compliance'],
        badge: 'lime',
        color: '#C5DC1C',
    },
];

const TESTIMONIALS = [
    {
        name: 'Amina K.',
        business: 'Amina General Stores, Nairobi',
        quote: 'Before Upepo, I was losing hours every week trying to file my eTIMS returns manually. Now it just happens. I do not even think about it.',
        tag: 'Retail',
        initials: 'AK',
    },
    {
        name: 'Dr. Samuel O.',
        business: 'Sunrise Pharmacy, Kampala',
        quote: 'The offline mode is the feature that sold me. Our power and internet can be unreliable, but Upepo never misses a beat. Everything syncs perfectly when we are back online.',
        tag: 'Pharmacy',
        initials: 'SO',
    },
    {
        name: 'Grace N.',
        business: 'Nyumbani Wholesale, Dar es Salaam',
        quote: 'Managing sixty salespeople on routes across the city used to require three people in the office. With Upepo, one person handles it. The visibility is just incredible.',
        tag: 'Wholesale',
        initials: 'GN',
    },
];

const STATS = [
    {
        icon: Globe,
        value: '4',
        label: 'Countries',
        sub: 'KE · TZ · UG · RW',
    },
    {
        icon: Package,
        value: '6+',
        label: 'Sectors served',
        sub: 'Retail, pharmacy, wholesale & more',
    },
    {
        icon: TrendingUp,
        value: '1M+',
        label: 'Receipts processed',
        sub: 'Since early access launch',
    },
    {
        icon: Zap,
        value: '99.9%',
        label: 'Sync uptime',
        sub: 'Cloud data reliability',
    },
];

// ─── page ─────────────────────────────────────────────────────────────────────

export default function Customers() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="Customers — 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-center justify-center"
                >
                    <div className="h-[520px] w-[700px] rounded-full bg-accent/8 blur-[140px]" />
                </div>
                <div
                    aria-hidden
                    className="pointer-events-none absolute bottom-0 right-0"
                >
                    <div className="mr-[-60px] h-[300px] w-[300px] rounded-full bg-primary/10 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">
                            Who we serve
                        </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"
                    >
                        Built for real{' '}
                        <span className="text-primary">African businesses.</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 purpose-built for the sectors, the operating environments,
                        and the compliance realities of East African commerce — not adapted from
                        a tool designed elsewhere.
                    </motion.p>
                </div>
            </section>

            {/* ── Industry verticals ───────────────────────────────────────── */}
            <section className="bg-primary/5 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">
                            Industry verticals
                        </Badge>
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            One platform. Every sector.
                        </h2>
                        <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
                            Upepo adapts to your business category — not the other way around.
                        </p>
                    </motion.div>

                    <div className="grid gap-8 sm:grid-cols-2">
                        {VERTICALS.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-start gap-4">
                                                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10">
                                                    <Icon
                                                        size={22}
                                                        strokeWidth={1.75}
                                                        style={{ color: v.color }}
                                                    />
                                                </div>
                                                <div>
                                                    <h3 className="font-bold text-foreground">
                                                        {v.title}
                                                    </h3>
                                                    <p className="text-sm text-muted-foreground">
                                                        {v.subtitle}
                                                    </p>
                                                </div>
                                            </div>
                                            <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
                                                {v.desc}
                                            </p>
                                            <ul className="space-y-2">
                                                {v.highlights.map((h) => (
                                                    <li
                                                        key={h}
                                                        className="flex items-center gap-2 text-sm text-foreground"
                                                    >
                                                        <CheckCircle2
                                                            size={14}
                                                            className="shrink-0 text-primary"
                                                            strokeWidth={2}
                                                        />
                                                        {h}
                                                    </li>
                                                ))}
                                            </ul>
                                        </CardContent>
                                    </Card>
                                </motion.div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* ── Testimonials ─────────────────────────────────────────────── */}
            <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">
                            Early access customers
                        </Badge>
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            Businesses that trust Upepo
                        </h2>
                        <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
                            Real feedback from the merchants who shaped Upepo during early access.
                        </p>
                    </motion.div>

                    <div className="grid gap-6 sm:grid-cols-3">
                        {TESTIMONIALS.map((t, i) => (
                            <motion.div key={t.name} {...rv(0.08 * i)}>
                                <Card className={`h-full ${G} border-0`}>
                                    <CardContent className="flex h-full flex-col p-8">
                                        <Quote
                                            size={24}
                                            className="mb-4 text-primary opacity-60"
                                            strokeWidth={1.5}
                                        />
                                        <p className="flex-1 text-sm leading-relaxed text-foreground">
                                            "{t.quote}"
                                        </p>
                                        <div className="mt-8 flex items-center gap-3">
                                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/15 text-sm font-bold text-primary">
                                                {t.initials}
                                            </div>
                                            <div>
                                                <p className="text-sm font-semibold text-foreground">
                                                    {t.name}
                                                </p>
                                                <p className="text-xs text-muted-foreground">
                                                    {t.business}
                                                </p>
                                            </div>
                                            <Badge variant="neutral" className="ml-auto shrink-0">
                                                {t.tag}
                                            </Badge>
                                        </div>
                                    </CardContent>
                                </Card>
                            </motion.div>
                        ))}
                    </div>

                    <motion.p
                        {...rv(0.25)}
                        className="mt-8 text-center text-xs text-muted-foreground"
                    >
                        * Testimonials from Upepo POS early access programme participants.
                    </motion.p>
                </div>
            </section>

            {/* ── Stats ────────────────────────────────────────────────────── */}
            <section className="bg-primary/5 py-24">
                <div className="mx-auto max-w-6xl px-6">
                    <motion.div {...rv(0)} className="mb-14 text-center">
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            By the numbers
                        </h2>
                        <p className="mt-3 text-muted-foreground">
                            Growth we are proud of. A foundation we are building on.
                        </p>
                    </motion.div>

                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                        {STATS.map((s, i) => {
                            const Icon = s.icon;
                            return (
                                <motion.div key={s.label} {...rv(0.08 * i)}>
                                    <Card className={`h-full ${G} border-0`}>
                                        <CardContent className="p-8 text-center">
                                            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                                                <Icon size={22} strokeWidth={1.75} />
                                            </div>
                                            <p className="uf-display text-4xl font-extrabold text-primary">
                                                {s.value}
                                            </p>
                                            <p className="mt-1 font-semibold text-foreground">
                                                {s.label}
                                            </p>
                                            <p className="mt-1 text-xs text-muted-foreground">
                                                {s.sub}
                                            </p>
                                        </CardContent>
                                    </Card>
                                </motion.div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* ── Offline-first callout ────────────────────────────────────── */}
            <section className="bg-background py-20">
                <div className="mx-auto max-w-3xl px-6">
                    <motion.div
                        {...rv(0)}
                        className={`flex flex-col items-center gap-6 rounded-2xl p-10 text-center ${G} sm:flex-row sm:text-left`}
                    >
                        <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-2xl bg-accent/15 text-foreground">
                            <Wifi size={28} strokeWidth={1.5} />
                        </div>
                        <div>
                            <h3 className="uf-display text-xl font-bold text-foreground">
                                Works offline. Everywhere.
                            </h3>
                            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                                Power cuts. Patchy 3G. Remote locations. Upepo keeps selling regardless.
                                Every transaction is stored locally and synced the moment connectivity
                                returns — with zero data loss and full audit trails.
                            </p>
                        </div>
                    </motion.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)}>
                        <Star
                            className="mx-auto mb-6 text-primary"
                            size={36}
                            strokeWidth={1.5}
                        />
                    </motion.div>
                    <motion.h2
                        {...rv(0.08)}
                        className="uf-display text-4xl font-bold text-foreground sm:text-5xl"
                    >
                        Ready to join them?
                    </motion.h2>
                    <motion.p
                        {...rv(0.16)}
                        className="mt-4 text-lg text-muted-foreground"
                    >
                        Start your Upepo journey today. Simple pricing. No hidden fees.
                        Cancel any time.
                    </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="/pricing">
                                See pricing <ArrowRight size={16} />
                            </Link>
                        </Button>
                        <Button asChild variant="outline" size="lg">
                            <Link href="/contact">Talk to sales</Link>
                        </Button>
                    </motion.div>
                </div>
            </section>
        </WebLayout>
    );
}