import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import type { Customer, Testimonial } from '@/types/platform';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import {
    ArrowRight,
    ArrowUpRight,
    MapPin,
    Quote,
    Star,
    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 stats = [
    { value: '120+', label: 'institutions served' },
    { value: '68%', label: 'women borrowers' },
    { value: '4.9/5', label: 'average customer rating' },
    { value: '96%', label: 'renewal rate' },
];

function initials(name: string): string {
    return name
        .split(/\s+/)
        .filter(Boolean)
        .slice(0, 2)
        .map((word) => word[0])
        .join('')
        .toUpperCase();
}

function CustomerCard({ customer }: { customer: Customer }) {
    const hasFooter = Boolean(
        customer.location || customer.country || customer.since_year,
    );

    return (
        <motion.div
            whileHover={{ y: -4 }}
            transition={{ duration: 0.25 }}
            className="pf-card flex h-full flex-col p-5"
        >
            {/* Header: logo · name + sector · website */}
            <div className="flex items-center gap-3">
                {customer.logo_url ? (
                    <div className="border-border bg-background flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl border p-1">
                        <img
                            src={customer.logo_url}
                            alt={`${customer.name} logo`}
                            className="max-h-full max-w-full rounded-lg object-contain"
                        />
                    </div>
                ) : (
                    <div className="bg-primary/10 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl">
                        <span className="text-primary text-sm font-bold">
                            {initials(customer.name)}
                        </span>
                    </div>
                )}
                <div className="min-w-0 flex-1">
                    <h3 className="text-foreground truncate text-sm font-semibold">
                        {customer.name}
                    </h3>
                    {customer.sector && (
                        <p className="text-muted-foreground truncate text-xs">
                            {customer.sector}
                        </p>
                    )}
                </div>
                {customer.website && (
                    <a
                        href={customer.website}
                        target="_blank"
                        rel="noopener noreferrer"
                        aria-label={`Visit ${customer.name} website`}
                        title="Visit website"
                        className="border-border text-muted-foreground hover:border-primary/40 hover:text-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border transition-colors"
                    >
                        <ArrowUpRight className="h-3.5 w-3.5" />
                    </a>
                )}
            </div>

            {/* Description */}
            {customer.description && (
                <p className="text-muted-foreground mt-3 line-clamp-3 text-xs leading-relaxed">
                    {customer.description}
                </p>
            )}

            {/* Footer: location · since */}
            {hasFooter && (
                <div className="mt-auto pt-4">
                    <div className="border-border flex items-center justify-between gap-2 border-t pt-3">
                        <span className="text-muted-foreground flex min-w-0 items-center gap-1 text-xs">
                            {(customer.location || customer.country) && (
                                <>
                                    <MapPin className="h-3 w-3 shrink-0" />
                                    <span className="truncate">
                                        {[customer.location, customer.country]
                                            .filter(Boolean)
                                            .join(', ')}
                                    </span>
                                </>
                            )}
                        </span>
                        {customer.since_year && (
                            <span className="text-muted-foreground/70 shrink-0 text-[11px] font-medium">
                                Since {customer.since_year}
                            </span>
                        )}
                    </div>
                </div>
            )}
        </motion.div>
    );
}

interface Props {
    customers: Customer[];
    testimonials: Testimonial[];
}

export default function Customers({ customers, testimonials }: Props) {
    return (
        <PlatformLayout>
            <Seo
                title="Customers"
                description="See how microfinance institutions across East Africa manage loans, savings, and operations on Upepo Finance."
            />

            {/* 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-20 left-1/4 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">
                            Trusted by{' '}
                            <span className="pf-gradient-text">
                                120+ institutions
                            </span>{' '}
                            across East Africa
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <p className="text-muted-foreground text-lg leading-relaxed">
                            From single-branch SACCOs to multi-country MFI
                            networks — real institutions, real results.
                        </p>
                    </FadeUp>
                </div>
            </section>

            {/* Stats */}
            <section className="pf-section pf-section-tint">
                <div className="pf-container">
                    <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
                        {stats.map((stat, i) => (
                            <FadeUp key={stat.label} delay={i * 0.08}>
                                <div className="text-center">
                                    <p className="pf-display text-primary mb-2 text-4xl font-bold">
                                        {stat.value}
                                    </p>
                                    <p className="text-muted-foreground text-sm">
                                        {stat.label}
                                    </p>
                                </div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Customers */}
            {customers.length > 0 && (
                <section className="pf-section">
                    <div className="pf-container">
                        <FadeUp className="mb-12 text-center">
                            <h2 className="text-foreground mb-2 text-lg font-semibold">
                                Some of our customers
                            </h2>
                            <p className="text-muted-foreground text-sm">
                                MFIs, SACCOs, and community lenders across
                                Kenya, Uganda, Tanzania, and Rwanda
                            </p>
                        </FadeUp>
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
                            {customers.map((customer, i) => (
                                <FadeUp key={customer.id} delay={i * 0.04}>
                                    <CustomerCard customer={customer} />
                                </FadeUp>
                            ))}
                        </div>
                    </div>
                </section>
            )}

            {/* Testimonials */}
            <section className="pf-section pf-section-tint">
                <div className="pf-container">
                    <FadeUp className="mb-14 text-center">
                        <h2 className="pf-display text-foreground mb-4 text-3xl font-bold">
                            What our customers say
                        </h2>
                    </FadeUp>
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                        {testimonials.map((t, i) => (
                            <FadeUp key={t.id} delay={i * 0.08}>
                                <motion.div
                                    whileHover={{ y: -5, scale: 1.01 }}
                                    transition={{ duration: 0.25 }}
                                    className="pf-card flex h-full flex-col p-6"
                                >
                                    <div className="mb-4 flex items-center gap-0.5">
                                        {[...Array(5)].map((_, si) => (
                                            <Star
                                                key={si}
                                                className="text-primary h-4 w-4 fill-current"
                                            />
                                        ))}
                                    </div>
                                    <Quote className="text-primary/20 mb-3 h-8 w-8" />
                                    <p className="text-foreground mb-6 flex-1 text-sm leading-relaxed">
                                        {t.quote}
                                    </p>
                                    <div className="border-border border-t pt-4">
                                        <div className="mb-3 flex items-center gap-3">
                                            {t.avatar_url ? (
                                                <img
                                                    src={t.avatar_url}
                                                    alt={t.name}
                                                    className="h-10 w-10 rounded-full object-cover"
                                                />
                                            ) : (
                                                <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full">
                                                    <Users className="text-primary h-5 w-5" />
                                                </div>
                                            )}
                                            <div>
                                                <p className="text-foreground text-sm font-semibold">
                                                    {t.name}
                                                </p>
                                                <p className="text-muted-foreground text-xs">
                                                    {[t.role, t.company]
                                                        .filter(Boolean)
                                                        .join(', ')}
                                                </p>
                                            </div>
                                        </div>
                                        <div className="flex items-center justify-between">
                                            {t.location && (
                                                <div className="text-muted-foreground flex items-center gap-1 text-xs">
                                                    <MapPin className="h-3 w-3" />
                                                    {t.location}
                                                </div>
                                            )}
                                            {t.metric && (
                                                <div className="text-primary flex items-center gap-1 text-[10px] font-semibold">
                                                    <TrendingUp className="h-3 w-3" />
                                                    {t.metric}
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </motion.div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Case studies 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">
                            Read the full stories
                        </h2>
                        <p className="mx-auto mb-10 max-w-sm text-sm opacity-80">
                            Deep-dive case studies on how specific institutions
                            transformed their operations with Upepo Finance.
                        </p>
                        <div className="flex flex-wrap justify-center gap-4">
                            <Link
                                href="/case-studies"
                                className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                Browse case studies{' '}
                                <ArrowRight className="h-4 w-4" />
                            </Link>
                            <Link
                                href="/get-started"
                                className="pf-btn-ghost inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                Start free trial
                            </Link>
                        </div>
                    </FadeUp>
                </div>
            </section>
        </PlatformLayout>
    );
}