import { cn } from '@/lib/utils';
import FadeUp from './FadeUp';

export default function PricingHero({
    yearly,
    onToggle,
    yearlyDiscount,
}: {
    yearly: boolean;
    onToggle: (yearly: boolean) => void;
    yearlyDiscount: number;
}) {
    return (
        <section className="relative overflow-hidden pt-32 pb-20 text-center">
            <div className="pointer-events-none absolute inset-0 overflow-hidden">
                <div
                    className="pf-blob pf-blob-1 absolute -top-32 left-1/3 h-[500px] w-[500px] opacity-20"
                    style={{
                        background:
                            'radial-gradient(ellipse, hsl(var(--primary) / 0.5), transparent 70%)',
                    }}
                />
                <div
                    className="pf-blob pf-blob-2 absolute top-0 right-1/4 h-[380px] w-[380px] opacity-10"
                    style={{
                        background:
                            'radial-gradient(circle, hsl(var(--accent) / 0.45), transparent 70%)',
                    }}
                />
            </div>
            <div className="pf-container relative z-10">
                <FadeUp delay={0.1}>
                    <h1 className="pf-display text-foreground mb-4 text-4xl font-bold md:text-5xl lg:text-6xl">
                        Simple,{' '}
                        <span className="pf-gradient-text">
                            transparent pricing
                        </span>
                    </h1>
                </FadeUp>
                <FadeUp delay={0.2}>
                    <p className="text-muted-foreground mx-auto mb-10 max-w-xl text-lg">
                        Start free for 30 days. No credit card required. Scale
                        to Enterprise when you're ready.
                    </p>
                </FadeUp>
                <FadeUp delay={0.3}>
                    <div className="border-border bg-muted/70 inline-flex items-center gap-1 rounded-full border p-1">
                        <button
                            onClick={() => onToggle(false)}
                            className={cn(
                                'rounded-full px-6 py-2 text-sm font-semibold transition-all duration-200',
                                !yearly
                                    ? 'bg-card text-foreground border-border border shadow-sm'
                                    : 'text-muted-foreground hover:text-foreground',
                            )}
                        >
                            Monthly
                        </button>
                        <button
                            onClick={() => onToggle(true)}
                            className={cn(
                                'flex items-center gap-2 rounded-full px-6 py-2 text-sm font-semibold transition-all duration-200',
                                yearly
                                    ? 'bg-card text-foreground border-border border shadow-sm'
                                    : 'text-muted-foreground hover:text-foreground',
                            )}
                        >
                            Yearly
                            {yearlyDiscount > 0 && (
                                <span className="bg-primary/10 text-primary rounded-full px-2 py-0.5 text-[10px] font-bold">
                                    –{yearlyDiscount}%
                                </span>
                            )}
                        </button>
                    </div>
                </FadeUp>
            </div>
        </section>
    );
}