import { useCurrency } from '@/hooks/useCurrency';
import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { Sparkles } from 'lucide-react';
import FadeUp, { ease } from './FadeUp';

export interface DbPlan {
    slug: string;
    name: string;
    description: string | null;
    price_monthly: number;
    price_yearly: number;
    trial_days: number;
}

export default function PricingTeaserSection({ plans }: { plans: DbPlan[] }) {
    const { format } = useCurrency();

    // Teaser cards mirror the Pricing page: prices come from the database
    // and are converted into the visitor's display currency.
    const teaserPlans = plans.map((plan) => {
        if (plan.slug === 'enterprise') {
            return {
                name: plan.name,
                price: 'Custom',
                sub: 'contact sales',
                featured: false,
            };
        }
        if (plan.price_monthly === 0) {
            return {
                name: plan.name,
                price: plan.trial_days > 0 ? `${plan.trial_days} days` : 'Free',
                sub: 'No card required',
                featured: false,
            };
        }
        return {
            name: plan.name,
            price: format(plan.price_monthly),
            sub: '/month',
            featured: plan.slug === 'professional',
        };
    });

    return (
        <section className="pf-section">
            <div className="pf-container">
                <FadeUp className="mb-14 text-center">
                    <h2 className="pf-display text-foreground text-4xl font-bold md:text-5xl">
                        Simple pricing,
                        <br />
                        no surprises
                    </h2>
                </FadeUp>
                <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    {teaserPlans.map((plan, i) => (
                        <FadeUp key={plan.name} delay={i * 0.07}>
                            <motion.div
                                whileHover={{ y: -5 }}
                                transition={{ duration: 0.2, ease }}
                                className={`relative flex h-full flex-col p-6 ${plan.featured ? 'pf-card-featured' : 'pf-card'}`}
                            >
                                {plan.featured && (
                                    <div
                                        className="absolute -top-px right-0 left-0 h-px rounded-full"
                                        style={{
                                            background:
                                                'linear-gradient(90deg, transparent, hsl(var(--primary)), transparent)',
                                        }}
                                    />
                                )}
                                {plan.featured && (
                                    <span className="bg-primary text-primary-foreground absolute -top-3.5 left-1/2 inline-flex -translate-x-1/2 items-center gap-1 rounded-full px-3 py-1 text-[10px] font-bold">
                                        <Sparkles className="h-2.5 w-2.5" />{' '}
                                        Most Popular
                                    </span>
                                )}
                                <p className="text-muted-foreground mb-2 text-xs font-semibold tracking-widest uppercase">
                                    {plan.name}
                                </p>
                                <p className="pf-display pf-mono text-foreground mb-1 text-2xl font-bold">
                                    {plan.price}
                                </p>
                                <p className="text-muted-foreground mb-6 text-sm">
                                    {plan.sub}
                                </p>
                                <div className="flex-1" />
                                <Link
                                    href="/get-started"
                                    className={`mt-auto inline-flex w-full items-center justify-center rounded-full py-2.5 text-sm font-semibold transition-colors ${plan.featured ? 'pf-btn' : 'pf-btn-ghost'}`}
                                >
                                    Get started
                                </Link>
                            </motion.div>
                        </FadeUp>
                    ))}
                </div>
                <FadeUp delay={0.3} className="mt-6 text-center">
                    <Link
                        href="/pricing"
                        className="text-primary text-sm font-medium underline-offset-4 hover:underline"
                    >
                        Compare all plans →
                    </Link>
                </FadeUp>
            </div>
        </section>
    );
}