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 {
    ArrowRight,
    BarChart3,
    CheckCircle2,
    CreditCard,
    Globe,
    Package2,
    Receipt,
    ShieldCheck,
    ShoppingCart,
    Users,
    Wifi,
    Layers,
} 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 FEATURE_GROUPS = [
    {
        id: 'pos',
        icon: ShoppingCart,
        color: '#F26522',
        label: 'Point of Sale',
        headline: 'A POS that never lets you down.',
        desc: 'Designed for speed and resilience. Works on any device, with or without internet.',
        points: [
            'Touch-optimised interface for cashier speed',
            'Barcode scanning via device camera or USB scanner',
            'Quick-add product favourites per cashier',
            'Cart management — hold, resume, split',
            'Multi-item discounts and promotions',
            'Shift open / close with cash float reconciliation',
            'Thermal receipt printing (Bluetooth & USB)',
            'Offline mode with automatic sync on reconnect',
        ],
    },
    {
        id: 'inventory',
        icon: Package2,
        color: '#C5DC1C',
        label: 'Inventory Control',
        headline: 'Know exactly what you have, always.',
        desc: 'Real-time visibility across products, categories, and locations.',
        points: [
            'Real-time stock levels per location',
            'Stock adjustments: received, damaged, lost, returned',
            'Low-stock and out-of-stock alerts',
            'Full adjustment history and audit trail',
            'Product categories and attribute variants',
            'Bulk product import via Excel template',
            'Barcode and SKU management',
            'Stock transfer between locations',
        ],
    },
    {
        id: 'payments',
        icon: CreditCard,
        color: '#F26522',
        label: 'Mobile Payments',
        headline: 'Accept any payment, anywhere.',
        desc: 'Native mobile money integrations — no third-party middleware required.',
        points: [
            'M-Pesa STK Push (Kenya)',
            'Airtel Money (Kenya, Tanzania, Uganda)',
            'MTN Mobile Money (Uganda)',
            'Cash with automatic change calculation',
            'Split payments across methods',
            'Card payments via connected terminal',
            'Real-time payment confirmation',
            'Failed payment retry and reconciliation',
        ],
    },
    {
        id: 'purchasing',
        icon: Receipt,
        color: '#C5DC1C',
        label: 'Purchase Orders',
        headline: 'Close the full procurement loop.',
        desc: 'From supplier management to goods receipt and accounts payable.',
        points: [
            'Supplier directory with contact management',
            'Purchase order creation and approval workflow',
            'Goods receipt against PO with discrepancy tracking',
            'Supplier invoice matching',
            'Accounts payable tracking per supplier',
            'Partial receipts and back-order management',
            'Landed cost allocation across received items',
            'Supplier performance history',
        ],
    },
    {
        id: 'customers',
        icon: Users,
        color: '#F26522',
        label: 'Customer Accounts',
        headline: 'Build relationships that keep people coming back.',
        desc: 'Credit management, loyalty, and full purchase history.',
        points: [
            'Customer profiles with contact and address',
            'Credit sales with configurable credit limits',
            'Credit balance and outstanding debt tracking',
            'Customer loyalty points — earn and redeem',
            'Full purchase history per customer',
            'Customer statements (PDF export)',
            'Customer group pricing tiers',
            'Bulk SMS receipts and statements',
        ],
    },
    {
        id: 'compliance',
        icon: ShieldCheck,
        color: '#C5DC1C',
        label: 'Tax Compliance',
        headline: 'Stay compliant — automatically.',
        desc: 'Built-in fiscal integrations for East African tax authorities.',
        points: [
            'eTIMS integration — KRA Kenya',
            'EFD integration — TRA Tanzania',
            'EFRIS integration — URA Uganda',
            'EBM integration — RRA Rwanda',
            'Automatic fiscal receipt signing',
            'VAT-inclusive and exclusive pricing modes',
            'Multiple tax rates per product category',
            'Compliance audit reports on demand',
        ],
    },
    {
        id: 'analytics',
        icon: BarChart3,
        color: '#F26522',
        label: 'Analytics & Reports',
        headline: 'Data you can act on.',
        desc: 'From daily sales summaries to deep profitability analysis.',
        points: [
            'Daily, weekly, monthly sales dashboards',
            'Revenue by product, category, and cashier',
            'Gross profit and margin analysis',
            'Payment method breakdown',
            'Stock movement and valuation reports',
            'Customer sales and credit reports',
            'Supplier purchase history reports',
            'Excel and PDF export for all reports',
        ],
    },
    {
        id: 'multisite',
        icon: Globe,
        color: '#C5DC1C',
        label: 'Multi-Location',
        headline: 'Manage every branch from one place.',
        desc: 'Consistent operations across all your locations, with central oversight.',
        points: [
            'Unlimited locations per account (Business+)',
            'Per-location stock and sales views',
            'Cross-location stock transfers',
            'Centralised product catalogue',
            'Location-specific pricing and tax rates',
            'Consolidated multi-location reports',
            'Per-location cashier and manager roles',
            'Real-time sync across all branches',
        ],
    },
];

const PLATFORM_HIGHLIGHTS = [
    {
        icon: Wifi,
        title: 'Offline-first architecture',
        desc: 'Upepo uses a local-first data model — every transaction is saved locally first, then synced when connectivity returns. No data loss, ever.',
    },
    {
        icon: ShieldCheck,
        title: 'Role-based access control',
        desc: 'Owner, Manager, Cashier, Accountant — granular permissions so every user sees only what they need to see.',
    },
    {
        icon: Layers,
        title: 'Multi-tenant isolation',
        desc: 'Each business account gets its own isolated database. Your data is completely separated from other Upepo customers.',
    },
    {
        icon: Globe,
        title: 'Account portfolio',
        desc: 'One login, multiple business accounts. Switch between your retail store and pharmacy without logging out.',
    },
];

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 },
    };
}

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

    return (
        <WebLayout>
            <Head title="Features — Upepo POS" />

            {/* ── HERO ─────────────────────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 pt-36 pb-16 text-center sm:px-6 lg:pt-48">
                <motion.div {...rv(0)}>
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Full platform overview
                    </Badge>
                    <h1 className="uf-display mx-auto mt-6 max-w-3xl text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
                        Everything your business needs,{' '}
                        <span className="text-primary">in one platform.</span>
                    </h1>
                    <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
                        Not a basic POS with a few extras — a complete
                        operations suite. Built from the ground up for how East
                        African businesses actually run.
                    </p>
                </motion.div>

                {/* quick nav */}
                <motion.div
                    {...rv(0.1)}
                    className="mt-10 flex flex-wrap justify-center gap-2"
                >
                    {FEATURE_GROUPS.map(({ id, label }) => (
                        <a
                            key={id}
                            href={`#${id}`}
                            className="rounded-full border border-border px-4 py-1.5 text-sm font-medium text-muted-foreground transition hover:border-primary/40 hover:text-primary"
                        >
                            {label}
                        </a>
                    ))}
                </motion.div>
            </section>

            {/* ── FEATURE GROUPS ───────────────────────────── */}
            {FEATURE_GROUPS.map(
                (
                    { id, icon: Icon, color, label, headline, desc, points },
                    i,
                ) => (
                    <section
                        key={id}
                        id={id}
                        className="mx-auto max-w-7xl px-4 py-16 sm:px-6"
                    >
                        <motion.div
                            {...rv()}
                            className={`grid items-center gap-10 rounded-3xl p-8 sm:p-12 lg:grid-cols-2 lg:gap-16 ${G}`}
                        >
                            {/* copy — alternate sides */}
                            <div className={i % 2 === 1 ? 'lg:order-2' : ''}>
                                <div
                                    className="mb-5 inline-flex rounded-2xl p-3"
                                    style={{ background: `${color}18` }}
                                >
                                    <Icon
                                        size={28}
                                        style={{ color }}
                                    />
                                </div>
                                <Badge
                                    variant={
                                        color === '#F26522' ? 'brand' : 'lime'
                                    }
                                    className="mb-4 rounded-full px-3 py-1 text-[11px] tracking-wider uppercase"
                                >
                                    {label}
                                </Badge>
                                <h2 className="uf-display text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                                    {headline}
                                </h2>
                                <p className="mt-3 text-muted-foreground">
                                    {desc}
                                </p>
                            </div>

                            {/* checklist */}
                            <div className={i % 2 === 1 ? 'lg:order-1' : ''}>
                                <ul className="grid gap-3 sm:grid-cols-2">
                                    {points.map((p) => (
                                        <li
                                            key={p}
                                            className="flex items-start gap-2.5 text-sm"
                                        >
                                            <CheckCircle2
                                                size={14}
                                                className="mt-0.5 shrink-0 text-primary"
                                                style={{
                                                    color,
                                                }}
                                            />
                                            <span className="text-foreground/80">
                                                {p}
                                            </span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </motion.div>
                    </section>
                ),
            )}

            {/* ── PLATFORM HIGHLIGHTS ──────────────────────── */}
            <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"
                    >
                        Under the hood
                    </Badge>
                    <h2 className="uf-display mt-4 text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
                        Built for the long term.
                    </h2>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {PLATFORM_HIGHLIGHTS.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-6">
                                        <div className="mb-4 inline-flex rounded-xl bg-primary/12 p-2.5">
                                            <Icon
                                                size={18}
                                                className="text-primary"
                                            />
                                        </div>
                                        <h3 className="uf-display text-base font-bold text-foreground">
                                            {title}
                                        </h3>
                                        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                                            {desc}
                                        </p>
                                    </CardContent>
                                </Card>
                            </motion.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">
                            Ready to see it in action?
                        </h2>
                        <p className="mx-auto mt-4 max-w-lg text-white/50">
                            Start a 30-day free trial — no credit card required.
                            Full access to all features from day one.
                        </p>
                        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
                            <Link
                                href="/pricing"
                                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"
                            >
                                See pricing <ArrowRight size={14} />
                            </Link>
                            <Link
                                href="/contact"
                                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"
                            >
                                Talk to sales
                            </Link>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}