import React from 'react'
import { useNavigate } from 'react-router-dom'
import { motion } from 'framer-motion'
import { Wifi, Phone, Zap, ArrowRight, Shield, Clock, BadgePercent } from 'lucide-react'
import Mascot from '../components/Mascot'
import MeshBackground from '../components/MeshBackground'

const spring = { type: 'spring', stiffness: 300, damping: 26 }

export default function Landing() {
    const navigate = useNavigate()

    const features = [
        { Icon: Clock, title: 'Instant delivery', desc: 'Data and airtime land in seconds, any time of day.' },
        { Icon: Shield, title: 'Secure & refunded', desc: 'Failed transaction? Your wallet is refunded automatically.' },
        { Icon: BadgePercent, title: 'Best student rates', desc: 'Cheaper data than the competition, every single time.' },
    ]

    const services = [
        { Icon: Wifi, label: 'Data' },
        { Icon: Phone, label: 'Airtime' },
        { Icon: Zap, label: 'Electricity' },
    ]

    return (
        <div className="min-h-screen bg-ink relative overflow-hidden">
            <MeshBackground />

            <div className="relative z-10 max-w-[480px] mx-auto px-6">
                {/* Nav */}
                <motion.nav
                    initial={{ opacity: 0, y: -16 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={spring}
                    className="flex items-center justify-between pt-7"
                >
                    <div>
                        <span className="text-txt text-[19px] font-semibold tracking-tight">FARGO</span>
                        <span className="text-brass text-[19px] font-semibold tracking-tight">·TOPUP</span>
                    </div>
                    <button
                        onClick={() => navigate('/login')}
                        className="text-txt-2 text-[14px] font-medium hover:text-txt transition-colors"
                    >
                        Sign in
                    </button>
                </motion.nav>

                {/* Hero */}
                <div className="pt-12 pb-8 text-center">
                    <motion.div
                        initial={{ opacity: 0, scale: 0.8 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ ...spring, delay: 0.1 }}
                        className="mb-8"
                    >
                        <Mascot mode="idle" size={130} />
                    </motion.div>

                    <motion.h1
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ ...spring, delay: 0.2 }}
                        className="text-txt text-[32px] font-bold leading-tight tracking-tight"
                    >
                        Top up. Pay bills.<br />
                        <span className="text-brass">Stay powered.</span>
                    </motion.h1>

                    <motion.p
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ ...spring, delay: 0.3 }}
                        className="text-txt-2 text-[15px] mt-4 px-4 leading-relaxed"
                    >
                        The fastest way to buy data, airtime and pay
                        electricity bills in Nigeria.
                    </motion.p>

                    <motion.button
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ ...spring, delay: 0.4 }}
                        whileTap={{ scale: 0.97 }}
                        onClick={() => navigate('/register')}
                        className="mt-8 bg-brass hover:bg-brass-hover text-ink font-semibold text-[15px] rounded-xl px-8 py-3.5 inline-flex items-center gap-2 transition-colors"
                    >
                        Get started free <ArrowRight size={17} />
                    </motion.button>
                </div>

                {/* Service chips */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ ...spring, delay: 0.5 }}
                    className="flex justify-center gap-3 mb-12"
                >
                    {services.map(({ Icon, label }) => (
                        <div key={label} className="bg-surface border border-line rounded-2xl px-5 py-3 flex flex-col items-center gap-2">
                            <Icon size={20} className="text-brass" strokeWidth={1.8} />
                            <span className="text-txt-2 text-[12px] font-medium">{label}</span>
                        </div>
                    ))}
                </motion.div>

                {/* Features */}
                <div className="space-y-3 mb-12">
                    {features.map(({ Icon, title, desc }, i) => (
                        <motion.div
                            key={title}
                            initial={{ opacity: 0, x: -16 }}
                            whileInView={{ opacity: 1, x: 0 }}
                            viewport={{ once: true }}
                            transition={{ ...spring, delay: i * 0.08 }}
                            className="bg-surface border border-line rounded-2xl p-5 flex items-start gap-4"
                        >
                            <div className="w-11 h-11 rounded-xl bg-brass/10 flex items-center justify-center shrink-0">
                                <Icon size={20} className="text-brass" strokeWidth={1.8} />
                            </div>
                            <div>
                                <p className="text-txt text-[15px] font-semibold">{title}</p>
                                <p className="text-txt-3 text-[13px] mt-1 leading-relaxed">{desc}</p>
                            </div>
                        </motion.div>
                    ))}
                </div>

                {/* CTA */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={spring}
                    className="ambient-glow bg-surface border border-line rounded-3xl p-8 text-center mb-8 relative overflow-hidden"
                >
                    <div className="relative z-10">
                        <p className="text-txt text-[19px] font-semibold mb-2">Ready to start?</p>
                        <p className="text-txt-3 text-[14px] mb-6">Join students already using Fargo.</p>
                        <motion.button
                            whileTap={{ scale: 0.97 }}
                            onClick={() => navigate('/register')}
                            className="bg-brass hover:bg-brass-hover text-ink font-semibold text-[15px] rounded-xl px-8 py-3.5 inline-flex items-center gap-2 transition-colors"
                        >
                            Create account <ArrowRight size={17} />
                        </motion.button>
                    </div>
                </motion.div>

                {/* Footer */}
                <footer className="text-center pb-10">
                    <p className="text-txt-3 text-[12px]">
                        © {new Date().getFullYear()} Fargo Topup. All rights reserved.
                    </p>
                </footer>
            </div>
        </div>
    )
}