import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import {
    ArrowRight,
    Globe,
    Heart,
    Lightbulb,
    MapPin,
    Shield,
    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: 'MFIs served across East Africa' },
    { value: '4', label: 'Countries: Kenya, Uganda, Tanzania, Rwanda' },
    { value: '$2.4B+', label: 'Loans processed on the platform' },
    { value: '99.9%', label: 'Uptime SLA guaranteed' },
];

const values = [
    {
        icon: Heart,
        title: 'Client-First',
        desc: 'Every feature we build starts with the end borrower in mind — the smallholder farmer, the market trader, the savings group member.',
    },
    {
        icon: Shield,
        title: 'Transparency',
        desc: 'No hidden fees, no lock-in, no surprises. We publish our roadmap, our pricing, and our SLAs openly.',
    },
    {
        icon: Globe,
        title: 'Built for Africa',
        desc: 'M-Pesa, Airtel Money, TZS, KES, UGX, RWF — we support the currencies and payment rails East African institutions actually use.',
    },
    {
        icon: Lightbulb,
        title: 'Continuous Innovation',
        desc: 'The MFI sector is evolving fast. We ship weekly improvements, driven by our customer community and field feedback.',
    },
];

const team = [
    {
        name: 'Amara Ochieng',
        role: 'CEO & Co-founder',
        bio: 'Former VP Engineering at a Kenyan fintech. 12 years building financial products for emerging markets.',
        country: 'Nairobi, Kenya',
    },
    {
        name: 'Fatuma Kamau',
        role: 'CTO & Co-founder',
        bio: 'Ex-Safaricom. Architect of high-throughput payment systems handling millions of daily transactions.',
        country: 'Nairobi, Kenya',
    },
    {
        name: 'David Ssempa',
        role: 'Head of Product',
        bio: '8 years working with MFIs across Uganda and Rwanda. Deep knowledge of group lending and savings methodologies.',
        country: 'Kampala, Uganda',
    },
    {
        name: 'Zara Mwangi',
        role: 'Head of Customer Success',
        bio: 'Spent 5 years as a field officer for a microfinance network — she knows this industry from the ground up.',
        country: 'Dar es Salaam, Tanzania',
    },
    {
        name: 'Benjamin Ruhiu',
        role: 'Head of Engineering',
        bio: 'Full-stack architect specialising in multi-tenant SaaS platforms. Obsessed with performance and reliability.',
        country: 'Kigali, Rwanda',
    },
    {
        name: 'Aisha Wanjiru',
        role: 'Head of Compliance',
        bio: 'Former Central Bank examiner. Ensures every feature we ship is compliant with regional financial regulations.',
        country: 'Nairobi, Kenya',
    },
];

export default function About() {
    return (
        <PlatformLayout>
            <Seo
                title="About Us"
                description="Upepo Finance builds the MFI operating system for East Africa, serving 120+ microfinance institutions across Kenya, Uganda, Tanzania, and Rwanda."
            />

            {/* 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 left-1/4 h-[500px] w-[500px] opacity-20"
                        style={{
                            background:
                                'radial-gradient(circle, hsl(var(--primary) / 0.45), transparent 70%)',
                        }}
                    />
                </div>
                <div className="pf-container relative z-10">
                    <div className="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 lg:text-6xl">
                                Built by people who{' '}
                                <span className="pf-gradient-text">
                                    understand
                                </span>{' '}
                                microfinance
                            </h1>
                        </FadeUp>
                        <FadeUp delay={0.2}>
                            <p className="text-muted-foreground text-lg leading-relaxed">
                                Upepo Finance was founded in 2022 by a team of
                                fintech engineers and former MFI practitioners
                                who watched East African lending institutions
                                struggle with outdated spreadsheets and clunky
                                legacy software. We built the platform we always
                                wished existed.
                            </p>
                        </FadeUp>
                    </div>
                </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>

            {/* Mission */}
            <section className="pf-section">
                <div className="pf-container">
                    <div className="grid grid-cols-1 items-center gap-16 md:grid-cols-2">
                        <FadeUp>
                            <h2 className="pf-display text-foreground mb-6 text-3xl font-bold">
                                Expanding financial access through better
                                technology
                            </h2>
                            <p className="text-muted-foreground mb-6 leading-relaxed">
                                Over 350 million adults in sub-Saharan Africa
                                remain unbanked. Microfinance institutions are
                                the bridge — but only if they can operate
                                efficiently, compliantly, and at scale.
                            </p>
                            <p className="text-muted-foreground leading-relaxed">
                                Our mission is to give every MFI, SACCO, and
                                community lender access to enterprise-grade
                                software at a price that makes sense for their
                                portfolio — so they can focus on their
                                communities, not their spreadsheets.
                            </p>
                        </FadeUp>
                        <FadeUp delay={0.15}>
                            <div className="pf-card p-8">
                                <div className="mb-6 flex items-center gap-3">
                                    <div className="pf-icon-box h-12 w-12">
                                        <TrendingUp className="h-6 w-6" />
                                    </div>
                                    <div>
                                        <p className="text-foreground font-semibold">
                                            Impact to date
                                        </p>
                                        <p className="text-muted-foreground text-sm">
                                            December 2024
                                        </p>
                                    </div>
                                </div>
                                <div className="space-y-4">
                                    {[
                                        {
                                            label: 'Active borrowers served',
                                            value: '280,000+',
                                        },
                                        {
                                            label: 'Loan disbursements',
                                            value: '1.2M+',
                                        },
                                        {
                                            label: 'Savings accounts managed',
                                            value: '95,000+',
                                        },
                                        {
                                            label: 'Women borrowers',
                                            value: '68%',
                                        },
                                    ].map((item) => (
                                        <div
                                            key={item.label}
                                            className="border-border flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
                                        >
                                            <span className="text-muted-foreground text-sm">
                                                {item.label}
                                            </span>
                                            <span className="text-foreground font-semibold">
                                                {item.value}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </FadeUp>
                    </div>
                </div>
            </section>

            {/* Values */}
            <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 we stand for
                        </h2>
                    </FadeUp>
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                        {values.map((val, i) => (
                            <FadeUp key={val.title} delay={i * 0.1}>
                                <div className="pf-card flex gap-5 p-6">
                                    <div className="pf-icon-box mt-1 h-10 w-10 shrink-0">
                                        <val.icon className="h-5 w-5" />
                                    </div>
                                    <div>
                                        <h3 className="text-foreground mb-2 font-semibold">
                                            {val.title}
                                        </h3>
                                        <p className="text-muted-foreground text-sm leading-relaxed">
                                            {val.desc}
                                        </p>
                                    </div>
                                </div>
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Team */}
            <section className="pf-section">
                <div className="pf-container">
                    <FadeUp className="mb-14 text-center">
                        <h2 className="pf-display text-foreground mb-4 text-3xl font-bold">
                            Meet the people behind Upepo
                        </h2>
                        <p className="text-muted-foreground mx-auto max-w-xl text-sm">
                            A distributed team across East Africa with deep
                            roots in fintech and microfinance.
                        </p>
                    </FadeUp>
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                        {team.map((member, i) => (
                            <FadeUp key={member.name} delay={i * 0.08}>
                                <div className="pf-card h-full p-6">
                                    <div className="bg-primary/10 mb-4 flex h-14 w-14 items-center justify-center rounded-2xl">
                                        <Users className="text-primary h-7 w-7" />
                                    </div>
                                    <h3 className="text-foreground mb-0.5 font-semibold">
                                        {member.name}
                                    </h3>
                                    <p className="text-primary mb-3 text-sm font-medium">
                                        {member.role}
                                    </p>
                                    <p className="text-muted-foreground mb-4 text-sm leading-relaxed">
                                        {member.bio}
                                    </p>
                                    <div className="flex items-center gap-1.5">
                                        <MapPin className="text-muted-foreground/50 h-3 w-3" />
                                        <span className="text-muted-foreground/60 text-xs">
                                            {member.country}
                                        </span>
                                    </div>
                                </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 md:text-4xl">
                            Ready to join us?
                        </h2>
                        <p className="mx-auto mb-10 max-w-sm text-sm opacity-80">
                            Start your free trial or explore open roles on our
                            team.
                        </p>
                        <div className="flex flex-wrap justify-center gap-4">
                            <Link
                                href="/get-started"
                                className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                Start free trial{' '}
                                <ArrowRight className="h-4 w-4" />
                            </Link>
                            <Link
                                href="/careers"
                                className="pf-btn-ghost inline-flex items-center gap-2 px-8 py-3.5 text-base"
                            >
                                View open roles
                            </Link>
                        </div>
                    </FadeUp>
                </div>
            </section>
        </PlatformLayout>
    );
}