import { Badge } from '@/Components/ui/badge';
import WebLayout from '@/Layouts/Web/WebLayout';
import { Head } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';
import { ScrollText } 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: 'acceptance',      label: '1. Acceptance of Terms' },
    { id: 'description',     label: '2. Description of Service' },
    { id: 'account',         label: '3. Account Registration & Security' },
    { id: 'billing',         label: '4. Subscription & Billing' },
    { id: 'acceptable-use',  label: '5. Acceptable Use' },
    { id: 'data-privacy',    label: '6. Data & Privacy' },
    { id: 'ip',              label: '7. Intellectual Property' },
    { id: 'liability',       label: '8. Limitation of Liability' },
    { id: 'termination',     label: '9. Termination' },
    { id: 'governing-law',   label: '10. Governing Law' },
    { id: 'changes',         label: '11. Changes to Terms' },
    { id: 'contact',         label: '12. 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 Terms() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="Terms & Conditions — 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: '#C5DC1C' }}
                    />
                </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">
                            <ScrollText size={20} className="text-primary" />
                        </div>
                        <Badge variant="lime">Legal</Badge>
                    </motion.div>

                    <motion.h1
                        {...rv(0.07)}
                        className="uf-display mt-4 text-4xl font-bold text-foreground md:text-5xl"
                    >
                        Terms &amp; Conditions
                    </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. Acceptance of Terms */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="acceptance">
                                1. Acceptance of Terms
                            </SectionHeading>
                            <Prose>
                                <p>
                                    These Terms &amp; Conditions
                                    (&ldquo;Terms&rdquo;) constitute a legally
                                    binding agreement between you
                                    (&ldquo;Customer&rdquo;, &ldquo;you&rdquo;,
                                    or &ldquo;your&rdquo;) and Ufanisia Africa
                                    Ltd (&ldquo;Ufanisia&rdquo;,
                                    &ldquo;we&rdquo;, or &ldquo;us&rdquo;)
                                    governing your access to and use of the
                                    Upepo POS platform and related services.
                                </p>
                                <p>
                                    By creating an account, clicking
                                    &ldquo;Agree&rdquo;, or by accessing or
                                    using the Service, you confirm that you have
                                    read, understood, and agree to be bound by
                                    these Terms. If you do not agree to these
                                    Terms, do not use the Service.
                                </p>
                                <p>
                                    If you are accepting these Terms on behalf
                                    of a company or other legal entity, you
                                    represent and warrant that you have the
                                    authority to bind that entity to these Terms.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 2. Description of Service */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="description">
                                2. Description of Service
                            </SectionHeading>
                            <Prose>
                                <p>
                                    Upepo POS is a software-as-a-service (SaaS)
                                    platform that provides point-of-sale,
                                    inventory management, purchasing, compliance
                                    filing, and reporting tools for retail and
                                    hospitality businesses operating in Africa.
                                </p>
                                <p>
                                    <strong className="text-foreground">
                                        Upepo POS is not a financial service.
                                    </strong>{' '}
                                    We do not hold, process, or transmit funds
                                    on your behalf. Payment processing is
                                    handled directly by third-party payment
                                    providers (e.g. Safaricom M-Pesa, card
                                    networks). We provide the interface and
                                    reconciliation tools; we are not a payment
                                    institution.
                                </p>
                                <p>
                                    We reserve the right to modify, suspend, or
                                    discontinue any part of the Service at any
                                    time, with reasonable notice where
                                    practicable. We will not be liable to you
                                    or any third party for modifications,
                                    suspension, or discontinuation of the
                                    Service.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 3. Account Registration & Security */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="account">
                                3. Account Registration &amp; Security
                            </SectionHeading>
                            <Prose>
                                <p>
                                    To use Upepo POS, you must register for an
                                    account and provide accurate, complete, and
                                    current information. You agree to keep this
                                    information up to date.
                                </p>
                                <p>
                                    You are responsible for:
                                </p>
                                <BulletList
                                    items={[
                                        'Maintaining the confidentiality of your account credentials',
                                        'All activity that occurs under your account, including actions taken by your employees, cashiers, and administrators',
                                        'Notifying us immediately at security@ufanisia.com if you suspect unauthorised access to your account',
                                        'Ensuring that all users of your account comply with these Terms',
                                    ]}
                                />
                                <p>
                                    You must not share your account credentials
                                    with anyone outside your organisation. Each
                                    user in your organisation should have their
                                    own named account or PIN-based cashier
                                    profile.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 4. Subscription & Billing */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="billing">
                                4. Subscription &amp; Billing
                            </SectionHeading>
                            <Prose>
                                <p>
                                    Upepo POS is offered on a subscription
                                    basis. Subscription fees are billed monthly
                                    or annually, depending on the plan you
                                    choose, and are due in advance.
                                </p>
                                <p className="font-medium text-foreground">
                                    Free Trial
                                </p>
                                <p>
                                    We offer a 14-day free trial on all paid
                                    plans. No credit card is required to start
                                    a trial. At the end of the trial period,
                                    you must subscribe to continue using the
                                    Service. Trial data is preserved when you
                                    upgrade.
                                </p>
                                <p className="font-medium text-foreground">
                                    Auto-Renewal
                                </p>
                                <p>
                                    Subscriptions renew automatically at the
                                    end of each billing period unless you
                                    cancel before the renewal date. You can
                                    manage or cancel your subscription from
                                    your billing dashboard at any time.
                                </p>
                                <p className="font-medium text-foreground">
                                    Refunds
                                </p>
                                <p>
                                    We offer a 30-day money-back guarantee on
                                    new subscriptions. If you are not satisfied
                                    within the first 30 days of your paid
                                    subscription, contact us at{' '}
                                    <a
                                        href="mailto:billing@ufanisia.com"
                                        className="text-primary underline underline-offset-4"
                                    >
                                        billing@ufanisia.com
                                    </a>{' '}
                                    for a full refund. After 30 days,
                                    subscription fees are non-refundable except
                                    where required by law.
                                </p>
                                <p className="font-medium text-foreground">
                                    Price Changes
                                </p>
                                <p>
                                    We may change subscription pricing with at
                                    least 30 days' notice. Price changes take
                                    effect at your next renewal date.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 5. Acceptable Use */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="acceptable-use">
                                5. Acceptable Use
                            </SectionHeading>
                            <Prose>
                                <p>
                                    You agree to use Upepo POS only for lawful
                                    business purposes in accordance with these
                                    Terms and all applicable laws and
                                    regulations.
                                </p>
                                <p>
                                    You must not:
                                </p>
                                <BulletList
                                    items={[
                                        'Use the Service to process illegal transactions, facilitate money laundering, or evade taxes',
                                        'Resell, sublicense, or otherwise make the Service available to third parties without our written consent',
                                        'Reverse engineer, decompile, or attempt to extract the source code of the platform',
                                        'Use automated tools to scrape, crawl, or extract data from the Service beyond what is offered through official export features',
                                        'Upload or transmit malware, viruses, or any malicious code',
                                        'Attempt to gain unauthorised access to other customers\' accounts or data',
                                        'Use the Service in a manner that could damage, overload, or impair our infrastructure',
                                        'Misrepresent your identity or affiliation when using the Service',
                                    ]}
                                />
                                <p>
                                    We reserve the right to suspend or terminate
                                    your account immediately and without notice
                                    if we determine, in our reasonable
                                    discretion, that you have violated these
                                    acceptable use obligations.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 6. Data & Privacy */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="data-privacy">
                                6. Data &amp; Privacy
                            </SectionHeading>
                            <Prose>
                                <p>
                                    Your use of the Service is also governed by
                                    our Privacy Policy, which is incorporated
                                    into these Terms by reference. By using the
                                    Service, you consent to our collection, use,
                                    and sharing of your information as described
                                    in the Privacy Policy.
                                </p>
                                <p>
                                    You retain ownership of all business data
                                    you input into Upepo POS — products,
                                    customers, sales records, and financial
                                    data. We act as a data processor on your
                                    behalf. You are responsible for ensuring
                                    that your use of our platform complies with
                                    applicable data protection laws in your
                                    jurisdiction, including the Kenya Data
                                    Protection Act (2019) and equivalent
                                    legislation in other countries.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 7. Intellectual Property */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="ip">
                                7. Intellectual Property
                            </SectionHeading>
                            <Prose>
                                <p>
                                    <strong className="text-foreground">
                                        Ufanisia owns the platform.
                                    </strong>{' '}
                                    All software, interfaces, designs, logos,
                                    trademarks, and content that form part of
                                    Upepo POS are the exclusive property of
                                    Ufanisia Africa Ltd or its licensors, and
                                    are protected by copyright, trademark, and
                                    other intellectual property laws.
                                </p>
                                <p>
                                    <strong className="text-foreground">
                                        You own your data.
                                    </strong>{' '}
                                    All business data you create, upload, or
                                    generate through the Service — including
                                    product catalogues, transaction records,
                                    customer lists, and reports — remains your
                                    property. We claim no ownership over your
                                    business data.
                                </p>
                                <p>
                                    These Terms grant you a limited,
                                    non-exclusive, non-transferable licence to
                                    access and use the Service solely for your
                                    own internal business operations during the
                                    subscription term. This licence does not
                                    include the right to reproduce, distribute,
                                    or create derivative works of our platform.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 8. Limitation of Liability */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="liability">
                                8. Limitation of Liability
                            </SectionHeading>
                            <Prose>
                                <p>
                                    To the fullest extent permitted by
                                    applicable law, Ufanisia Africa Ltd and its
                                    directors, employees, and agents shall not
                                    be liable for any indirect, incidental,
                                    special, consequential, or punitive damages,
                                    including but not limited to loss of
                                    profits, loss of data, loss of goodwill, or
                                    business interruption, arising out of or in
                                    connection with your use of the Service.
                                </p>
                                <p>
                                    Our total aggregate liability to you for any
                                    claims arising under or related to these
                                    Terms shall not exceed the total fees paid
                                    by you to Ufanisia in the three months
                                    immediately preceding the event giving rise
                                    to the claim.
                                </p>
                                <p>
                                    The Service is provided &ldquo;as is&rdquo;
                                    and &ldquo;as available&rdquo; without
                                    warranties of any kind, either express or
                                    implied. We do not warrant that the Service
                                    will be uninterrupted, error-free, or free
                                    from harmful components. We specifically
                                    disclaim any warranty that the Service will
                                    meet your compliance obligations —
                                    compliance remains your responsibility,
                                    though we provide tools to assist.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 9. Termination */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="termination">
                                9. Termination
                            </SectionHeading>
                            <Prose>
                                <p>
                                    Either party may terminate the subscription
                                    at any time:
                                </p>
                                <BulletList
                                    items={[
                                        'You may cancel your subscription at any time from your billing dashboard. Your access continues until the end of the current billing period.',
                                        'We may suspend or terminate your access immediately if you breach these Terms, fail to pay subscription fees after a grace period, or if we are required to do so by law.',
                                        'We may terminate the Service with 90 days\' written notice if we decide to discontinue Upepo POS as a product.',
                                    ]}
                                />
                                <p className="font-medium text-foreground">
                                    Data Export After Termination
                                </p>
                                <p>
                                    Following termination of your account for
                                    any reason, you have{' '}
                                    <strong className="text-foreground">
                                        90 days
                                    </strong>{' '}
                                    to export your business data using the
                                    platform's export tools. After this period,
                                    operational data will be permanently deleted
                                    from our servers. Compliance records
                                    required to be retained by law will be
                                    handled in accordance with our Privacy
                                    Policy.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 10. Governing Law */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="governing-law">
                                10. Governing Law
                            </SectionHeading>
                            <Prose>
                                <p>
                                    These Terms shall be governed by and
                                    construed in accordance with the{' '}
                                    <strong className="text-foreground">
                                        laws of Kenya
                                    </strong>
                                    , without regard to conflict of law
                                    principles.
                                </p>
                                <p>
                                    Any dispute arising out of or in connection
                                    with these Terms, including any question
                                    regarding their existence, validity, or
                                    termination, shall be subject to the
                                    exclusive jurisdiction of the courts located
                                    in{' '}
                                    <strong className="text-foreground">
                                        Nairobi, Kenya
                                    </strong>
                                    . Both parties consent to personal
                                    jurisdiction in those courts.
                                </p>
                                <p>
                                    Notwithstanding the above, either party may
                                    seek interim or emergency relief in any
                                    court of competent jurisdiction to protect
                                    its rights pending resolution of a dispute.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 11. Changes to Terms */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="changes">
                                11. Changes to Terms
                            </SectionHeading>
                            <Prose>
                                <p>
                                    We reserve the right to update or modify
                                    these Terms at any time. When we make
                                    material changes, we will:
                                </p>
                                <BulletList
                                    items={[
                                        'Update the "Last updated" date at the top of this page',
                                        'Send an email notification to the primary account holder at least 14 days before the changes take effect',
                                        'Display an in-app notice when you next log in',
                                    ]}
                                />
                                <p>
                                    Your continued use of the Service after the
                                    effective date of revised Terms constitutes
                                    your acceptance of the changes. If you do
                                    not agree with the revised Terms, you may
                                    cancel your subscription before the
                                    effective date.
                                </p>
                            </Prose>
                        </motion.section>

                        <Divider />

                        {/* 12. Contact */}
                        <motion.section {...rv(0.05)}>
                            <SectionHeading id="contact">
                                12. Contact
                            </SectionHeading>
                            <Prose>
                                <p>
                                    If you have questions about these Terms or
                                    need legal clarification, please contact our
                                    legal team:
                                </p>
                                <div className={`mt-4 rounded-xl p-5 ${G}`}>
                                    <p className="font-semibold text-foreground">
                                        Ufanisia Africa Ltd
                                    </p>
                                    <p className="mt-1">Legal Team</p>
                                    <p>
                                        <a
                                            href="mailto:legal@ufanisia.com"
                                            className="text-primary underline underline-offset-4"
                                        >
                                            legal@ufanisia.com
                                        </a>
                                    </p>
                                    <p className="mt-2">Nairobi, Kenya</p>
                                </div>
                                <p>
                                    For billing enquiries, contact{' '}
                                    <a
                                        href="mailto:billing@ufanisia.com"
                                        className="text-primary underline underline-offset-4"
                                    >
                                        billing@ufanisia.com
                                    </a>
                                    . For general support, visit our{' '}
                                    <a
                                        href="/support"
                                        className="text-primary underline underline-offset-4"
                                    >
                                        Support Centre
                                    </a>
                                    .
                                </p>
                            </Prose>
                        </motion.section>

                    </div>
                </div>
            </section>
        </WebLayout>
    );
}
