import {
    DatabaseIsolationIllustration,
    EastAfricaMapIllustration,
    IsometricLoanIllustration,
    LoanCycleIllustration,
    OnboardingFlowIllustration,
} from '@/components/illustrations';
import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { ArrowLeft, ArrowRight } from 'lucide-react';

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

const illustrations = [
    {
        id: 'loan-cycle',
        name: 'Loan Lifecycle',
        description:
            'Circular orbital diagram showing the four phases of a loan: Application, Approval, Disbursement, and Repayment. Orbiting gold particle, animated arc draw-on, pulsing stage nodes.',
        usage: 'Homepage hero section or Product page — Loans module.',
        component: LoanCycleIllustration,
        viewBox: '400×400',
        tags: ['Loans', 'Process', 'Orbital'],
    },
    {
        id: 'database-isolation',
        name: 'Database Isolation',
        description:
            'Glossy 3D platform database fanning out to per-tenant isolated databases in teal, orange, and navy. Gradient connectors with travelling data packets, lock chips, shield verification badge. Transparent background adapts to light and dark mode.',
        usage: 'Architecture / Security section on Homepage or Pricing page.',
        component: DatabaseIsolationIllustration,
        viewBox: '400×400',
        tags: ['Security', 'Architecture', 'Multi-tenant'],
    },
    {
        id: 'east-africa-map',
        name: 'East Africa Network',
        description:
            'Accurate East Africa map with seven pulsing city nodes, haloed labels, and an institutions count badge. Transparent background adapts to light and dark mode.',
        usage: 'Homepage social proof section or About / Coverage section.',
        component: EastAfricaMapIllustration,
        viewBox: '455×650',
        tags: ['Geographic', 'Network', 'Coverage'],
    },
    {
        id: 'onboarding-flow',
        name: 'Onboarding Flow',
        description:
            'Four-step isometric journey from Sign Up to Go Live — floating glass slabs in teal, orange, and navy with gradient connectors, travelling data pulses, and glossy number badges. Transparent background adapts to light and dark mode.',
        usage: 'Support page onboarding section or GetStarted right panel.',
        component: OnboardingFlowIllustration,
        viewBox: '580×280',
        tags: ['Onboarding', 'Process', 'Timeline'],
    },
    {
        id: 'isometric-loan',
        name: 'Isometric Loan Lifecycle',
        description:
            'Pure SVG 3D scene — glossy teal sphere hub on a floating glass platform, ringed by six hexagonal prism stages (Application, Approval, Disbursement, Repayment, Collections, Analytics). Transparent background adapts to light and dark mode; pulses travel each connector. No Three.js required.',
        usage: 'Homepage loan management section. Use wherever a 3D depth feel is wanted without a WebGL dependency.',
        component: IsometricLoanIllustration,
        viewBox: '480×480',
        tags: ['Isometric', '3D-look', 'No deps'],
    },
];

export default function Illustrations() {
    return (
        <PlatformLayout>
            <Seo
                title="Illustration Showcase"
                description="Internal showcase of Upepo Finance's illustration assets."
                noindex
            />

            <div className="pf-container py-16 lg:py-24">
                {/* Header */}
                <motion.div
                    initial={{ opacity: 0, y: 24 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, ease }}
                    className="mb-14"
                >
                    <Link
                        href="/"
                        className="text-muted-foreground hover:text-primary mb-8 inline-flex items-center gap-2 text-sm transition-colors"
                    >
                        <ArrowLeft className="h-3.5 w-3.5" />
                        Back to home
                    </Link>
                    <div className="flex items-start justify-between gap-6">
                        <div>
                            <h1 className="pf-display text-foreground mb-3 text-3xl font-bold lg:text-4xl">
                                Illustration Showcase
                            </h1>
                            <p className="text-muted-foreground max-w-xl">
                                Five animated SVG illustrations built with
                                Framer Motion. Pick the ones you'd like to use —
                                each is scroll-triggered, responsive, and
                                requires zero extra dependencies.
                            </p>
                        </div>
                        <div className="border-border bg-secondary/40 hidden shrink-0 rounded-2xl border px-5 py-3 text-right lg:block">
                            <p className="text-muted-foreground text-xs">
                                Components
                            </p>
                            <p className="pf-display text-primary text-2xl font-bold">
                                5
                            </p>
                            <p className="text-muted-foreground/60 text-[10px]">
                                <code className="text-primary/70">
                                    @/components/illustrations
                                </code>
                            </p>
                        </div>
                    </div>
                </motion.div>

                {/* Grid */}
                <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
                    {illustrations.map((illus, i) => {
                        const Component = illus.component;
                        return (
                            <motion.div
                                key={illus.id}
                                initial={{ opacity: 0, y: 32 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{
                                    duration: 0.6,
                                    delay: 0.1 + i * 0.1,
                                    ease,
                                }}
                                className="pf-card overflow-hidden"
                            >
                                {/* Illustration canvas */}
                                <div
                                    className="relative flex items-center justify-center bg-gradient-to-br from-[#050C1A] to-[#091220] px-4 py-8"
                                    style={{ minHeight: 280 }}
                                >
                                    <Component className="w-full max-w-[340px]" />
                                    {/* ViewBox chip */}
                                    <span className="border-border bg-card/60 text-muted-foreground/50 absolute top-3 right-3 rounded-md border px-2 py-0.5 font-mono text-[9px] backdrop-blur-sm">
                                        {illus.viewBox}
                                    </span>
                                </div>

                                {/* Info panel */}
                                <div className="border-border border-t p-6">
                                    <div className="mb-3 flex items-start justify-between gap-3">
                                        <h2 className="text-foreground text-lg font-semibold">
                                            {illus.name}
                                        </h2>
                                        <div className="flex flex-wrap justify-end gap-1.5">
                                            {illus.tags.map((tag) => (
                                                <span
                                                    key={tag}
                                                    className="border-primary/20 bg-primary/8 text-primary rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase"
                                                >
                                                    {tag}
                                                </span>
                                            ))}
                                        </div>
                                    </div>
                                    <p className="text-muted-foreground mb-4 text-sm leading-relaxed">
                                        {illus.description}
                                    </p>
                                    <div className="bg-secondary/40 flex items-start gap-2 rounded-xl px-4 py-3">
                                        <ArrowRight className="text-primary mt-0.5 h-3.5 w-3.5 shrink-0" />
                                        <p className="text-muted-foreground text-xs">
                                            <span className="text-foreground font-semibold">
                                                Suggested use:
                                            </span>{' '}
                                            {illus.usage}
                                        </p>
                                    </div>

                                    {/* Import snippet */}
                                    <div className="border-border bg-card mt-4 rounded-xl border px-4 py-3">
                                        <p className="text-muted-foreground/50 mb-1 text-[9px] font-bold tracking-wider uppercase">
                                            Import
                                        </p>
                                        <code className="text-primary/80 text-[10px]">
                                            {`import { ${illus.component.name} } from '@/components/illustrations';`}
                                        </code>
                                    </div>
                                </div>
                            </motion.div>
                        );
                    })}
                </div>

                {/* Footer note */}
                <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.6, delay: 0.7 }}
                    className="border-border bg-secondary/30 mt-12 rounded-2xl border p-6 text-center"
                >
                    <p className="text-foreground mb-1 text-sm font-semibold">
                        Need a different style?
                    </p>
                    <p className="text-muted-foreground text-sm">
                        Let me know which illustration you prefer and I'll
                        integrate it into the right page. More styles
                        (isometric, line-art, minimal icon clusters) can be
                        added on request.
                    </p>
                </motion.div>
            </div>
        </PlatformLayout>
    );
}