import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
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 cookieTypes = [
    {
        name: 'Strictly necessary',
        purpose:
            'Required for the platform to function. These include session cookies for authentication, CSRF tokens for security, and user preference cookies (such as dark mode). They cannot be disabled.',
        examples: 'upepo_session, XSRF-TOKEN, uf-theme',
        duration: 'Session / 1 year (preference)',
        canOptOut: false,
    },
    {
        name: 'Functional',
        purpose:
            'Remember choices you make to improve your experience — for example, your selected branch, last-used report, or table preferences.',
        examples: 'uf-branch, uf-table-prefs',
        duration: '90 days',
        canOptOut: true,
    },
    {
        name: 'Analytics',
        purpose:
            'Help us understand how visitors use our marketing website (not the platform itself). We use privacy-preserving, cookieless analytics — no personal data is collected, no cross-site tracking, no fingerprinting.',
        examples: 'None (cookieless analytics)',
        duration: 'N/A',
        canOptOut: false,
    },
];

const sections = [
    {
        title: 'What are cookies?',
        content: `Cookies are small text files placed on your device by a website or application. They allow the site to remember information about your visit — such as your login session or preferences — so you don't have to re-enter them every time.

Not all "cookies" are stored in cookie files. Modern browsers also support localStorage and sessionStorage, which we use for storing theme preferences and UI state. This policy covers all such client-side storage mechanisms.`,
    },
    {
        title: 'How we use cookies',
        content: `Upepo Finance uses cookies in two contexts:

**Marketing website (upepofinance.com):** We use a single strictly-necessary cookie to manage your theme preference (dark/light mode). We do not use advertising cookies, third-party tracking pixels, or social media tracking on our marketing site.

**Platform (your-subdomain.upepofinance.com):** We use session cookies for authentication, CSRF protection tokens for security, and functional cookies to remember your in-app preferences (selected branch, table column widths, etc.).

We do not run Google Analytics, Facebook Pixel, or any other behavioural advertising technology.`,
    },
    {
        title: 'Third-party cookies',
        content: `We do not load any third-party advertising or tracking scripts on our website or platform. The only third-party content we load is:

- **Stripe.js** (payment processing): Stripe sets its own cookies for fraud detection. See Stripe's Cookie Policy for details.
- **Intercom** (in-app chat, Professional and Enterprise plans only): Intercom sets a session cookie to identify chat users. You may disable this by opting out of live chat in your account settings.

We do not embed YouTube videos, social media widgets, or other third-party content that sets cookies.`,
    },
    {
        title: 'Managing your cookie preferences',
        content: `**Browser settings:** You can configure your browser to block or delete cookies. Note that blocking strictly necessary cookies will prevent you from logging in to the platform.

**Theme preference:** The dark/light mode preference is stored in localStorage and can be cleared via your browser's developer tools or by clearing site data.

**Opt-out of functional cookies:** You can reset all functional preferences via Settings → Preferences → Reset UI Preferences within the platform.

For questions about our cookie practices, email privacy@upepofinance.com.`,
    },
    {
        title: 'Changes to this policy',
        content: `We will update this Cookie Policy when we change our cookie practices. Material changes will be communicated via email and a platform banner at least 14 days before taking effect. The "last updated" date at the top of this page indicates when this policy was last revised.`,
    },
];

export default function Cookies() {
    return (
        <PlatformLayout>
            <Seo
                title="Cookie Policy"
                description="Read Upepo Finance's cookie policy — how we use cookies and similar technologies on our platform."
            />

            {/* Hero */}
            <section className="relative overflow-hidden pt-32 pb-16">
                <div className="pf-container relative z-10 mx-auto max-w-3xl text-center">
                    <FadeUp delay={0.1}>
                        <h1 className="pf-display text-foreground mb-4 text-4xl font-bold md:text-5xl">
                            Cookie Policy
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <p className="text-muted-foreground text-sm">
                            Last updated: 1 January 2025
                        </p>
                    </FadeUp>
                </div>
            </section>

            {/* Summary box */}
            <section className="pf-section pb-0">
                <div className="pf-container mx-auto max-w-3xl">
                    <FadeUp>
                        <div className="pf-card border-primary/20 bg-primary/5 p-6">
                            <p className="text-foreground mb-2 font-semibold">
                                The short version
                            </p>
                            <p className="text-muted-foreground text-sm leading-relaxed">
                                We use a minimal number of cookies — strictly
                                necessary ones for login and security, and
                                functional ones for remembering your
                                preferences. We do not use advertising cookies,
                                tracking pixels, or cross-site tracking. Our
                                marketing site analytics are cookieless.
                            </p>
                        </div>
                    </FadeUp>
                </div>
            </section>

            {/* Cookie table */}
            <section className="pf-section">
                <div className="pf-container mx-auto max-w-4xl">
                    <FadeUp>
                        <h2 className="text-foreground mb-6 text-xl font-bold">
                            Cookies we use
                        </h2>
                    </FadeUp>
                    <div className="space-y-4">
                        {cookieTypes.map((ct, i) => (
                            <FadeUp key={ct.name} delay={i * 0.07}>
                                <div className="pf-card overflow-hidden p-0">
                                    <div className="border-border flex flex-wrap items-center justify-between gap-3 border-b px-6 py-4">
                                        <div className="flex items-center gap-3">
                                            <h3 className="text-foreground font-semibold">
                                                {ct.name}
                                            </h3>
                                        </div>
                                        <span
                                            className={`rounded-xl px-3 py-1 text-xs font-semibold ${
                                                ct.canOptOut
                                                    ? 'bg-amber-500/10 text-amber-600'
                                                    : 'bg-emerald-500/10 text-emerald-600'
                                            }`}
                                        >
                                            {ct.canOptOut
                                                ? 'Optional'
                                                : 'Always active'}
                                        </span>
                                    </div>
                                    <div className="px-6 py-4">
                                        <p className="text-muted-foreground mb-4 text-sm leading-relaxed">
                                            {ct.purpose}
                                        </p>
                                        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
                                            <div>
                                                <p className="text-muted-foreground mb-1 text-[10px] font-semibold tracking-widest uppercase">
                                                    Examples
                                                </p>
                                                <p className="text-foreground font-mono text-xs">
                                                    {ct.examples}
                                                </p>
                                            </div>
                                            <div>
                                                <p className="text-muted-foreground mb-1 text-[10px] font-semibold tracking-widest uppercase">
                                                    Duration
                                                </p>
                                                <p className="text-foreground text-xs">
                                                    {ct.duration}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Detailed sections */}
            <section className="pf-section pf-section-tint">
                <div className="pf-container mx-auto max-w-3xl">
                    <div className="space-y-10">
                        {sections.map((section, i) => (
                            <FadeUp key={section.title} delay={i * 0.04}>
                                <div>
                                    <h2 className="text-foreground mb-4 text-lg font-bold">
                                        {section.title}
                                    </h2>
                                    <div className="text-muted-foreground space-y-3 text-sm leading-relaxed">
                                        {section.content
                                            .split('\n\n')
                                            .map((para, pi) => (
                                                <p key={pi}>
                                                    {para
                                                        .split(
                                                            /(\*\*[^*]+\*\*)/,
                                                        )
                                                        .map((part, ti) =>
                                                            part.startsWith(
                                                                '**',
                                                            ) ? (
                                                                <strong
                                                                    key={ti}
                                                                    className="text-foreground font-semibold"
                                                                >
                                                                    {part.slice(
                                                                        2,
                                                                        -2,
                                                                    )}
                                                                </strong>
                                                            ) : (
                                                                part
                                                            ),
                                                        )}
                                                </p>
                                            ))}
                                    </div>
                                </div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Related legal */}
            <section className="pf-section">
                <div className="pf-container mx-auto max-w-3xl">
                    <p className="text-muted-foreground mb-4 text-sm font-semibold">
                        Related legal documents
                    </p>
                    <div className="flex flex-wrap gap-3">
                        <Link
                            href="/privacy"
                            className="pf-btn-ghost rounded-xl px-4 py-2 text-sm"
                        >
                            Privacy Policy
                        </Link>
                        <Link
                            href="/terms"
                            className="pf-btn-ghost rounded-xl px-4 py-2 text-sm"
                        >
                            Terms &amp; Conditions
                        </Link>
                    </div>
                </div>
            </section>
        </PlatformLayout>
    );
}