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,
    Clock,
    FileText,
    Globe,
    KeyRound,
    Printer,
    RefreshCw,
    Shield,
    ShieldCheck,
    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]';
const GS =
    'border border-white/80 bg-white/75 backdrop-blur-xl dark:border-white/[0.08] dark:bg-white/[0.05]';

// ─── data ──────────────────────────────────────────────────────────────────────

const COUNTRIES = [
    {
        code: 'KE',
        name: 'Kenya',
        authority: 'KRA',
        system: 'eTIMS',
        bg: 'bg-green-600/10 border-green-600/30',
        text: 'text-green-700 dark:text-green-400',
    },
    {
        code: 'TZ',
        name: 'Tanzania',
        authority: 'TRA',
        system: 'EFD',
        bg: 'bg-emerald-600/10 border-emerald-500/30',
        text: 'text-emerald-700 dark:text-emerald-400',
    },
    {
        code: 'UG',
        name: 'Uganda',
        authority: 'URA',
        system: 'EFRIS',
        bg: 'bg-red-600/10 border-red-500/30',
        text: 'text-red-700 dark:text-red-400',
    },
    {
        code: 'RW',
        name: 'Rwanda',
        authority: 'RRA',
        system: 'EBM',
        bg: 'bg-blue-700/10 border-blue-500/30',
        text: 'text-blue-700 dark:text-blue-400',
    },
];

const ETIMS_FEATURES = [
    'Automatic eTIMS invoice submission on every sale',
    'KRA PIN and VSCU/OSCU mode configuration',
    'Real-time submission status on each receipt',
    'Offline queue — invoices submitted when connectivity returns',
    'Credit note and debit note support',
    'Turnover tax (TOT) and VAT invoice types',
    'PIN verification for buyers at point of sale',
    'eTIMS compliance dashboard with full submission logs',
];

const EFD_FEATURES = [
    'EFD-compliant fiscal receipt generation on every transaction',
    'TRA submission with real-time acknowledgement code',
    'Daily Z-report generation and submission to TRA',
    'EFD device serial number configuration',
    'Offline receipt buffering with automatic sync on reconnect',
    'VAT breakdowns printed on every fiscal receipt',
];

const EFRIS_FEATURES = [
    'EFRIS integration with URA portal sync per transaction',
    'Automatic e-invoice submission per sale',
    'Withholding tax certificate support',
    'EFRIS taxpayer identification number configuration',
    'Real-time submission status and error alerts',
    'Batch reconciliation for offline transactions',
];

const EBM_FEATURES = [
    'EBM device integration via USB and Bluetooth',
    'RRA-compliant receipt printing with fiscal stamp',
    'Automatic daily transaction summary report to RRA',
    'VAT invoice types A, B, and C supported',
    'EBM device status monitoring in the dashboard',
    'Error codes translated to plain-language alerts',
];

const WHY_COMPLIANCE = [
    {
        icon: Shield,
        label: 'Audit-ready',
        desc: 'Every submission logged with timestamp, status, and authority response code',
    },
    {
        icon: Zap,
        label: 'Automatic',
        desc: 'Compliance runs in the background — cashiers never have to think about it',
    },
    {
        icon: Wifi,
        label: 'Offline-safe',
        desc: 'Receipts queue locally and submit the moment connectivity is restored',
    },
    {
        icon: Globe,
        label: 'Multi-country',
        desc: 'Run branches across KE, TZ, UG, and RW from a single Upepo account',
    },
    {
        icon: RefreshCw,
        label: 'Always up to date',
        desc: 'We track authority API changes and push updates before mandatory deadlines',
    },
    {
        icon: Clock,
        label: 'Real-time status',
        desc: 'Submission confirmation or failure alert appears on screen instantly at checkout',
    },
];

// ─── 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 ─────────────────────────────────────────────────────────────────────

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

    return (
        <WebLayout>
            <Head title="Tax Compliance — 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="flex justify-center">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Tax Compliance · Fiscal Integration
                    </Badge>
                </motion.div>

                <motion.h1
                    {...rv(0.07)}
                    className="uf-display mx-auto mt-6 max-w-3xl text-center text-[2.55rem] leading-[1.07] font-extrabold tracking-tight text-foreground sm:text-5xl lg:text-[3.3rem]"
                >
                    Stay compliant.{' '}
                    <span className="text-primary">Every receipt.</span>{' '}
                    Every sale.
                </motion.h1>

                <motion.p
                    {...rv(0.13)}
                    className="mx-auto mt-6 max-w-xl text-center text-[1.04rem] leading-relaxed text-muted-foreground dark:text-white/50"
                >
                    Built-in fiscal compliance for East Africa — eTIMS, EFD,
                    EFRIS, and EBM run automatically in the background so you
                    never miss a submission or face a penalty. Compliance
                    happens at the point of sale, not after the fact.
                </motion.p>

                {/* Country tag row */}
                <motion.div
                    {...rv(0.19)}
                    className="mt-8 flex flex-wrap justify-center gap-3"
                >
                    {COUNTRIES.map(({ code, system, bg, text }) => (
                        <span
                            key={code}
                            className={`rounded-full border px-4 py-1.5 text-sm font-semibold ${bg} ${text}`}
                        >
                            {code} · {system}
                        </span>
                    ))}
                </motion.div>

                <motion.div
                    {...rv(0.25)}
                    className="mt-10 flex flex-wrap justify-center gap-3"
                >
                    <Button asChild size="xl">
                        <Link href="/contact">
                            Get compliance help <ArrowRight size={16} />
                        </Link>
                    </Button>
                    <Button asChild size="xl" variant="outline">
                        <Link href="/features">
                            All features <ChevronRight size={16} />
                        </Link>
                    </Button>
                </motion.div>
            </section>

            {/* ── FOUR COUNTRY CARDS ───────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)} className="mb-10 text-center">
                    <Badge
                        variant="lime"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Four countries
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        One POS. Four tax authorities. Zero manual work.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Upepo integrates natively with each country's fiscal
                        authority — automatic submission, real-time status,
                        and audit-ready logs for every transaction.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    {COUNTRIES.map(({ code, name, authority, system, bg, text }, i) => (
                        <motion.div key={code} {...rv(i * 0.08)}>
                            <Card className={`${G} h-full rounded-2xl`}>
                                <CardContent className="p-6">
                                    <div className="flex items-start justify-between">
                                        <span
                                            className={`uf-display rounded-md border px-3 py-1 text-xl font-extrabold ${bg} ${text}`}
                                        >
                                            {code}
                                        </span>
                                        <ShieldCheck
                                            size={18}
                                            className="mt-1 text-primary"
                                        />
                                    </div>
                                    <p className="mt-4 font-semibold text-foreground">
                                        {name}
                                    </p>
                                    <p className="mt-1 text-xs text-muted-foreground">
                                        {authority} · {system}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── KENYA eTIMS ──────────────────────────── */}
            <section
                className="mx-auto max-w-7xl px-4 py-16 sm:px-6"
                id="etims"
            >
                <motion.div {...rv(0)}>
                    <Card className={`${G} rounded-2xl`}>
                        <CardContent className="p-8 sm:p-12">
                            <div className="grid gap-10 lg:grid-cols-2 lg:items-start">
                                <div>
                                    <div className="mb-3 flex items-center gap-2">
                                        <Badge
                                            variant="brand"
                                            className="uf-display rounded-md px-2.5 py-0.5 text-sm font-extrabold"
                                        >
                                            KE
                                        </Badge>
                                        <Badge
                                            variant="lime"
                                            className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                        >
                                            Kenya eTIMS
                                        </Badge>
                                    </div>
                                    <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                        KRA eTIMS — automatic, every sale.
                                    </h2>
                                    <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                                        Upepo connects directly to KRA's eTIMS
                                        API. Every sale generates a
                                        KRA-compliant invoice submitted in real
                                        time. Support for both VSCU (cloud) and
                                        OSCU (on-premise) modes included with
                                        zero extra configuration.
                                    </p>
                                    <ul className="mt-6 space-y-3">
                                        {ETIMS_FEATURES.map((item) => (
                                            <li
                                                key={item}
                                                className="flex items-start gap-3 text-sm text-foreground/80"
                                            >
                                                <CheckCircle2
                                                    size={15}
                                                    className="mt-0.5 shrink-0 text-primary"
                                                />
                                                {item}
                                            </li>
                                        ))}
                                    </ul>
                                </div>

                                {/* eTIMS live log mock */}
                                <div className="rounded-xl border border-border/40 bg-background/60 p-5">
                                    <p className="mb-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                                        eTIMS Submission Log
                                    </p>
                                    <div className="space-y-2">
                                        {[
                                            { inv: 'INV-0841', time: '14:32:01', status: 'Accepted', ok: true },
                                            { inv: 'INV-0842', time: '14:38:17', status: 'Accepted', ok: true },
                                            { inv: 'INV-0843', time: '14:41:55', status: 'Queued',   ok: null },
                                            { inv: 'INV-0844', time: '14:45:02', status: 'Accepted', ok: true },
                                        ].map(({ inv, time, status, ok }) => (
                                            <div
                                                key={inv}
                                                className={`${GS} flex items-center justify-between rounded-lg px-4 py-2.5`}
                                            >
                                                <div>
                                                    <p className="text-xs font-medium text-foreground">
                                                        {inv}
                                                    </p>
                                                    <p className="text-[11px] text-muted-foreground">
                                                        {time}
                                                    </p>
                                                </div>
                                                <span
                                                    className={`rounded-md px-2 py-0.5 text-[11px] font-semibold ${
                                                        ok === true
                                                            ? 'bg-green-500/10 text-green-600 dark:text-green-400'
                                                            : 'bg-primary/10 text-primary'
                                                    }`}
                                                >
                                                    {status}
                                                </span>
                                            </div>
                                        ))}
                                    </div>
                                    <div className="mt-4 flex items-center gap-2">
                                        <KeyRound
                                            size={13}
                                            className="text-muted-foreground"
                                        />
                                        <p className="text-[11px] text-muted-foreground">
                                            KRA PIN: P051234567A · VSCU mode
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── TANZANIA EFD ─────────────────────────── */}
            <section
                className="mx-auto max-w-7xl px-4 py-16 sm:px-6"
                id="efd"
            >
                <motion.div {...rv(0)}>
                    <Card className={`${G} rounded-2xl`}>
                        <CardContent className="p-8 sm:p-12">
                            <div className="mb-3 flex items-center gap-2">
                                <Badge
                                    variant="brand"
                                    className="uf-display rounded-md px-2.5 py-0.5 text-sm font-extrabold"
                                >
                                    TZ
                                </Badge>
                                <Badge
                                    variant="lime"
                                    className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                >
                                    Tanzania EFD
                                </Badge>
                            </div>
                            <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                TRA EFD — fiscal receipts and Z-reports, automated.
                            </h2>
                            <p className="mt-4 max-w-xl text-sm leading-relaxed text-muted-foreground">
                                Upepo generates TRA-compliant Electronic Fiscal
                                Device receipts for every transaction, submits
                                them in real time, and handles daily Z-reports
                                automatically — keeping you fully compliant
                                with Tanzania Revenue Authority requirements.
                            </p>
                            <ul className="mt-6 grid gap-3 sm:grid-cols-2">
                                {EFD_FEATURES.map((item) => (
                                    <li
                                        key={item}
                                        className="flex items-start gap-3 text-sm text-foreground/80"
                                    >
                                        <CheckCircle2
                                            size={15}
                                            className="mt-0.5 shrink-0 text-primary"
                                        />
                                        {item}
                                    </li>
                                ))}
                            </ul>
                        </CardContent>
                    </Card>
                </motion.div>
            </section>

            {/* ── UGANDA EFRIS + RWANDA EBM (side by side) ── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <div className="grid gap-6 lg:grid-cols-2">
                    {/* Uganda EFRIS */}
                    <motion.div {...rv(0)} id="efris">
                        <Card className={`${G} h-full rounded-2xl`}>
                            <CardContent className="p-8">
                                <div className="mb-3 flex items-center gap-2">
                                    <Badge
                                        variant="brand"
                                        className="uf-display rounded-md px-2.5 py-0.5 text-sm font-extrabold"
                                    >
                                        UG
                                    </Badge>
                                    <Badge
                                        variant="lime"
                                        className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                    >
                                        Uganda EFRIS
                                    </Badge>
                                </div>
                                <h2 className="uf-display text-xl font-bold text-foreground">
                                    URA EFRIS — e-invoices synced to the portal.
                                </h2>
                                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                                    Upepo integrates with Uganda Revenue
                                    Authority's EFRIS system, generating and
                                    submitting e-invoices per transaction with
                                    full URA portal synchronisation.
                                </p>
                                <ul className="mt-5 space-y-3">
                                    {EFRIS_FEATURES.map((item) => (
                                        <li
                                            key={item}
                                            className="flex items-start gap-3 text-sm text-foreground/80"
                                        >
                                            <CheckCircle2
                                                size={14}
                                                className="mt-0.5 shrink-0 text-primary"
                                            />
                                            {item}
                                        </li>
                                    ))}
                                </ul>
                            </CardContent>
                        </Card>
                    </motion.div>

                    {/* Rwanda EBM */}
                    <motion.div {...rv(0.08)} id="ebm">
                        <Card className={`${G} h-full rounded-2xl`}>
                            <CardContent className="p-8">
                                <div className="mb-3 flex items-center gap-2">
                                    <Badge
                                        variant="brand"
                                        className="uf-display rounded-md px-2.5 py-0.5 text-sm font-extrabold"
                                    >
                                        RW
                                    </Badge>
                                    <Badge
                                        variant="lime"
                                        className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                    >
                                        Rwanda EBM
                                    </Badge>
                                </div>
                                <h2 className="uf-display text-xl font-bold text-foreground">
                                    RRA EBM — device integration, fully managed.
                                </h2>
                                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                                    Upepo connects to Rwanda Revenue Authority's
                                    Electronic Billing Machine — printing
                                    RRA-compliant fiscal receipts and sending
                                    daily transaction summaries automatically.
                                </p>
                                <ul className="mt-5 space-y-3">
                                    {EBM_FEATURES.map((item) => (
                                        <li
                                            key={item}
                                            className="flex items-start gap-3 text-sm text-foreground/80"
                                        >
                                            <CheckCircle2
                                                size={14}
                                                className="mt-0.5 shrink-0 text-primary"
                                            />
                                            {item}
                                        </li>
                                    ))}
                                </ul>
                            </CardContent>
                        </Card>
                    </motion.div>
                </div>
            </section>

            {/* ── WHY COMPLIANCE ───────────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)} className="mb-10 text-center">
                    <Badge
                        variant="brand"
                        className="rounded-full px-3.5 py-1.5 text-[11px] tracking-[0.14em] uppercase"
                    >
                        Built for compliance
                    </Badge>
                    <h2 className="uf-display mt-4 text-2xl font-extrabold tracking-tight text-foreground sm:text-3xl">
                        Why businesses choose Upepo for compliance.
                    </h2>
                    <p className="mx-auto mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
                        Compliance is not a feature you bolt on later — it is
                        built into every transaction from the start.
                    </p>
                </motion.div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {WHY_COMPLIANCE.map(({ icon: Icon, label, desc }, i) => (
                        <motion.div key={label} {...rv(i * 0.07)}>
                            <Card className={`${G} h-full rounded-2xl`}>
                                <CardContent className="p-6">
                                    <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
                                        <Icon
                                            size={20}
                                            className="text-primary"
                                        />
                                    </div>
                                    <h3 className="font-semibold text-foreground">
                                        {label}
                                    </h3>
                                    <p className="mt-1.5 text-sm leading-snug text-muted-foreground">
                                        {desc}
                                    </p>
                                </CardContent>
                            </Card>
                        </motion.div>
                    ))}
                </div>
            </section>

            {/* ── SETUP SUPPORT CALLOUT ────────────────── */}
            <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
                <motion.div {...rv(0)}>
                    <Card className={`${G} rounded-2xl`}>
                        <CardContent className="p-8 sm:p-12">
                            <div className="grid gap-8 lg:grid-cols-2 lg:items-center">
                                <div>
                                    <div className="mb-3 flex items-center gap-2">
                                        <FileText
                                            size={18}
                                            className="text-primary"
                                        />
                                        <Badge
                                            variant="lime"
                                            className="rounded-full px-3 py-0.5 text-[11px] tracking-[0.12em] uppercase"
                                        >
                                            Setup support
                                        </Badge>
                                    </div>
                                    <h2 className="uf-display text-xl font-bold text-foreground sm:text-2xl">
                                        We help you get compliant from day one.
                                    </h2>
                                    <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                                        Our team has set up fiscal compliance
                                        for businesses across Kenya, Tanzania,
                                        Uganda, and Rwanda. We handle KRA PIN
                                        configuration, device pairing, and test
                                        submissions — so you go live confident.
                                    </p>
                                    <ul className="mt-5 space-y-2.5">
                                        {[
                                            'KRA PIN and eTIMS VSCU/OSCU configuration',
                                            'EFD device pairing and TRA registration',
                                            'EFRIS taxpayer number setup',
                                            'EBM device integration and RRA testing',
                                            'Staff training on compliance workflows',
                                        ].map((item) => (
                                            <li
                                                key={item}
                                                className="flex items-start gap-3 text-sm text-foreground/80"
                                            >
                                                <CheckCircle2
                                                    size={14}
                                                    className="mt-0.5 shrink-0 text-primary"
                                                />
                                                {item}
                                            </li>
                                        ))}
                                    </ul>
                                </div>

                                <div className="flex flex-col gap-4">
                                    {[
                                        {
                                            icon: Printer,
                                            label: 'Fiscal receipt printing',
                                            sub: 'Thermal, Bluetooth, USB',
                                        },
                                        {
                                            icon: Zap,
                                            label: 'Real-time submission',
                                            sub: 'KRA · TRA · URA · RRA APIs',
                                        },
                                        {
                                            icon: ShieldCheck,
                                            label: 'Audit trail',
                                            sub: 'Every submission logged and searchable',
                                        },
                                    ].map(({ icon: Icon, label, sub }) => (
                                        <div
                                            key={label}
                                            className={`${GS} flex items-center gap-4 rounded-xl px-5 py-4`}
                                        >
                                            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10">
                                                <Icon
                                                    size={18}
                                                    className="text-primary"
                                                />
                                            </div>
                                            <div>
                                                <p className="text-sm font-semibold text-foreground">
                                                    {label}
                                                </p>
                                                <p className="text-xs text-muted-foreground">
                                                    {sub}
                                                </p>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </motion.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">
                        <div className="mb-4 flex flex-wrap justify-center gap-2">
                            {COUNTRIES.map(({ code, bg, text }) => (
                                <span
                                    key={code}
                                    className={`rounded-md border px-2.5 py-0.5 text-xs font-bold ${bg} ${text}`}
                                >
                                    {code}
                                </span>
                            ))}
                        </div>
                        <h2 className="uf-display mx-auto mt-2 max-w-2xl text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                            Need help with compliance setup?
                        </h2>
                        <p className="mx-auto mt-4 max-w-lg text-base text-white/45">
                            Our team will configure eTIMS, EFD, EFRIS, or EBM
                            for your business and get you live — fully
                            compliant from your very first sale.
                        </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-xl shadow-primary/30 transition hover:bg-primary/90"
                            >
                                Talk to our team <ArrowRight size={15} />
                            </Link>
                            <Link
                                href="/features/analytics"
                                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"
                            >
                                Analytics &amp; reports <ChevronRight size={15} />
                            </Link>
                        </div>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}