import { Badge } from '@/Components/ui/badge';
import WebLayout from '@/Layouts/Web/WebLayout';
import { Head } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';
import { ShieldCheck } 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 },
    };
}

// ─── section data ──────────────────────────────────────────────────────────────

const SECTIONS = [
    { id: 'introduction',       label: '1. Introduction' },
    { id: 'information',        label: '2. Information We Collect' },
    { id: 'use',                label: '3. How We Use Your Information' },
    { id: 'sharing',            label: '4. Data Sharing' },
    { id: 'retention',          label: '5. Data Retention' },
    { id: 'security',           label: '6. Security' },
    { id: 'rights',             label: '7. Your Rights' },
    { id: 'cookies',            label: '8. Cookies' },
    { id: 'contact',            label: '9. Contact' },
];

// ─── sub-components ────────────────────────────────────────────────────────────

function SectionHeading({ id, children }) {
    return (
        <h2
            id={id}
            className="uf-display scroll-mt-24 text-xl font-bold text-foreground md:text-2xl"
        >
            {children}
        </h2>
    );
}

function Prose({ children }) {
    return (
        <div className="mt-4 space-y-3 text-sm leading-relaxed text-muted-foreground">
            {children}
        </div>
    );
}

function BulletList({ items }) {
    return (
        <ul className="mt-3 list-disc space-y-1.5 pl-5">
            {items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    );
}

function Divider() {
    return <div className="border-t border-border" />;
}

// ─── page ──────────────────────────────────────────────────────────────────────

export default function Privacy() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="Privacy Policy — Upepo POS" />

            {/* ── Hero ─────────────────────────────────────────────────────── */}
            <section className="relative overflow-hidden pb-12 pt-28 md:pt-36">
                <div
                    aria-hidden
                    className="pointer-events-none absolute inset-0 -z-10"
                >
                    <div
                        className="absolute left-1/2 top-0 h-[400px] w-[600px] -translate-x-1/2 rounded-full opacity-15 blur-[100px]"
                        style={{ background: '#F26522' }}
                    />
                </div>

                <div className="mx-auto max-w-5xl px-4 sm:px-6">
                    <motion.div {...rv(0)} className="flex items-center gap-3">
                        <div className="flex size-10 items-center justify-center rounded-xl bg-primary/10">
                            <ShieldCheck size={20} className="text-primary" />
                        </div>
                        <Badge variant="brand">Legal</Badge>
                    </motion.div>

                    <motion.h1
                        {...rv(0.07)}
                        className="uf-display mt-4 text-4xl font-bold text-foreground md:text-5xl"
                    >
                        Privacy Policy
                    </motion.h1>

                    <motion.p {...rv(0.12)} className="mt-3 text-sm text-muted-foreground">
                        Last updated: <strong>March 2025</strong>
                    </motion.p>
                </div>
            </section>

            {/* ── Body ─────────────────────────────────────────────────────── */}
            <section className="mx-auto max-w-5xl px-4 pb-24 sm:px-6">
                <div className="flex gap-12">

                    {/* ── Sticky sidebar ───────────────────────────────────── */}
                    <aside className="hidden shrink-0 lg:block lg:w-56">
                        <div className={`sticky top-24 rounded-2xl p-5 ${G}`}>
                            <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                                Contents
                            </p>
                            <nav className="flex flex-col gap-1">
                                {SECTIONS.map((s) => (
                                    <a
                                        key={s.id}
                                        href={`#${s.id}`}
                                        className="rounded-lg px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-primary/10 hover:text-foreground"
                                    >
                                        {s.label}
                                    </a>
                                ))}
                            </nav>
                        </div>
                    </aside>

                    {/* ── Main prose ───────────────────────────────────────── */}
                    <div className="min-w-0 flex-1 space-y-10">

                        {/* 1. Introduction */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="introduction">
                                1. Introduction
                            </SectionHeading>
                            <Prose>
                                <p>
                                    Ufanisia Africa Ltd (&ldquo;Ufanisia&rdquo;,
                                    &ldquo;we&rdquo;, &ldquo;our&rdquo;, or
                                    &ldquo;us&rdquo;) operates the Upepo POS
                                    platform, a cloud-based point-of-sale and
                                    business management system designed for
                                    African businesses. We are committed to
                                    protecting the personal data of our
                                    customers, users, and visitors.
                                </p>
                                <p>
                                    This Privacy Policy explains how we collect,
                                    use, disclose, and protect information when
                                    you use our website at{' '}
                                    <strong>upepo.ufanisia.com</strong> or any
                                    of our associated services. By accessing or
                                    using Upepo POS, you agree to the practices
                                    described in this policy.
                                </p>
                                <p>
                                    This policy applies to all users of the
                                    Upepo platform, including business owners,
                                    administrators, cashiers, and visitors to
                                    our marketing website. If you do not agree
                                    with this policy, please discontinue use of
                                    our services.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 2. Information We Collect */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="information">
                                2. Information We Collect
                            </SectionHeading>
                            <Prose>
                                <p>
                                    We collect different categories of
                                    information depending on how you interact
                                    with our platform:
                                </p>
                                <p className="font-medium text-foreground">
                                    Account Data
                                </p>
                                <BulletList
                                    items={[
                                        'Full name, email address, phone number',
                                        'Business name, registration number, and address',
                                        'Role and permission level within your organisation',
                                        'Password (stored as a salted hash — never in plaintext)',
                                    ]}
                                />
                                <p className="font-medium text-foreground">
                                    Transaction Data
                                </p>
                                <BulletList
                                    items={[
                                        'Sales records, line items, quantities, and prices',
                                        'Payment method used (cash, M-Pesa, card, etc.)',
                                        'Receipts, refunds, and voids',
                                        'Purchase orders, supplier invoices, and goods received notes',
                                    ]}
                                />
                                <p className="font-medium text-foreground">
                                    Device &amp; Usage Data
                                </p>
                                <BulletList
                                    items={[
                                        'IP address, browser type, operating system',
                                        'Pages visited, features used, and session duration',
                                        'Error logs and performance metrics',
                                        'Device identifiers for offline-capable terminals',
                                    ]}
                                />
                                <p className="font-medium text-foreground">
                                    Compliance Data
                                </p>
                                <BulletList
                                    items={[
                                        'KRA PIN, TRA TIN, URA TIN, or RRA TIN',
                                        'eTIMS / EFD / EFRIS / EBM submission records',
                                        'Fiscal device serial numbers and signing keys',
                                        'Tax invoices and credit notes issued',
                                    ]}
                                />
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 3. How We Use Your Information */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="use">
                                3. How We Use Your Information
                            </SectionHeading>
                            <Prose>
                                <p>
                                    We use your information only for legitimate
                                    purposes directly related to providing and
                                    improving the Upepo POS service:
                                </p>
                                <BulletList
                                    items={[
                                        'Service delivery — processing sales, managing inventory, generating reports, and running your business operations',
                                        'Compliance — submitting transaction data to KRA, TRA, URA, or RRA as legally required in your jurisdiction',
                                        'Support — diagnosing issues, answering queries, and assisting with onboarding',
                                        'Analytics — understanding aggregate usage patterns to improve the platform (no individual profiling for marketing)',
                                        'Communication — sending product updates, security alerts, and billing notifications',
                                        'Security — detecting fraud, abuse, and unauthorised access attempts',
                                    ]}
                                />
                                <p>
                                    We do not use your data for targeted
                                    advertising, sell it to data brokers, or
                                    share it with third parties for their
                                    independent marketing purposes.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 4. Data Sharing */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="sharing">
                                4. Data Sharing
                            </SectionHeading>
                            <Prose>
                                <p>
                                    <strong className="text-foreground">
                                        We do not sell your data.
                                    </strong>{' '}
                                    We share information only in the following
                                    limited circumstances:
                                </p>
                                <p className="font-medium text-foreground">
                                    Payment Processors
                                </p>
                                <p>
                                    When you process payments via M-Pesa, Visa,
                                    or other channels, the relevant transaction
                                    details are shared with the payment provider
                                    solely to complete the transaction. We do
                                    not store full card numbers.
                                </p>
                                <p className="font-medium text-foreground">
                                    Tax Authorities (Legally Required)
                                </p>
                                <p>
                                    Transaction data is transmitted to KRA
                                    (Kenya), TRA (Tanzania), URA (Uganda), or
                                    RRA (Rwanda) as mandated by law in each
                                    jurisdiction. This sharing is a legal
                                    obligation, not a choice.
                                </p>
                                <p className="font-medium text-foreground">
                                    Cloud Infrastructure Providers
                                </p>
                                <p>
                                    We host Upepo POS on reputable cloud
                                    infrastructure. These providers process data
                                    on our behalf under strict data processing
                                    agreements and are prohibited from using
                                    your data for any purpose other than
                                    providing infrastructure services.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 5. Data Retention */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="retention">
                                5. Data Retention
                            </SectionHeading>
                            <Prose>
                                <p>
                                    We retain your data for as long as necessary
                                    to provide the service and meet our legal
                                    obligations:
                                </p>
                                <BulletList
                                    items={[
                                        'Active accounts — data is retained for the lifetime of your subscription plus 90 days after termination',
                                        'Post-termination — you have 90 days to export your data after cancelling. After this period, operational data is deleted.',
                                        'Compliance records — tax invoices and fiscal submission records are retained for 7 years as required by local tax law in Kenya, Tanzania, Uganda, and Rwanda',
                                        'Support tickets — retained for 2 years to assist with recurring issues',
                                        'Aggregated analytics — anonymised and may be retained indefinitely',
                                    ]}
                                />
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 6. Security */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="security">
                                6. Security
                            </SectionHeading>
                            <Prose>
                                <p>
                                    Protecting your data is a core
                                    responsibility we take seriously. Our
                                    security practices include:
                                </p>
                                <BulletList
                                    items={[
                                        'Encryption in transit — all data transmitted between your device and our servers uses TLS 1.2 or higher',
                                        'Encryption at rest — databases and backups are encrypted using AES-256',
                                        'Access controls — role-based access ensures employees only access data necessary for their role',
                                        'SOC 2-aligned practices — we follow industry best practices for availability, confidentiality, and integrity',
                                        'Regular penetration testing — third-party security assessments on a regular schedule',
                                        'Breach notification — in the event of a data breach affecting your data, we will notify you within 72 hours of becoming aware, as required by applicable law',
                                    ]}
                                />
                                <p>
                                    While we implement strong safeguards, no
                                    system is completely impenetrable. We
                                    encourage you to use strong, unique
                                    passwords and to report any suspicious
                                    activity to{' '}
                                    <a
                                        href="mailto:security@ufanisia.com"
                                        className="text-primary underline underline-offset-4"
                                    >
                                        security@ufanisia.com
                                    </a>
                                    .
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 7. Your Rights */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="rights">
                                7. Your Rights
                            </SectionHeading>
                            <Prose>
                                <p>
                                    Subject to applicable law and compliance
                                    obligations, you have the following rights
                                    regarding your personal data:
                                </p>
                                <BulletList
                                    items={[
                                        'Access — request a copy of the personal data we hold about you',
                                        'Correction — request correction of inaccurate or incomplete data',
                                        'Deletion — request deletion of your data, subject to legal retention requirements (e.g. tax records cannot be deleted before the statutory period)',
                                        'Portability — export your business data (products, sales, customers) in standard formats (CSV, Excel, JSON)',
                                        'Restriction — request that we restrict processing of your data in certain circumstances',
                                        'Objection — object to processing based on legitimate interests',
                                    ]}
                                />
                                <p>
                                    To exercise any of these rights, contact us
                                    at{' '}
                                    <a
                                        href="mailto:privacy@ufanisia.com"
                                        className="text-primary underline underline-offset-4"
                                    >
                                        privacy@ufanisia.com
                                    </a>
                                    . We will respond within 30 days.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 8. Cookies */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="cookies">
                                8. Cookies
                            </SectionHeading>
                            <Prose>
                                <p>
                                    We use cookies and similar technologies to
                                    operate and improve Upepo POS. The types
                                    of cookies we use are:
                                </p>
                                <BulletList
                                    items={[
                                        'Session cookies — required to keep you logged in during a session. These are deleted when you close your browser.',
                                        'Preference cookies — remember your settings such as language, currency, and display preferences',
                                        'Analytics cookies — anonymised data on how users interact with the platform, used to improve the product. You can opt out of analytics cookies in your account settings.',
                                    ]}
                                />
                                <p>
                                    We do not use cookies to serve targeted
                                    advertising. You can manage cookies through
                                    your browser settings, though disabling
                                    session cookies will prevent you from
                                    logging in.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 9. Contact */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="contact">
                                9. Contact
                            </SectionHeading>
                            <Prose>
                                <p>
                                    If you have questions, concerns, or
                                    requests relating to this Privacy Policy or
                                    our data practices, please reach out to us:
                                </p>
                                <div className={`mt-4 rounded-xl p-5 ${G}`}>
                                    <p className="font-semibold text-foreground">
                                        Ufanisia Africa Ltd
                                    </p>
                                    <p className="mt-1">
                                        Privacy Team
                                    </p>
                                    <p>
                                        <a
                                            href="mailto:privacy@ufanisia.com"
                                            className="text-primary underline underline-offset-4"
                                        >
                                            privacy@ufanisia.com
                                        </a>
                                    </p>
                                    <p className="mt-2">Nairobi, Kenya</p>
                                </div>
                                <p>
                                    We aim to respond to all privacy enquiries
                                    within 5 business days. For urgent security
                                    concerns, email{' '}
                                    <a
                                        href="mailto:security@ufanisia.com"
                                        className="text-primary underline underline-offset-4"
                                    >
                                        security@ufanisia.com
                                    </a>
                                    .
                                </p>
                            </Prose>
                        </motion.section>

                    </div>
                </div>
            </section>
        </WebLayout>
    );
}
