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,
    ChevronRight,
    CreditCard,
    Package2,
    Receipt,
    ShieldCheck,
    ShoppingCart,
    Users,
    Wifi,
} 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]';
const GS =
    'border border-white/80 bg-white/75 backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.05]';

// ─── page data ─────────────────────────────────────────────────────────────────

const SEGMENTS = [
    'Retail Chains',
    'Pharmacies',
    'Wholesalers',
    'Mini-Markets',
    'Hospitality',
    'Distributors',
    'Agro-Dealers',
    'Hardware Stores',
    'Supermarkets',
    'Convenience Stores',
];

const FEATURES = [
    {
        icon: ShoppingCart,
        title: 'Point of Sale',
        desc: 'Touch-optimised POS that works offline. Barcode scan, cart management, quick-add favourites, shift management, and thermal receipt printing — with or without internet.',
        color: '#F26522',
    },
    {
        icon: Package2,
        title: 'Inventory Control',
        desc: 'Real-time stock levels, manual adjustments (received, damaged, lost), low-stock alerts, and a full adjustment history. Know exactly what you have, always.',
        color: '#C5DC1C',
    },
    {
        icon: CreditCard,
        title: 'Mobile Payments',
        desc: 'M-Pesa STK Push, Airtel Money, cash with change calculation, and split payments. Fully integrated for Kenya, Tanzania, Uganda, and Rwanda.',
        color: '#F26522',
    },
    {
        icon: Receipt,
        title: 'Purchase Orders',
        desc: 'Manage suppliers, raise purchase orders, receive goods, and track accounts payable — closing the full procurement loop from order to shelf.',
        color: '#C5DC1C',
    },
    {
        icon: Users,
        title: 'Customer Accounts',
        desc: 'Credit sales with configurable limits, loyalty points, purchase history, and customer statements. Build relationships that keep people coming back.',
        color: '#F26522',
    },
    {
        icon: ShieldCheck,
        title: 'Tax Compliance',
        desc: 'Built-in integrations for eTIMS (Kenya), EFD (Tanzania), EFRIS (Uganda), and EBM (Rwanda). Stay compliant without bolting on extra tools.',
        color: '#C5DC1C',
    },
];

const STEPS = [
    {
        n: '01',
        title: 'Register your business',
        desc: 'Sign up, pick your country, and your isolated tenant environment is provisioned instantly — complete with default roles, tax rates, and payment methods.',
    },
    {
        n: '02',
        title: 'Add your products',
        desc: 'Scan barcodes with your phone camera, key in SKUs manually, or bulk-import from Excel. Set prices, categories, and opening stock. Ready in minutes.',
    },
    {
        n: '03',
        title: 'Start selling — anywhere',
        desc: 'Open a shift, serve customers, accept any payment. When the internet drops, Upepo keeps going. When it returns, every transaction syncs automatically.',
    },
];

const STATS = [
    { value: '4', label: 'Countries at launch', sub: 'KE · TZ · UG · RW' },
    { value: '6+', label: 'Business segments', sub: 'Retail, pharma & more' },
    { value: '3', label: 'Payment networks', sub: 'M-Pesa · Airtel · Cards' },
    {
        value: '99.9%',
        label: 'Sync reliability',
        sub: 'Offline-first architecture',
    },
];

const PLANS = [
    {
        name: 'Starter',
        price: '2,500',
        currency: 'KES',
        period: '/mo',
        desc: 'Perfect for a single-location business getting started with POS.',
        features: [
            '1 location · 2 cashier accounts',
            'Up to 500 products',
            'Core POS + cash payments',
            'M-Pesa & Airtel Money',
            'Basic inventory management',
            'Daily & weekly sales reports',
            'Thermal receipt printing',
            'Email support',
        ],
        cta: 'Start Free Trial',
        highlight: false,
    },
    {
        name: 'Business',
        price: '6,500',
        currency: 'KES',
        period: '/mo',
        desc: 'For growing businesses with multiple locations or compliance needs.',
        features: [
            'Up to 5 locations · 10 users',
            'Unlimited products',
            'Full POS + all payment methods',
            'Tax compliance (eTIMS / EFD)',
            'Suppliers & purchase orders',
            'Customer credit & loyalty',
            'Stock transfers & adjustments',
            'Advanced analytics · Excel export',
            'Priority support',
        ],
        cta: 'Start Free Trial',
        highlight: true,
    },
    {
        name: 'Enterprise',
        price: 'Custom',
        currency: '',
        period: '',
        desc: 'Unlimited scale, white-label, API access, and dedicated partnership.',
        features: [
            'Unlimited locations & users',
            'All compliance integrations',
            'Public REST API + webhooks',
            'White-label (custom domain & brand)',
            'Asset tracking & warehouse mgmt',
            'Custom report builder',
            'E-commerce sync (WooCommerce etc.)',
            'Accounting exports (QuickBooks/Xero)',
            'Dedicated account manager',
        ],
        cta: 'Contact Sales',
        highlight: false,
    },
];

const TESTIMONIALS = [
    {
        quote: "Finally a POS that doesn't freeze when the network drops. We serve 200+ customers a day — downtime is not an option. Upepo just works.",
        name: 'Amina Waweru',
        role: 'Owner, Amina Pharmacy',
        location: 'Nairobi, Kenya',
    },
    {
        quote: 'We now run three branches across Dar es Salaam from one dashboard. Having inventory, purchasing, and reports in one place cut our admin time in half.',
        name: 'Emmanuel Msangi',
        role: 'Operations Manager',
        location: 'Dar es Salaam, Tanzania',
    },
    {
        quote: "The M-Pesa integration is seamless. Customers pay on their phones, get an SMS receipt, and we're done. It feels genuinely professional.",
        name: 'Grace Namukasa',
        role: 'Retail Chain Director',
        location: 'Kampala, Uganda',
    },
];

// ─── POS dashboard SVG ────────────────────────────────────────────────────────

function POSDashboard() {
    return (
        <svg
            viewBox="0 0 720 440"
            fill="none"
            className="h-full w-full"
            aria-hidden="true"
        >
            <defs>
                <linearGradient
                    id="dash-bg"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="440"
                    gradientUnits="userSpaceOnUse"
                >
                    <stop offset="0%" stopColor="#1c1915" />
                    <stop offset="100%" stopColor="#111009" />
                </linearGradient>
                <linearGradient
                    id="pay-btn"
                    x1="0"
                    y1="0"
                    x2="220"
                    y2="0"
                    gradientUnits="userSpaceOnUse"
                >
                    <stop offset="0%" stopColor="#e55a18" />
                    <stop offset="100%" stopColor="#f5823a" />
                </linearGradient>
                <linearGradient
                    id="sidebar-grad"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="440"
                    gradientUnits="userSpaceOnUse"
                >
                    <stop offset="0%" stopColor="#141210" />
                    <stop offset="100%" stopColor="#0f0d0b" />
                </linearGradient>
            </defs>

            {/* Main frame */}
            <rect
                x="6"
                y="6"
                width="708"
                height="428"
                rx="22"
                fill="url(#dash-bg)"
            />
            <rect
                x="6"
                y="6"
                width="708"
                height="428"
                rx="22"
                stroke="#ffffff08"
                strokeWidth="1.5"
            />

            {/* Header bar */}
            <rect x="6" y="6" width="708" height="58" rx="22" fill="#1a1714" />
            <rect x="6" y="36" width="708" height="28" fill="#1a1714" />
            <rect x="6" y="64" width="708" height="1" fill="#ffffff0a" />

            {/* Logo mark */}
            <rect x="20" y="17" width="34" height="34" rx="9" fill="#F26522" />
            <text
                x="37"
                y="38"
                textAnchor="middle"
                fontSize="10"
                fontWeight="900"
                fill="white"
                fontFamily="sans-serif"
                letterSpacing="-0.5"
            >
                UP
            </text>

            {/* Search bar */}
            <rect
                x="66"
                y="19"
                width="250"
                height="30"
                rx="8"
                fill="#252220"
                stroke="#ffffff0a"
                strokeWidth="1"
            />
            <circle
                cx="84"
                cy="34"
                r="7"
                stroke="#4a4845"
                strokeWidth="1.5"
                fill="none"
            />
            <line
                x1="89"
                y1="39"
                x2="94"
                y2="44"
                stroke="#4a4845"
                strokeWidth="1.5"
                strokeLinecap="round"
            />
            <rect x="100" y="29" width="80" height="10" rx="4" fill="#323030" />

            {/* Status pill */}
            <rect
                x="530"
                y="19"
                width="80"
                height="28"
                rx="14"
                fill="#C5DC1C14"
                stroke="#C5DC1C28"
                strokeWidth="1"
            />
            <circle cx="564" cy="34" r="5" fill="#C5DC1C" />
            <circle cx="564" cy="34" r="3" fill="#d8ee38" />

            {/* Shift badge */}
            <rect
                x="620"
                y="19"
                width="82"
                height="28"
                rx="14"
                fill="#C5DC1C30"
                stroke="none"
            />

            {/* Sidebar */}
            <rect
                x="6"
                y="65"
                width="58"
                height="369"
                fill="#252220"
                stroke="#ffffff0a"
                strokeWidth="1"
            />

            {/* Sidebar icons */}
            {[0, 1, 2, 3, 4].map((i) => {
                const active = i === 0;
                return (
                    <g key={i}>
                        <rect
                            x="14"
                            y={82 + i * 52}
                            width="42"
                            height="34"
                            rx="10"
                            fill={active ? '#F26522' : '#1e1c19'}
                            stroke={active ? 'none' : '#ffffff06'}
                            strokeWidth="1"
                        />
                        <rect
                            x="25"
                            y={93 + i * 52}
                            width="20"
                            height="3"
                            rx="1.5"
                            fill={active ? '#ffffffb0' : '#ffffff20'}
                        />
                        <rect
                            x="22"
                            y={99 + i * 52}
                            width="14"
                            height="3"
                            rx="1.5"
                            fill={active ? '#ffffff60' : '#ffffff10'}
                        />
                    </g>
                );
            })}

            {/* Cart area (left panel) */}
            {[0, 1, 2].map((i) => {
                const fills = ['#F2652215', '#C5DC1C15', '#65616012'];
                const bars = ['#F2652250', '#C5DC1C50', '#65616040'];
                return (
                    <g key={i}>
                        <rect
                            x="72"
                            y={75 + i * 110}
                            width="292"
                            height="95"
                            rx="10"
                            fill="#1a1815"
                            stroke="#ffffff08"
                            strokeWidth="1"
                        />
                        <rect
                            x="84"
                            y={87 + i * 110}
                            width="40"
                            height="40"
                            rx="8"
                            fill={fills[i]}
                        />
                        <rect
                            x="84"
                            y={87 + i * 110}
                            width="40"
                            height="40"
                            rx="8"
                            fill="#ffffff18"
                        />
                        <rect
                            x="134"
                            y={91 + i * 110}
                            width="100"
                            height="8"
                            rx="4"
                            fill="#ffffff20"
                        />
                        <rect
                            x="134"
                            y={104 + i * 110}
                            width="70"
                            height="6"
                            rx="3"
                            fill="#ffffff0c"
                        />
                        <rect
                            x="134"
                            y={118 + i * 110}
                            width="50"
                            height="8"
                            rx="4"
                            fill={bars[i]}
                        />
                    </g>
                );
            })}

            {/* Divider */}
            <rect x="373" y="65" width="1" height="369" fill="#ffffff08" />

            {/* Right panel */}
            <rect x="374" y="65" width="340" height="369" fill="#141210" />

            {/* Order summary header */}
            <rect
                x="386"
                y="75"
                width="316"
                height="36"
                rx="8"
                fill="#ffffff18"
            />
            <rect
                x="398"
                y="87"
                width="80"
                height="10"
                rx="5"
                fill="#ffffff0c"
            />

            {/* Line items */}
            {[0, 1, 2, 3].map((i) => (
                <g key={i}>
                    <rect
                        x="386"
                        y={120 + i * 44}
                        width="316"
                        height="36"
                        rx="8"
                        fill="#1c1a17"
                        stroke="#ffffff07"
                        strokeWidth="1"
                    />
                    <rect
                        x="398"
                        y={130 + i * 44}
                        width="12"
                        height="12"
                        rx="3"
                        fill={i % 2 === 0 ? '#F2652222' : '#C5DC1C22'}
                    />
                    <rect
                        x="416"
                        y={132 + i * 44}
                        width="60"
                        height="8"
                        rx="4"
                        fill={i % 2 === 0 ? '#F26522' : '#C5DC1C'}
                        opacity="0.35"
                    />
                    <rect
                        x="580"
                        y={132 + i * 44}
                        width="50"
                        height="8"
                        rx="4"
                        fill="#ffffff20"
                    />
                    <rect
                        x="634"
                        y={131 + i * 44}
                        width="24"
                        height="10"
                        rx="5"
                        fill="#ffffff0e"
                    />
                </g>
            ))}

            {/* Totals */}
            <rect
                x="386"
                y="306"
                width="316"
                height="1"
                fill="#ffffff08"
            />
            <rect
                x="386"
                y="314"
                width="316"
                height="1"
                fill="#ffffff08"
            />
            <rect
                x="386"
                y="316"
                width="150"
                height="10"
                rx="5"
                fill="#ffffff18"
            />
            <rect
                x="550"
                y="316"
                width="80"
                height="10"
                rx="5"
                fill="#ffffff12"
            />
            <rect
                x="386"
                y="332"
                width="100"
                height="8"
                rx="4"
                fill="#ffffff10"
            />
            <rect
                x="550"
                y="332"
                width="60"
                height="8"
                rx="4"
                fill="#C5DC1C40"
            />

            {/* Divider */}
            <rect x="386" y="366" width="322" height="1" fill="#ffffff08" />

            {/* Charge button */}
            <rect
                x="386"
                y="374"
                width="322"
                height="48"
                rx="14"
                fill="url(#pay-btn)"
            />
            <rect
                x="450"
                y="392"
                width="100"
                height="12"
                rx="6"
                fill="#ffffff90"
            />
            <rect
                x="558"
                y="392"
                width="60"
                height="12"
                rx="6"
                fill="#ffffff18"
            />
            <rect
                x="624"
                y="388"
                width="20"
                height="20"
                rx="10"
                fill="#ffffff12"
            />
        </svg>
    );
}

// ─── 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.12 },
        transition: {
            duration: 0.58,
            ease: [0.25, 0.1, 0.25, 1],
            delay,
        },
    };
}

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

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

    return (
        <WebLayout>
            <Head title="Upepo POS — Inventory & Point of Sale for African Business" />

            {/* ── HERO ─────────────────────────────────── */}
            <section className="relative mx-auto max-w-7xl px-4 pt-32 pb-16 sm:px-6 sm:pt-40 lg:pt-44">
                <div className="grid items-center gap-14 lg:grid-cols-[1fr_1.15fr] lg:gap-16">
                    {/* copy */}
                    <div>
                        <motion.div {...rv(0)}>
                            <Badge
                                variant="lime"
                                className="gap-2 rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                            >
                                <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
                                Now available · Phase 1 release
                            </Badge>
                        </motion.div>

                        <motion.h1
                            {...rv(0.07)}
                            className="uf-display mt-6 text-[2.55rem] leading-[1.07] font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-[3.3rem]"
                        >
                            The POS platform{' '}
                            <span className="text-primary">built for</span> how
                            Africa does business.
                        </motion.h1>

                        <motion.p
                            {...rv(0.13)}
                            className="mt-6 max-w-lg text-[1.04rem] leading-relaxed text-muted-foreground dark:text-white/50"
                        >
                            Upepo runs your inventory, point-of-sale, mobile
                            money, purchasing, and tax compliance — even when the
                            internet is out. One platform built for the realities
                            of East African business.
                        </motion.p>

                        <motion.div
                            {...rv(0.19)}
                            className="mt-8 flex flex-wrap gap-3"
                        >
                            <Button
                                asChild
                                size="xl"
                                className="shadow-primary/28 shadow-xl"
                            >
                                <Link href="/register">
                                    Start Free Trial <ArrowRight size={15} />
                                </Link>
                            </Button>
                            <Button
                                asChild
                                size="xl"
                                variant="outline"
                                className={`${G} border-white/20 dark:border-white/[0.07]`}
                            >
                                <Link href="/features">Watch Product Demo</Link>
                            </Button>
                        </motion.div>

                        <motion.div
                            {...rv(0.25)}
                            className="mt-8 flex flex-wrap gap-2"
                        >
                            {[
                                {
                                    icon: Wifi,
                                    label: 'Offline-first + auto sync',
                                },
                                {
                                    icon: CreditCard,
                                    label: 'M-Pesa & Airtel Money',
                                },
                                {
                                    icon: ShieldCheck,
                                    label: 'eTIMS & EFD ready',
                                },
                            ].map(({ icon: Icon, label }) => (
                                <span
                                    key={label}
                                    className={`inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold ${GS} text-foreground dark:text-white/80`}
                                >
                                    <Icon
                                        size={11}
                                        className="text-primary"
                                    />
                                    {label}
                                </span>
                            ))}
                        </motion.div>
                    </div>

                    {/* mockup */}
                    <motion.div {...rv(0.1)} className="relative">
                        <div
                            className={`relative rounded-3xl p-2.5 ${G} shadow-2xl shadow-black/20`}
                        >
                            <div className="overflow-hidden rounded-2xl">
                                <POSDashboard />
                            </div>
                        </div>

                        {/* floating stats */}
                        <motion.div
                            animate={reduced ? {} : { y: [0, -7, 0] }}
                            transition={{
                                duration: 3.8,
                                repeat: Infinity,
                                ease: 'easeInOut',
                            }}
                            className={`absolute -bottom-6 -left-6 rounded-2xl px-4 py-3 shadow-xl ${GS}`}
                        >
                            <p className="text-[9px] font-bold tracking-wider text-muted-foreground uppercase dark:text-white/40">
                                Sync Uptime
                            </p>
                            <p className="uf-display mt-0.5 text-2xl font-extrabold text-foreground">
                                99.9%
                            </p>
                            <div className="mt-1.5 flex gap-0.5">
                                {Array.from({ length: 12 }, (_, i) => (
                                    <div
                                        key={i}
                                        className={`h-1 w-3 rounded-full ${i < 11 ? 'bg-accent' : 'bg-muted-foreground/25'}`}
                                    />
                                ))}
                            </div>
                        </motion.div>

                        <motion.div
                            animate={reduced ? {} : { y: [0, 9, 0] }}
                            transition={{
                                duration: 4.2,
                                repeat: Infinity,
                                ease: 'easeInOut',
                                delay: 0.6,
                            }}
                            className={`absolute top-8 -right-4 rounded-2xl px-4 py-3 shadow-xl ${GS}`}
                        >
                            <p className="text-[9px] font-bold tracking-wider text-muted-foreground uppercase dark:text-white/40">
                                Avg. Response
                            </p>
                            <p className="uf-display mt-0.5 text-2xl font-extrabold text-foreground">
                                1.8s
                            </p>
                            <p className="mt-0.5 text-[10px] font-semibold text-accent">
                                ↓ 12% this week
                            </p>
                        </motion.div>

                        <motion.div
                            animate={reduced ? {} : { y: [0, -5, 0] }}
                            transition={{
                                duration: 3.2,
                                repeat: Infinity,
                                ease: 'easeInOut',
                                delay: 1.1,
                            }}
                            className={`absolute right-8 -bottom-8 rounded-2xl px-4 py-3 shadow-xl ${GS}`}
                        >
                            <p className="text-[9px] font-bold tracking-wider text-muted-foreground uppercase dark:text-white/40">
                                Offline Mode
                            </p>
                            <p className="uf-display mt-0.5 text-2xl font-extrabold text-primary">
                                Queued
                            </p>
                            <p className="mt-0.5 text-[10px] text-muted-foreground dark:text-white/35">
                                Syncs on reconnect
                            </p>
                        </motion.div>
                    </motion.div>
                </div>
            </section>

            {/* ── TICKER ───────────────────────────────── */}
            <section className="pt-12 pb-6">
                <div className="mx-auto max-w-7xl px-4 sm:px-6">
                    <div
                        className={`overflow-hidden rounded-2xl px-5 py-4 ${G}`}
                    >
                        <p className="mb-3 text-[10px] font-bold tracking-[0.16em] text-muted-foreground uppercase dark:text-white/35">
                            Trusted across business segments
                        </p>
                        <div className="relative overflow-hidden">
                            <motion.div
                                animate={
                                    reduced ? undefined : { x: ['0%', '-50%'] }
                                }
                                transition={
                                    reduced
                                        ? undefined
                                        : {
                                              repeat: Infinity,
                                              duration: 24,
                                              ease: 'linear',
                                          }
                                }
                                className="flex min-w-max gap-3"
                            >
                                {[...SEGMENTS, ...SEGMENTS].map((s, i) => (
                                    <span
                                        key={i}
                                        className={`rounded-full px-4 py-2 text-sm font-semibold whitespace-nowrap ${GS} text-foreground dark:text-white/70`}
                                    >
                                        {s}
                                    </span>
                                ))}
                            </motion.div>
                        </div>
                    </div>
                </div>
            </section>

            {/* ── FEATURES ─────────────────────────────── */}
            <section
                id="features"
                className="mx-auto max-w-7xl px-4 py-20 sm:px-6"
            >
                <motion.div {...rv()} className="mb-12">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Platform capabilities
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                        Everything your business needs,
                        <br className="hidden sm:block" />
                        in one platform.
                    </h2>
                    <p className="mt-4 max-w-xl text-muted-foreground dark:text-white/45">
                        Not a basic storefront — a full operations platform.
                        Built from real requirements gathered across East African
                        businesses.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {FEATURES.map(({ icon: Icon, title, desc, color }, i) => (
                        <motion.div key={title} {...rv(i * 0.05)}>
                            <Card
                                className={`group relative h-full overflow-hidden border-white/20 bg-white/[0.07] backdrop-blur-xl transition duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-white/[0.07] dark:bg-white/[0.04]`}
                            >
                                <div
                                    className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                                    style={{
                                        background: `radial-gradient(circle at 20% 20%, ${color}14, transparent 60%)`,
                                    }}
                                />
                                <CardContent className="relative p-6">
                                    <div
                                        className="mb-4 inline-flex rounded-xl p-2.5"
                                        style={{
                                            background: `${color}18`,
                                        }}
                                    >
                                        <Icon size={20} style={{ color }} />
                                    </div>
                                    <h3 className="uf-display text-[1.1rem] font-bold text-foreground">
                                        {title}
                                    </h3>
                                    <p className="mt-2.5 text-sm leading-relaxed text-muted-foreground dark:text-white/45">
                                        {desc}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── HOW IT WORKS ─────────────────────────── */}
            <section
                id="solutions"
                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"
                    >
                        Simple onboarding
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                        Up and running in minutes.
                    </h2>
                    <p className="mx-auto mt-4 max-w-lg text-muted-foreground dark:text-white/45">
                        No complex IT setup. No lengthy training. Just sign up,
                        configure, and start selling.
                    </p>
                </motion.div>

                <div className="grid gap-5 md:grid-cols-3">
                    {STEPS.map(({ n, title, desc }, i) => (
                        <motion.div
                            key={n}
                            {...rv(i * 0.09)}
                            className={`relative rounded-2xl p-7 ${G}`}
                        >
                            <div className="mb-5 flex items-center gap-3">
                                <span className="uf-display text-5xl font-black text-primary/22 dark:text-primary/18">
                                    {n}
                                </span>
                                <div className="h-px flex-1 bg-gradient-to-r from-primary/25 to-transparent" />
                            </div>
                            <h3 className="uf-display text-xl font-bold text-foreground">
                                {title}
                            </h3>
                            <p className="mt-3 text-sm leading-relaxed text-muted-foreground dark:text-white/45">
                                {desc}
                            </p>
                            {i < 2 && (
                                <div className="absolute top-1/2 -right-2.5 z-10 hidden -translate-y-1/2 md:block">
                                    <ChevronRight
                                        size={18}
                                        className="text-muted-foreground/25"
                                    />
                                </div>
                            )}
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── STATS ────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pb-20 sm:px-6">
                <motion.div
                    {...rv()}
                    className={`grid grid-cols-2 gap-px overflow-hidden rounded-3xl md:grid-cols-4 ${G}`}
                >
                    {STATS.map(({ value, label, sub }, i) => (
                        <motion.div
                            key={label}
                            {...rv(i * 0.06)}
                            className={`flex flex-col items-center p-8 text-center ${G} rounded-none border-0`}
                        >
                            <p className="uf-display text-4xl font-black text-primary">
                                {value}
                            </p>
                            <p className="mt-1.5 text-sm font-semibold text-foreground">
                                {label}
                            </p>
                            <p className="mt-1 text-xs text-muted-foreground dark:text-white/35">
                                {sub}
                            </p>
                        </motion.div>
                    ))}
                </motion.div>
            </section>

            {/* ── PRICING ──────────────────────────────── */}
            <section
                id="pricing"
                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"
                    >
                        Simple pricing
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                        Plans that grow with you.
                    </h2>
                    <p className="mx-auto mt-4 max-w-lg text-muted-foreground dark:text-white/45">
                        Start on Starter, scale to Business, graduate to
                        Enterprise. No long-term contracts. Cancel any time.
                    </p>
                </motion.div>

                <div className="grid gap-4 md:grid-cols-3">
                    {PLANS.map(
                        (
                            {
                                name,
                                price,
                                currency,
                                period,
                                desc,
                                features,
                                cta,
                                highlight,
                            },
                            i,
                        ) => (
                            <motion.div key={name} {...rv(i * 0.07)}>
                                <Card
                                    className={`relative flex h-full flex-col ${
                                        highlight
                                            ? 'border-primary/25 bg-panel shadow-2xl shadow-primary/10 dark:bg-panel'
                                            : 'border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]'
                                    }`}
                                >
                                    {highlight && (
                                        <div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
                                            <Badge className="shadow-primary/35 rounded-full px-4 text-[11px] shadow-lg">
                                                Most Popular
                                            </Badge>
                                        </div>
                                    )}
                                    <CardContent className="flex flex-1 flex-col p-6">
                                        <div>
                                            <p
                                                className={`text-xs font-bold tracking-wider uppercase ${highlight ? 'text-primary' : 'text-muted-foreground'}`}
                                            >
                                                {name}
                                            </p>
                                            <div className="mt-3 flex items-baseline gap-1">
                                                {currency && (
                                                    <span
                                                        className={`text-sm font-semibold ${highlight ? 'text-white/60' : 'text-muted-foreground'}`}
                                                    >
                                                        {currency}
                                                    </span>
                                                )}
                                                <span
                                                    className={`uf-display text-4xl font-black ${highlight ? 'text-white' : 'text-foreground'}`}
                                                >
                                                    {price}
                                                </span>
                                                {period && (
                                                    <span
                                                        className={`text-sm ${highlight ? 'text-white/45' : 'text-muted-foreground'}`}
                                                    >
                                                        {period}
                                                    </span>
                                                )}
                                            </div>
                                            <p
                                                className={`mt-3 text-sm ${highlight ? 'text-white/55' : 'text-muted-foreground'}`}
                                            >
                                                {desc}
                                            </p>
                                        </div>
                                        <ul className="mt-6 flex-1 space-y-2.5">
                                            {features.map((f) => (
                                                <li
                                                    key={f}
                                                    className="flex items-start gap-2 text-sm"
                                                >
                                                    <CheckCircle2
                                                        size={14}
                                                        className={`mt-0.5 shrink-0 ${highlight ? 'text-accent' : 'text-primary'}`}
                                                    />
                                                    <span
                                                        className={
                                                            highlight
                                                                ? 'text-white/75'
                                                                : 'text-foreground/80'
                                                        }
                                                    >
                                                        {f}
                                                    </span>
                                                </li>
                                            ))}
                                        </ul>
                                        <Button
                                            asChild
                                            variant={
                                                highlight ? 'default' : 'outline'
                                            }
                                            className={`mt-8 w-full ${highlight ? 'shadow-primary/30 shadow-lg' : 'border-white/20 dark:border-white/[0.07]'}`}
                                        >
                                            <Link href="/register">
                                                {cta}{' '}
                                                {!highlight && (
                                                    <ArrowRight size={13} />
                                                )}
                                            </Link>
                                        </Button>
                                    </CardContent>
                                </Card>
                            </motion.div>
                        ),
                    )}
                </div>
            </section>

            {/* ── TESTIMONIALS ─────────────────────────── */}
            <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"
                    >
                        From our customers
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                        Real businesses. Real results.
                    </h2>
                </motion.div>

                <div className="grid gap-4 md:grid-cols-3">
                    {TESTIMONIALS.map(({ quote, name, role, location }, i) => (
                        <motion.div key={name} {...rv(i * 0.07)}>
                            <Card className="flex h-full flex-col border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]">
                                <CardContent className="flex flex-1 flex-col p-6">
                                    <div className="mb-4 flex gap-0.5">
                                        {Array.from({ length: 5 }, (_, j) => (
                                            <span
                                                key={j}
                                                className="text-primary text-sm"
                                            >
                                                ★
                                            </span>
                                        ))}
                                    </div>
                                    <p className="text-foreground/80 flex-1 text-sm leading-relaxed">
                                        &ldquo;{quote}&rdquo;
                                    </p>
                                    <div className="border-border/40 mt-5 border-t pt-4">
                                        <p className="text-foreground text-sm font-semibold">
                                            {name}
                                        </p>
                                        <p className="text-muted-foreground mt-0.5 text-xs">
                                            {role} · {location}
                                        </p>
                                    </div>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── CTA BANNER ───────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pb-20 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">
                        <Badge
                            variant="brand"
                            className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                        >
                            30-day free trial · No card required
                        </Badge>
                        <h2 className="uf-display mx-auto mt-5 max-w-2xl text-3xl font-extrabold tracking-tight text-white sm:text-4xl lg:text-5xl">
                            Ready to transform how you run your business?
                        </h2>
                        <p className="mx-auto mt-5 max-w-xl text-base text-white/45">
                            Join forward-thinking East African businesses already
                            using Upepo POS to sell faster, stay compliant, and
                            grow with confidence.
                        </p>
                        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                            <Button
                                asChild
                                size="xl"
                                className="shadow-primary/35 shadow-2xl"
                            >
                                <Link href="/register">
                                    Start Free Trial <ArrowRight size={15} />
                                </Link>
                            </Button>
                            <Button
                                asChild
                                size="xl"
                                variant="outline"
                                className="border-white/14 bg-white/[0.07] text-white/80 hover:bg-white/[0.12] hover:text-white"
                            >
                                <Link href="/contact">Talk to Sales</Link>
                            </Button>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}