import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import type { ArticleSummary } from '@/types/platform';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import {
    ArrowRight,
    BookOpen,
    Clock,
    MapPin,
    TrendingUp,
    Users,
} 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 CARD_COLORS = [
    'hsl(var(--primary) / 0.08)',
    'hsl(var(--accent) / 0.08)',
    'hsl(var(--primary) / 0.06)',
    'hsl(var(--accent) / 0.06)',
    'hsl(var(--primary) / 0.07)',
];

interface Props {
    articles: ArticleSummary[];
}

export default function CaseStudies({ articles }: Props) {
    return (
        <PlatformLayout>
            <Seo
                title="Case Studies"
                description="Real results from microfinance institutions running on Upepo Finance — portfolio growth, faster disbursement, and lower default rates."
            />

            {/* 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 right-1/3 h-[450px] w-[450px] opacity-20"
                        style={{
                            background:
                                'radial-gradient(circle, hsl(var(--primary) / 0.45), transparent 70%)',
                        }}
                    />
                </div>
                <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-6 text-4xl font-bold md:text-5xl">
                            Real institutions,{' '}
                            <span className="pf-gradient-text">
                                real results
                            </span>
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <p className="text-muted-foreground text-lg leading-relaxed">
                            Deep-dive stories from MFIs and SACCOs that
                            transformed their operations with Upepo Finance.
                        </p>
                    </FadeUp>
                </div>
            </section>

            {/* Case studies list */}
            <section className="pf-section">
                <div className="pf-container mx-auto max-w-4xl">
                    <div className="space-y-8">
                        {articles.map((cs, i) => (
                            <FadeUp key={cs.slug} delay={i * 0.07}>
                                <motion.div
                                    whileHover={{ y: -4, scale: 1.005 }}
                                    transition={{ duration: 0.25 }}
                                    className="pf-card group overflow-hidden"
                                    style={{
                                        background:
                                            CARD_COLORS[i % CARD_COLORS.length],
                                    }}
                                >
                                    <div className="p-8">
                                        <div className="mb-6 flex flex-wrap items-center gap-3">
                                            {cs.category && (
                                                <span className="pf-chip text-[9px]">
                                                    {cs.category}
                                                </span>
                                            )}
                                            {cs.location && (
                                                <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                                    <MapPin className="h-3 w-3" />
                                                    {cs.location}
                                                </div>
                                            )}
                                            {cs.clients && (
                                                <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                                    <Users className="h-3 w-3" />
                                                    {cs.clients}
                                                </div>
                                            )}
                                            {cs.read_time && (
                                                <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                                    <Clock className="h-3 w-3" />
                                                    {cs.read_time}
                                                </div>
                                            )}
                                        </div>
                                        <h2 className="text-foreground group-hover:text-primary mb-3 text-xl leading-snug font-bold transition-colors">
                                            {cs.title}
                                        </h2>
                                        <p className="text-muted-foreground mb-6 leading-relaxed">
                                            {cs.excerpt}
                                        </p>
                                        {cs.results &&
                                            cs.results.length > 0 && (
                                                <div className="mb-6 grid grid-cols-1 gap-3 md:grid-cols-3">
                                                    {cs.results.map(
                                                        (result) => (
                                                            <div
                                                                key={result}
                                                                className="border-border bg-card/60 flex items-start gap-2 rounded-xl border p-3"
                                                            >
                                                                <TrendingUp className="text-primary mt-0.5 h-4 w-4 shrink-0" />
                                                                <span className="text-foreground text-xs leading-snug font-medium">
                                                                    {result}
                                                                </span>
                                                            </div>
                                                        ),
                                                    )}
                                                </div>
                                            )}
                                        <div className="flex items-center justify-between">
                                            <span className="text-foreground font-semibold">
                                                {cs.company}
                                            </span>
                                            <Link
                                                href={`/case-studies/${cs.slug}`}
                                                className="pf-btn-ghost inline-flex items-center gap-2 text-sm"
                                            >
                                                <BookOpen className="h-3.5 w-3.5" />
                                                Read full story{' '}
                                                <ArrowRight className="h-3.5 w-3.5" />
                                            </Link>
                                        </div>
                                    </div>
                                </motion.div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section className="pf-section pf-section-dark">
                <div className="pf-container text-center">
                    <FadeUp>
                        <h2 className="pf-display mb-4 text-3xl font-bold">
                            Ready to write your own story?
                        </h2>
                        <p className="mx-auto mb-10 max-w-sm text-sm opacity-80">
                            Start your free trial and see what Upepo Finance can
                            do for your institution.
                        </p>
                        <Link
                            href="/get-started"
                            className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                        >
                            Get started free <ArrowRight className="h-4 w-4" />
                        </Link>
                    </FadeUp>
                </div>
            </section>
        </PlatformLayout>
    );
}