import { motion } from 'framer-motion';
import { ArrowRight, Zap } from 'lucide-react';
import FadeUp from './FadeUp';

export default function MultiYearStrip() {
    return (
        <FadeUp>
            <div className="border-border bg-muted/60 border-y py-8">
                <div className="pf-container">
                    <div className="flex flex-col items-center gap-6 text-center md:flex-row md:justify-between md:text-left">
                        <div>
                            <div className="mb-1 flex items-center justify-center gap-2 md:justify-start">
                                <Zap className="text-accent h-4 w-4" />
                                <p className="text-foreground text-sm font-semibold">
                                    Multi-year discounts available
                                </p>
                            </div>
                            <p className="text-muted-foreground text-xs">
                                Commit upfront and save more
                            </p>
                        </div>
                        <div className="flex flex-wrap justify-center gap-3">
                            {[
                                ['1 Year', '10% off'],
                                ['2 Years', '15% off'],
                                ['3 Years', '20% off'],
                                ['4 Years', '25% off'],
                            ].map(([term, disc]) => (
                                <motion.div
                                    key={term}
                                    whileHover={{ y: -2 }}
                                    transition={{ duration: 0.15 }}
                                    className="pf-card rounded-xl px-4 py-2.5 text-center"
                                >
                                    <p className="text-muted-foreground text-[10px] font-bold tracking-wider uppercase">
                                        {term}
                                    </p>
                                    <p className="pf-mono text-accent text-sm font-bold">
                                        {disc}
                                    </p>
                                </motion.div>
                            ))}
                        </div>
                        <a
                            href="mailto:sales@upepofinance.com"
                            className="pf-btn inline-flex items-center gap-2 whitespace-nowrap"
                        >
                            Get a quote <ArrowRight className="h-4 w-4" />
                        </a>
                    </div>
                </div>
            </div>
        </FadeUp>
    );
}