import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import { Link } from '@inertiajs/react';
import { motion, useInView } from 'framer-motion';
import { ArrowRight } 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 principles = [
    {
        number: '01',
        title: 'The borrower is not a number',
        body: 'Behind every loan ID is a person — a market trader expanding her stall, a farmer buying seed for the rains, a young man starting his first business. Software that reduces people to rows in a table misses the point. We design every screen with the loan officer in mind, and every loan officer with their client in mind.',
    },
    {
        number: '02',
        title: 'Complexity is the enemy of adoption',
        body: "Legacy MFI software has dozens of configuration screens, hundreds of menu items, and manuals the size of textbooks. We've watched loan officers navigate three sub-menus just to record a repayment. We believe the best financial software feels obvious. If a new teller can't figure it out in an hour, we've failed.",
    },
    {
        number: '03',
        title: 'Data belongs to the institution',
        body: "Your client records, your loan portfolio, your financial history — they are yours. You can export everything, at any time, in standard formats, for free. We will never hold your data hostage. When you leave (though we hope you don't), you leave with everything.",
    },
    {
        number: '04',
        title: 'Compliance is a feature, not a checklist',
        body: "Regulatory compliance in East Africa is not optional — and it is also not static. Central Bank reporting formats change. Tax regulations shift. New mobile money regulations emerge. We track these changes so our customers don't have to. Compliance is baked into the platform, not bolted on.",
    },
    {
        number: '05',
        title: 'Pricing that scales with impact, not exploitation',
        body: 'A starter MFI with 200 clients should not pay the same as an institution managing 50,000 loans. We price on usage, with generous free tiers and transparent upgrade paths. When you grow, our pricing grows with you — but never ahead of you.',
    },
    {
        number: '06',
        title: 'We are building infrastructure, not a product',
        body: "The internet runs on infrastructure no single company controls. We think financial inclusion deserves the same. Upepo Finance is a long-term bet on East Africa's economic future. We are not here for a quick exit. We are here to build something that lasts.",
    },
];

export default function Manifesto() {
    return (
        <PlatformLayout>
            <Seo
                title="Our Manifesto"
                description="The borrower is not a number. Read the principles that drive how Upepo Finance builds software for microfinance institutions."
            />

            {/* Hero */}
            <section className="relative overflow-hidden pt-36 pb-24">
                <div className="pointer-events-none absolute inset-0 overflow-hidden">
                    <div
                        className="pf-blob pf-blob-1 absolute top-0 left-1/2 h-[600px] w-[600px] -translate-x-1/2 opacity-15"
                        style={{
                            background:
                                'radial-gradient(circle, hsl(var(--primary) / 0.5), 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-5xl leading-tight font-bold md:text-6xl">
                            Why we built{' '}
                            <span className="pf-gradient-text">
                                Upepo Finance
                            </span>
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <p className="text-muted-foreground text-xl leading-relaxed">
                            These are the beliefs that guide every decision we
                            make — from product design to pricing to how we
                            treat our customers.
                        </p>
                    </FadeUp>
                </div>
            </section>

            {/* Opening statement */}
            <section className="pf-section-tint py-16">
                <div className="pf-container mx-auto max-w-3xl">
                    <FadeUp>
                        <blockquote className="border-primary/30 border-l-4 pl-8">
                            <p className="text-foreground text-2xl leading-relaxed font-light italic">
                                "The 350 million unbanked adults in sub-Saharan
                                Africa are not underserved because they lack
                                ambition. They are underserved because the
                                institutions that could serve them lack the
                                tools to do so affordably and at scale. We exist
                                to change that."
                            </p>
                            <footer className="text-muted-foreground mt-6 text-sm">
                                — Amara Ochieng, CEO & Co-founder
                            </footer>
                        </blockquote>
                    </FadeUp>
                </div>
            </section>

            {/* Principles */}
            <section className="pf-section">
                <div className="pf-container mx-auto max-w-3xl">
                    <div className="space-y-16">
                        {principles.map((principle, i) => (
                            <FadeUp key={principle.number} delay={i * 0.05}>
                                <div className="grid grid-cols-1 gap-6 md:grid-cols-[80px_1fr]">
                                    <div>
                                        <span className="pf-display text-primary/20 text-5xl font-bold">
                                            {principle.number}
                                        </span>
                                    </div>
                                    <div>
                                        <h2 className="text-foreground mb-4 text-2xl font-bold">
                                            {principle.title}
                                        </h2>
                                        <p className="text-muted-foreground text-lg leading-relaxed">
                                            {principle.body}
                                        </p>
                                    </div>
                                </div>
                                {i < principles.length - 1 && (
                                    <div className="border-border mt-16 border-t" />
                                )}
                            </FadeUp>
                        ))}
                    </div>
                </div>
            </section>

            {/* Closing */}
            <section className="pf-section pf-section-dark">
                <div className="pf-container mx-auto max-w-2xl text-center">
                    <FadeUp>
                        <h2 className="pf-display mb-6 text-3xl font-bold md:text-4xl">
                            If this resonates with you
                        </h2>
                        <p className="mb-10 text-lg leading-relaxed opacity-80">
                            Whether you are an MFI looking for better software,
                            an engineer who wants to work on meaningful
                            infrastructure, or an investor aligned with
                            financial inclusion — we would love to hear from
                            you.
                        </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 your 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"
                            >
                                Join the team
                            </Link>
                        </div>
                    </FadeUp>
                </div>
            </section>
        </PlatformLayout>
    );
}