import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Card, CardContent } from '@/Components/ui/card';
import WebLayout from '@/Layouts/Web/WebLayout';
import { Head, Link } from '@inertiajs/react';
import { motion, useReducedMotion } from 'framer-motion';
import {
    ArrowRight,
    Building2,
    Calendar,
    Download,
    ExternalLink,
    Image,
    Mail,
    MapPin,
    Megaphone,
    Newspaper,
    Package,
} from 'lucide-react';

// ─── glass shorthand ───────────────────────────────────────────────────────────

const G =
    'border border-white/20 bg-white/[0.07] backdrop-blur-xl dark:border-white/[0.07] dark:bg-white/[0.04]';

// ─── animation helper ──────────────────────────────────────────────────────────

function reveal(delay = 0, reduced = false) {
    return {
        initial: reduced ? {} : { opacity: 0, y: 22 },
        whileInView: { opacity: 1, y: 0 },
        viewport: { once: true, amount: 0.1 },
        transition: { duration: 0.55, ease: [0.25, 0.1, 0.25, 1], delay },
    };
}

// ─── page data ────────────────────────────────────────────────────────────────

const COMPANY_FACTS = [
    {
        icon: Calendar,
        label: 'Founded',
        value: '2024',
    },
    {
        icon: MapPin,
        label: 'Headquarters',
        value: 'Nairobi, Kenya',
    },
    {
        icon: Building2,
        label: 'Markets',
        value: 'KE · TZ · UG · RW',
    },
    {
        icon: Package,
        label: 'Product',
        value: 'Upepo POS',
    },
];

const MEDIA_CONTACTS = [
    {
        role: 'Press & media enquiries',
        email: 'press@ufanisia.com',
        detail: 'For interview requests, coverage questions, and embargoed announcements.',
    },
    {
        role: 'Partnership & BD',
        email: 'partners@ufanisia.com',
        detail: 'For integration partnerships, distribution agreements, and commercial enquiries.',
    },
];

const BRAND_ASSETS = [
    {
        icon: Image,
        title: 'Logos',
        desc: 'Upepo POS and Ufanisia Africa logos in SVG and PNG. Light, dark, and monochrome variants.',
    },
    {
        icon: Package,
        title: 'Brand guidelines',
        desc: 'Colours, typography, iconography, and usage rules for referencing Upepo POS in your publication.',
    },
    {
        icon: Megaphone,
        title: 'Product screenshots',
        desc: 'High-resolution screenshots of the POS, inventory, and compliance modules.',
    },
];

// ─── page ─────────────────────────────────────────────────────────────────────

export default function Press() {
    const reduced = useReducedMotion();
    const rv = (d = 0) => reveal(d, !!reduced);

    return (
        <WebLayout>
            <Head title="Press & Media — Upepo POS" />

            {/* ── Hero ─────────────────────────────────────────────────────── */}
            <section className="relative overflow-hidden bg-background pb-24 pt-32">
                <div
                    aria-hidden
                    className="pointer-events-none absolute inset-0 flex items-center justify-center"
                >
                    <div className="h-[480px] w-[600px] rounded-full bg-primary/8 blur-[130px]" />
                </div>

                <div className="relative mx-auto max-w-4xl px-6 text-center">
                    <motion.div {...rv(0)}>
                        <Badge variant="brand" className="mb-6">
                            Press &amp; media
                        </Badge>
                    </motion.div>
                    <motion.h1
                        {...rv(0.08)}
                        className="uf-display text-5xl font-bold leading-[1.08] tracking-tight text-foreground sm:text-6xl lg:text-7xl"
                    >
                        Press &amp;{' '}
                        <span className="text-primary">Media</span>
                    </motion.h1>
                    <motion.p
                        {...rv(0.16)}
                        className="mx-auto mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground"
                    >
                        Resources and contacts for journalists, editors, and content creators
                        covering Africa&apos;s commerce and fintech landscape.
                    </motion.p>
                </div>
            </section>

            {/* ── Press kit ────────────────────────────────────────────────── */}
            <section className="bg-primary/5 py-20">
                <div className="mx-auto max-w-6xl px-6">
                    <motion.div {...rv(0)} className="mb-12 text-center">
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            Press kit
                        </h2>
                        <p className="mt-3 text-muted-foreground">
                            Everything you need to cover Upepo POS accurately and compellingly.
                        </p>
                    </motion.div>

                    <div className="grid gap-6 sm:grid-cols-3">
                        {BRAND_ASSETS.map((asset, i) => {
                            const Icon = asset.icon;
                            return (
                                <motion.div key={asset.title} {...rv(0.07 * i)}>
                                    <Card className={`h-full ${G} border-0`}>
                                        <CardContent className="p-8">
                                            <div className="mb-5 flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                                <Icon size={20} strokeWidth={1.75} />
                                            </div>
                                            <h3 className="mb-2 font-semibold text-foreground">
                                                {asset.title}
                                            </h3>
                                            <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
                                                {asset.desc}
                                            </p>
                                            <div className="flex items-center gap-2">
                                                <Badge variant="neutral">
                                                    <Download size={10} className="mr-1" />
                                                    Coming soon
                                                </Badge>
                                            </div>
                                        </CardContent>
                                    </Card>
                                </motion.div>
                            );
                        })}
                    </div>

                    {/* download CTA */}
                    <motion.div
                        {...rv(0.2)}
                        className={`mt-8 flex items-center justify-between gap-6 rounded-2xl p-8 ${G}`}
                    >
                        <div>
                            <p className="font-semibold text-foreground">
                                Full press kit download
                            </p>
                            <p className="mt-1 text-sm text-muted-foreground">
                                All brand assets packaged in a single zip archive.
                            </p>
                        </div>
                        <Badge variant="brand" className="shrink-0">
                            Coming soon
                        </Badge>
                    </motion.div>
                </div>
            </section>

            {/* ── Media contacts ───────────────────────────────────────────── */}
            <section className="bg-background py-24">
                <div className="mx-auto max-w-6xl px-6">
                    <motion.div {...rv(0)} className="mb-12 text-center">
                        <Badge variant="lime" className="mb-4">
                            Get in touch
                        </Badge>
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            Media contacts
                        </h2>
                        <p className="mt-3 text-muted-foreground">
                            Reach the right person for your request.
                        </p>
                    </motion.div>

                    <div className="grid gap-6 sm:grid-cols-2">
                        {MEDIA_CONTACTS.map((c, i) => (
                            <motion.div key={c.email} {...rv(0.08 * i)}>
                                <Card className={`h-full ${G} border-0`}>
                                    <CardContent className="p-8">
                                        <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                                            <Mail size={18} strokeWidth={1.75} />
                                        </div>
                                        <p className="mb-1 text-xs font-medium tracking-widest text-muted-foreground uppercase">
                                            {c.role}
                                        </p>
                                        <a
                                            href={`mailto:${c.email}`}
                                            className="text-lg font-semibold text-primary hover:underline"
                                        >
                                            {c.email}
                                        </a>
                                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                                            {c.detail}
                                        </p>
                                    </CardContent>
                                </Card>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ── Coverage placeholder ─────────────────────────────────────── */}
            <section className="bg-primary/5 py-24">
                <div className="mx-auto max-w-6xl px-6">
                    <motion.div {...rv(0)} className="mb-12 text-center">
                        <Badge variant="brand" className="mb-4">
                            In the press
                        </Badge>
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            Coverage
                        </h2>
                    </motion.div>

                    <motion.div {...rv(0.1)}>
                        <Card className={`${G} border-0`}>
                            <CardContent className="flex flex-col items-center py-20 text-center">
                                <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted/30 text-muted-foreground">
                                    <Newspaper size={28} strokeWidth={1.5} />
                                </div>
                                <h3 className="uf-display text-xl font-semibold text-foreground">
                                    We&apos;re just getting started
                                </h3>
                                <p className="mt-3 max-w-sm text-muted-foreground">
                                    Coverage and features will appear here as they are published. Check
                                    back soon for our first media appearances.
                                </p>
                                <div className="mt-6 flex items-center gap-2">
                                    <ExternalLink size={14} className="text-muted-foreground" />
                                    <span className="text-sm text-muted-foreground">
                                        Follow our journey on{' '}
                                        <a
                                            href="https://linkedin.com/company/ufanisia"
                                            target="_blank"
                                            rel="noreferrer"
                                            className="text-primary hover:underline"
                                        >
                                            LinkedIn
                                        </a>
                                    </span>
                                </div>
                            </CardContent>
                        </Card>
                    </motion.div>
                </div>
            </section>

            {/* ── Company facts ────────────────────────────────────────────── */}
            <section className="bg-background py-24">
                <div className="mx-auto max-w-6xl px-6">
                    <motion.div {...rv(0)} className="mb-14 text-center">
                        <h2 className="uf-display text-4xl font-bold text-foreground sm:text-5xl">
                            Company at a glance
                        </h2>
                        <p className="mt-3 text-muted-foreground">
                            Key facts for use in your publication.
                        </p>
                    </motion.div>

                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                        {COMPANY_FACTS.map((fact, i) => {
                            const Icon = fact.icon;
                            return (
                                <motion.div key={fact.label} {...rv(0.07 * i)}>
                                    <Card className={`h-full ${G} border-0`}>
                                        <CardContent className="p-8 text-center">
                                            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                                                <Icon size={22} strokeWidth={1.75} />
                                            </div>
                                            <p className="text-xs font-medium tracking-widest text-muted-foreground uppercase">
                                                {fact.label}
                                            </p>
                                            <p className="uf-display mt-2 text-xl font-bold text-foreground">
                                                {fact.value}
                                            </p>
                                        </CardContent>
                                    </Card>
                                </motion.div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* ── CTA ──────────────────────────────────────────────────────── */}
            <section className="bg-primary/5 py-24">
                <div className="mx-auto max-w-2xl px-6 text-center">
                    <motion.h2
                        {...rv(0)}
                        className="uf-display text-4xl font-bold text-foreground sm:text-5xl"
                    >
                        Need something specific?
                    </motion.h2>
                    <motion.p
                        {...rv(0.1)}
                        className="mt-4 text-lg text-muted-foreground"
                    >
                        Our team responds to press enquiries within one business day.
                    </motion.p>
                    <motion.div
                        {...rv(0.18)}
                        className="mt-10 flex flex-wrap items-center justify-center gap-4"
                    >
                        <Button asChild size="lg" className="gap-2">
                            <Link href="/contact">
                                Contact us <ArrowRight size={16} />
                            </Link>
                        </Button>
                        <Button asChild variant="outline" size="lg">
                            <a href="mailto:press@ufanisia.com">Email press team</a>
                        </Button>
                    </motion.div>
                </div>
            </section>
        </WebLayout>
    );
}
