import { useState } from 'react';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import WebLayout from '@/Layouts/Web/WebLayout';
import { Head, Link } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';
import {
    ChevronDown,
    HelpCircle,
    Mail,
} from 'lucide-react';

// ─── glass shorthand ───────────────────────────────────────────────────────────

const G =
    'border border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]';

// ─── animation helper ──────────────────────────────────────────────────────────

function reveal(delay = 0, reduced = false) {
    return {
        initial: reduced ? {} : { opacity: 0, y: 22 },
        whileInView: { opacity: 1, y: 0 },
        viewport: { once: true, amount: 0.1 },
        transition: { duration: 0.55, ease: [0.25, 0.1, 0.25, 1], delay },
    };
}

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

const FAQ_SECTIONS = [
    {
        category: 'Getting Started',
        badge: 'brand',
        items: [
            {
                q: 'How quickly can I set up Upepo POS?',
                a: 'Most businesses are up and running within a day. Our onboarding wizard guides you through adding products, configuring payment methods, and training your cashiers.',
            },
            {
                q: 'Do I need internet to use Upepo POS?',
                a: 'No. Upepo is offline-first. All sales, inventory updates, and receipts work without internet. Data syncs automatically when you reconnect.',
            },
            {
                q: 'Can I import my existing products?',
                a: 'Yes. We support bulk import via Excel/CSV. Download our template, fill it in, and upload — your entire catalog is live in minutes.',
            },
        ],
    },
    {
        category: 'Pricing & Plans',
        badge: 'lime',
        items: [
            {
                q: 'Is there a free trial?',
                a: 'Yes. We offer a 14-day free trial on all plans — no credit card required. Upgrade when you\'re ready.',
            },
            {
                q: 'Can I change plans later?',
                a: 'Absolutely. You can upgrade or downgrade at any time. Changes take effect at the next billing cycle.',
            },
            {
                q: 'Do you offer discounts for multiple locations?',
                a: 'Yes. Enterprise plan includes unlimited locations. Contact us for custom pricing if you have more than 5 locations.',
            },
        ],
    },
    {
        category: 'Compliance',
        badge: 'brand',
        items: [
            {
                q: 'Which tax authorities do you support?',
                a: 'We support KRA eTIMS (Kenya), TRA EFD (Tanzania), URA EFRIS (Uganda), and RRA EBM (Rwanda). More jurisdictions coming.',
            },
            {
                q: 'Do I need to buy additional hardware for compliance?',
                a: 'Not necessarily. eTIMS can run in OSCU (software-only) mode. EFD, EFRIS, and EBM may require approved fiscal devices — we can advise during onboarding.',
            },
            {
                q: 'What happens if a compliance submission fails?',
                a: 'Failed submissions are queued and retried automatically. You can also manually retry from the compliance dashboard. All receipts remain valid locally.',
            },
        ],
    },
    {
        category: 'Technical',
        badge: 'lime',
        items: [
            {
                q: 'What devices does Upepo POS support?',
                a: 'Upepo runs on any modern browser (Chrome, Edge, Firefox) on Windows, macOS, Android tablets, and iPads. No app download needed.',
            },
            {
                q: 'How is my data backed up?',
                a: 'All data syncs to our secure cloud when online. We maintain daily backups with 30-day retention. Your data is always yours.',
            },
            {
                q: 'Can multiple cashiers use the system simultaneously?',
                a: 'Yes. Multiple cashiers can operate simultaneously on different terminals. Each cashier has their own PIN and session.',
            },
        ],
    },
];

// ─── sub-components ────────────────────────────────────────────────────────────

function FaqItem({ q, a }) {
    const [open, setOpen] = useState(false);
    return (
        <div
            className={`rounded-xl p-5 cursor-pointer ${G}`}
            onClick={() => setOpen(!open)}
        >
            <div className="flex items-center justify-between gap-4">
                <p className="font-semibold text-foreground">{q}</p>
                <ChevronDown
                    size={16}
                    className={`shrink-0 text-muted-foreground transition-transform ${open ? 'rotate-180' : ''}`}
                />
            </div>
            {open && (
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                    {a}
                </p>
            )}
        </div>
    );
}

function FaqSection({ section, sectionIndex, rv }) {
    return (
        <motion.div {...rv(0.05 * sectionIndex)} className="flex flex-col gap-3">
            <div className="flex items-center gap-3 pb-1">
                <Badge variant={section.badge}>{section.category}</Badge>
                <div className="h-px flex-1 bg-border" />
            </div>
            {section.items.map((item) => (
                <FaqItem key={item.q} q={item.q} a={item.a} />
            ))}
        </motion.div>
    );
}

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

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

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

            {/* ── Hero ─────────────────────────────────────────────────────── */}
            <section className="relative overflow-hidden pb-16 pt-28 md:pb-20 md:pt-36">
                {/* background glow */}
                <div
                    aria-hidden
                    className="pointer-events-none absolute inset-0 -z-10"
                >
                    <div
                        className="absolute left-1/2 top-0 h-[480px] w-[700px] -translate-x-1/2 rounded-full opacity-20 blur-[110px]"
                        style={{ background: '#C5DC1C' }}
                    />
                </div>

                <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
                    <motion.div {...rv(0)}>
                        <Badge variant="lime" className="mb-4">
                            Got questions?
                        </Badge>
                    </motion.div>

                    <motion.h1
                        {...rv(0.07)}
                        className="uf-display text-4xl font-bold leading-tight text-foreground md:text-5xl lg:text-6xl"
                    >
                        Frequently Asked{' '}
                        <span className="text-primary">Questions</span>
                    </motion.h1>

                    <motion.p
                        {...rv(0.14)}
                        className="mx-auto mt-5 max-w-xl text-lg text-muted-foreground"
                    >
                        Everything you want to know about Upepo POS — from setup
                        to compliance to billing.
                    </motion.p>
                </div>
            </section>

            {/* ── FAQ sections ─────────────────────────────────────────────── */}
            <section className="mx-auto max-w-3xl px-4 pb-16 sm:px-6 md:pb-24">
                <div className="flex flex-col gap-10">
                    {FAQ_SECTIONS.map((section, i) => (
                        <FaqSection
                            key={section.category}
                            section={section}
                            sectionIndex={i}
                            rv={rv}
                        />
                    ))}
                </div>
            </section>

            {/* ── CTA banner ───────────────────────────────────────────────── */}
            <section className="mx-auto max-w-3xl px-4 pb-24 sm:px-6">
                <motion.div
                    {...rv(0.1)}
                    className={`flex flex-col items-center gap-6 rounded-2xl p-10 text-center ${G}`}
                >
                    <div className="flex size-14 items-center justify-center rounded-2xl bg-primary/10">
                        <HelpCircle size={26} className="text-primary" />
                    </div>

                    <div>
                        <h2 className="uf-display text-2xl font-bold text-foreground md:text-3xl">
                            Still have questions?
                        </h2>
                        <p className="mt-2 text-muted-foreground">
                            Our team is happy to help. Reach out and we'll get
                            back to you within one business day.
                        </p>
                    </div>

                    <div className="flex flex-col gap-3 sm:flex-row">
                        <Button asChild size="lg">
                            <Link href="/contact">Contact Us</Link>
                        </Button>
                        <Button asChild size="lg" variant="outline">
                            <a href="mailto:hello@ufanisia.com">
                                <Mail size={16} />
                                hello@ufanisia.com
                            </a>
                        </Button>
                    </div>
                </motion.div>
            </section>
        </WebLayout>
    );
}