import Seo from '@/components/Seo';
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import {
    ArrowRight,
    Book,
    HelpCircle,
    Mail,
    MessageCircle,
    Search,
    Shield,
    Terminal,
    Zap,
} from 'lucide-react';
import { useRef } from 'react';

const ease = [0.16, 1, 0.3, 1] as const;

function FadeUp({
    children,
    delay = 0,
    className,
}: {
    children: React.ReactNode;
    delay?: number;
    className?: string;
}) {
    const ref = useRef<HTMLDivElement>(null);
    const inView = useInView(ref, { once: true, margin: '-60px' });
    return (
        <motion.div
            ref={ref}
            initial={{ opacity: 0, y: 28 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.65, delay, ease }}
            className={className}
        >
            {children}
        </motion.div>
    );
}

const supportCards = [
    {
        icon: Book,
        title: 'Help Centre',
        desc: 'Searchable articles covering every feature, from loan setup to period-end closing. Available 24/7 with step-by-step guides.',
        cta: 'Browse articles',
        href: '#',
        chip: 'Docs',
    },
    {
        icon: Mail,
        title: 'Email Support',
        desc: 'Email our support team. Starter plans: within 24 hours. Professional: within 4 hours.',
        cta: 'Send a message',
        href: 'mailto:support@upepofinance.com',
        chip: '4h SLA',
    },
    {
        icon: MessageCircle,
        title: 'Live Chat',
        desc: 'Professional and Enterprise plans get live chat support during East African business hours.',
        cta: 'Start a chat',
        href: '#',
        chip: 'Pro+',
    },
];

const statusServices = [
    'API Gateway',
    'Loan Engine',
    'Payments',
    'Reports Cluster',
    'Background Jobs',
];

const faqs = [
    {
        q: 'How do I get started after signing up?',
        a: "After registration your portal is provisioned automatically, usually within 60 seconds. You'll see an onboarding checklist with 10 steps: branding, COA setup, loan product creation, and adding your first client. Each step links directly to the relevant screen.",
    },
    {
        q: 'Can I import data from my existing system or spreadsheets?',
        a: 'Yes. Professional and Enterprise plans include data migration assistance. We support CSV imports for clients, loan history, savings accounts, and chart of accounts. Our onboarding team will guide you through the process.',
    },
    {
        q: 'How does multi-branch access work?',
        a: "Each user can be scoped to one or more branches. Branch Managers see only their branch's data. Tenant Admins and Accountants can see all branches. You configure branch access per user in Settings → Users.",
    },
    {
        q: 'How does M-Pesa integration work for loan repayments?',
        a: 'Clients can pay directly from the client portal using M-Pesa STK push. Alternatively, your tellers can record M-Pesa payments manually. Incoming M-Pesa webhooks auto-post payments when the reference number matches a loan.',
    },
    {
        q: "What happens if I exceed my plan's client or loan limits?",
        a: "You'll receive warning notifications at 80% and 95% of any limit. Once the limit is reached, new records cannot be created until you upgrade. Existing data is always preserved and accessible.",
    },
    {
        q: 'Is the system available in Swahili?',
        a: 'English is the current default. Swahili localisation is on our roadmap for Phase 2. The platform already supports East African currencies (TZS, KES, UGX, RWF) and country-specific statutory deductions.',
    },
    {
        q: 'How are accounting entries created? Do we need an accountant?',
        a: 'The chart of accounts is seeded automatically when you sign up based on your country selection. An IFRS-compliant structure is ready out of the box. Every loan, savings, and payroll transaction auto-posts the correct double-entry journal entry. You can customise the COA at any time.',
    },
    {
        q: 'Can we use our own domain name?',
        a: "Yes, on Professional and Enterprise plans. You add a CNAME record pointing your domain to our platform, and we automatically provision an SSL certificate via Let's Encrypt. Your staff portal becomes accessible at your custom domain.",
    },
    {
        q: 'How do I contact support for an urgent issue?',
        a: 'Professional plan customers can use live chat during business hours (Mon–Fri, 08:00–18:00 EAT) or email support@upepofinance.com marked URGENT. Enterprise customers have a dedicated support contact and SLA with guaranteed response times.',
    },
    {
        q: 'Can I cancel my subscription at any time?',
        a: 'Yes. Cancel from Settings, then Billing, at any time. Your portal remains active until the end of the paid period. After cancellation, data is retained in read-only mode for 90 days before permanent deletion, giving you time to export everything.',
    },
];

export default function Support() {
    return (
        <PlatformLayout>
            <Seo
                title="Support"
                description="Get help from the Upepo Finance team. Contact support or browse our resources."
            />

            {/* Hero */}
            <section className="relative overflow-hidden pt-32 pb-20">
                <div className="pointer-events-none absolute inset-0 overflow-hidden">
                    <div
                        className="pf-blob pf-blob-1 absolute -top-24 left-1/4 h-[420px] w-[420px] opacity-20"
                        style={{
                            background:
                                'radial-gradient(circle, hsl(var(--primary) / 0.45), transparent 70%)',
                        }}
                    />
                    <div
                        className="pf-blob pf-blob-2 absolute top-0 right-1/3 h-[320px] w-[320px] opacity-10"
                        style={{
                            background:
                                'radial-gradient(circle, hsl(var(--accent) / 0.4), transparent 70%)',
                        }}
                    />
                </div>
                <div className="pf-container relative z-10 text-center">
                    <FadeUp delay={0.1}>
                        <h1 className="pf-display text-foreground mb-4 text-4xl font-bold md:text-5xl lg:text-6xl">
                            We're here to{' '}
                            <span className="pf-gradient-text">help you</span>
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <p className="text-muted-foreground mx-auto mb-10 max-w-xl text-lg">
                            Search our help centre, contact the team, or browse
                            answers to the most common questions below.
                        </p>
                    </FadeUp>

                    {/* Search bar */}
                    <FadeUp delay={0.3}>
                        <motion.div
                            whileHover={{ scale: 1.01 }}
                            transition={{ duration: 0.2 }}
                            className="border-border bg-card hover:border-primary/30 mx-auto flex max-w-xl cursor-text items-center gap-3 rounded-2xl border px-4 py-3.5 shadow-sm transition-all hover:shadow-md"
                        >
                            <Search className="text-muted-foreground/60 h-4 w-4 shrink-0" />
                            <span className="text-muted-foreground/50 flex-1 text-left text-sm">
                                Search articles, tutorials, FAQs…
                            </span>
                            <kbd className="border-border bg-secondary/60 text-muted-foreground rounded-lg border px-2 py-1 text-[10px] font-semibold">
                                ⌘K
                            </kbd>
                        </motion.div>
                    </FadeUp>
                </div>
            </section>

            {/* System status strip */}
            <div className="border-border bg-muted/60 border-y py-3">
                <div className="pf-container">
                    <div className="flex items-center gap-6 overflow-x-auto">
                        <div className="flex shrink-0 items-center gap-2">
                            <div className="pf-live" />
                            <span className="text-primary text-[10px] font-bold">
                                All Systems Operational
                            </span>
                        </div>
                        {statusServices.map((s) => (
                            <div
                                key={s}
                                className="flex shrink-0 items-center gap-1.5"
                            >
                                <div className="bg-primary/70 h-1.5 w-1.5 rounded-full" />
                                <span className="text-muted-foreground text-[10px]">
                                    {s}
                                </span>
                            </div>
                        ))}
                        <a
                            href="#"
                            className="text-primary ml-auto shrink-0 text-[10px] font-semibold hover:underline"
                        >
                            Status page →
                        </a>
                    </div>
                </div>
            </div>

            {/* Support cards */}
            <section className="pf-section">
                <div className="pf-container">
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
                        {supportCards.map((card, i) => (
                            <FadeUp key={card.title} delay={i * 0.1}>
                                <motion.div
                                    whileHover={{ y: -6, scale: 1.01 }}
                                    transition={{
                                        duration: 0.25,
                                        ease: [0.34, 1.06, 0.64, 1],
                                    }}
                                    className="pf-card flex h-full flex-col p-6"
                                >
                                    <div className="mb-5 flex items-center justify-between">
                                        <div className="pf-icon-box">
                                            <card.icon className="h-5 w-5" />
                                        </div>
                                        <span className="pf-chip text-[9px]">
                                            {card.chip}
                                        </span>
                                    </div>
                                    <h3 className="text-foreground mb-2 text-lg font-semibold">
                                        {card.title}
                                    </h3>
                                    <p className="text-muted-foreground mb-6 flex-1 text-sm leading-relaxed">
                                        {card.desc}
                                    </p>
                                    <a
                                        href={card.href}
                                        className="pf-btn-ghost inline-flex w-full items-center justify-center gap-2"
                                    >
                                        {card.cta}{' '}
                                        <ArrowRight className="h-3.5 w-3.5" />
                                    </a>
                                </motion.div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Onboarding timeline */}
            <section className="pf-section pf-section-tint">
                <div className="pf-container">
                    <FadeUp className="mb-14 text-center">
                        <h2 className="pf-display text-foreground mb-4 text-3xl font-bold">
                            Up and running in minutes
                        </h2>
                        <p className="text-muted-foreground mx-auto max-w-xl">
                            From signup to first disbursement. Here is what
                            happens when you start your trial.
                        </p>
                    </FadeUp>
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
                        {[
                            {
                                step: '01',
                                icon: Terminal,
                                title: 'Instant provisioning',
                                desc: 'Your dedicated database and tenant portal are created automatically within 60 seconds of signup. No waiting, no manual steps.',
                            },
                            {
                                step: '02',
                                icon: Zap,
                                title: 'Guided onboarding',
                                desc: '10-step checklist guides you through branding, COA setup, loan product creation, and adding your first client, with each step linked to the relevant screen.',
                            },
                            {
                                step: '03',
                                icon: Shield,
                                title: 'Migration support',
                                desc: 'Professional and Enterprise plans include hands-on data migration assistance. We handle client, loan, and COA imports from spreadsheets or legacy systems.',
                            },
                        ].map((item, i) => (
                            <FadeUp key={item.step} delay={i * 0.12}>
                                <div className="pf-card h-full p-6">
                                    <div className="mb-4 flex items-center gap-3">
                                        <span className="pf-display text-primary/20 text-3xl font-bold">
                                            {item.step}
                                        </span>
                                        <div className="pf-icon-box">
                                            <item.icon className="h-5 w-5" />
                                        </div>
                                    </div>
                                    <h3 className="text-foreground mb-2 text-base font-semibold">
                                        {item.title}
                                    </h3>
                                    <p className="text-muted-foreground text-sm leading-relaxed">
                                        {item.desc}
                                    </p>
                                </div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* FAQ */}
            <section className="pf-section">
                <div className="pf-container">
                    <FadeUp className="mb-12 text-center">
                        <h2 className="pf-display text-foreground mb-4 text-3xl font-bold">
                            Frequently asked questions
                        </h2>
                        <p className="text-muted-foreground mx-auto max-w-xl text-sm">
                            Can't find what you're looking for?{' '}
                            <a
                                href="mailto:support@upepofinance.com"
                                className="text-primary font-medium underline underline-offset-2 hover:opacity-80"
                            >
                                support@upepofinance.com
                            </a>
                        </p>
                    </FadeUp>
                    <FadeUp className="mx-auto max-w-3xl">
                        <Accordion
                            type="single"
                            collapsible
                            className="space-y-3"
                        >
                            {faqs.map((faq, i) => (
                                <AccordionItem
                                    key={i}
                                    value={`faq-${i}`}
                                    className="pf-card overflow-hidden border-0 px-0"
                                >
                                    <AccordionTrigger className="text-foreground hover:text-primary px-6 py-5 text-left text-sm font-semibold hover:no-underline">
                                        {faq.q}
                                    </AccordionTrigger>
                                    <AccordionContent className="text-muted-foreground px-6 pb-5 text-sm leading-relaxed">
                                        {faq.a}
                                    </AccordionContent>
                                </AccordionItem>
                            ))}
                        </Accordion>
                    </FadeUp>
                </div>
            </section>

            {/* CTA */}
            <section className="pf-section pf-section-dark">
                <div className="pf-container text-center">
                    <FadeUp>
                        <div className="pf-icon-box mx-auto mb-6 h-16 w-16">
                            <HelpCircle className="h-8 w-8" />
                        </div>
                        <h2 className="pf-display mb-3 text-2xl font-bold md:text-3xl">
                            Still need help?
                        </h2>
                        <p className="mx-auto mb-10 max-w-sm text-sm opacity-80">
                            Our support team is available Monday to Friday,
                            08:00–18:00 East Africa Time.
                        </p>
                        <div className="flex flex-wrap justify-center gap-4">
                            <a
                                href="mailto:support@upepofinance.com"
                                className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                Contact Support <Mail className="h-4 w-4" />
                            </a>
                            <Link
                                href="/pricing"
                                className="pf-btn-ghost inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                View plans
                            </Link>
                        </div>
                    </FadeUp>
                </div>
            </section>
        </PlatformLayout>
    );
}