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, Calendar, Download, ExternalLink } 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 pressAssets = [
    {
        label: 'Brand Logo Pack (SVG + PNG)',
        size: '2.4 MB',
        href: '#',
    },
    {
        label: 'Founder Headshots',
        size: '8.1 MB',
        href: '#',
    },
    {
        label: 'Product Screenshots',
        size: '14.3 MB',
        href: '#',
    },
    {
        label: 'Company Fact Sheet (PDF)',
        size: '380 KB',
        href: '#',
    },
    {
        label: 'Seed Round Press Release',
        size: '120 KB',
        href: '#',
    },
];

function formatMonthYear(iso: string | null): string {
    if (!iso) return '';
    return new Date(iso).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
    });
}

interface Props {
    articles: ArticleSummary[];
}

export default function Press({ articles }: Props) {
    return (
        <PlatformLayout>
            <Seo
                title="Press"
                description="News coverage, brand assets, and media resources for 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-16 left-1/3 h-[400px] w-[400px] 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">
                            News &amp;{' '}
                            <span className="pf-gradient-text">coverage</span>
                        </h1>
                    </FadeUp>
                    <FadeUp delay={0.2}>
                        <p className="text-muted-foreground mb-10 text-lg">
                            Media enquiries:{' '}
                            <a
                                href="mailto:press@upepofinance.com"
                                className="text-primary font-medium underline underline-offset-2 hover:opacity-80"
                            >
                                press@upepofinance.com
                            </a>
                        </p>
                    </FadeUp>
                </div>
            </section>

            <div className="pf-container pb-24">
                <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
                    {/* News feed */}
                    <div className="lg:col-span-2">
                        <FadeUp>
                            <h2 className="text-foreground mb-8 text-xl font-bold">
                                In the news
                            </h2>
                        </FadeUp>
                        <div className="space-y-6">
                            {articles.map((item, i) => (
                                <FadeUp key={item.slug} delay={i * 0.07}>
                                    <Link
                                        href={`/press/${item.slug}`}
                                        className="pf-card group flex flex-col gap-3 p-6"
                                    >
                                        <div className="flex items-center justify-between gap-4">
                                            <div className="flex items-center gap-3">
                                                {item.outlet && (
                                                    <span className="pf-chip text-[9px]">
                                                        {item.outlet}
                                                    </span>
                                                )}
                                                <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                                    <Calendar className="h-3 w-3" />
                                                    {formatMonthYear(
                                                        item.published_at,
                                                    )}
                                                </div>
                                            </div>
                                            <ExternalLink className="text-muted-foreground/30 group-hover:text-primary h-4 w-4 shrink-0 transition-colors" />
                                        </div>
                                        <h3 className="text-foreground group-hover:text-primary text-base leading-snug font-semibold transition-colors">
                                            {item.title}
                                        </h3>
                                        <p className="text-muted-foreground text-sm leading-relaxed">
                                            {item.excerpt}
                                        </p>
                                    </Link>
                                </FadeUp>
                            ))}
                        </div>
                    </div>

                    {/* Press kit sidebar */}
                    <div>
                        <FadeUp delay={0.1}>
                            <div className="pf-card p-6">
                                <h2 className="text-foreground mb-6 font-bold">
                                    Press kit
                                </h2>
                                <p className="text-muted-foreground mb-6 text-sm leading-relaxed">
                                    Download logos, founder photos, product
                                    screenshots, and company fact sheets for
                                    editorial use.
                                </p>
                                <div className="space-y-3">
                                    {pressAssets.map((asset) => (
                                        <a
                                            key={asset.label}
                                            href={asset.href}
                                            className="border-border hover:border-primary/30 group flex items-center justify-between rounded-xl border p-3 transition-all hover:shadow-sm"
                                        >
                                            <div>
                                                <p className="text-foreground text-sm font-medium">
                                                    {asset.label}
                                                </p>
                                                <p className="text-muted-foreground text-xs">
                                                    {asset.size}
                                                </p>
                                            </div>
                                            <Download className="text-muted-foreground/40 group-hover:text-primary h-4 w-4 transition-colors" />
                                        </a>
                                    ))}
                                </div>
                                <div className="border-border mt-6 border-t pt-6">
                                    <p className="text-muted-foreground mb-3 text-xs">
                                        Need something specific? Contact our
                                        media team.
                                    </p>
                                    <a
                                        href="mailto:press@upepofinance.com"
                                        className="pf-btn-ghost inline-flex w-full items-center justify-center gap-2"
                                    >
                                        Contact press team{' '}
                                        <ArrowRight className="h-3.5 w-3.5" />
                                    </a>
                                </div>
                            </div>
                        </FadeUp>
                    </div>
                </div>
            </div>
        </PlatformLayout>
    );
}