components/services/PackageComparison.tsx

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Check, X, ArrowRight, Sparkles, Star, Zap } from "lucide-react"

const tiers = [
    {
        name: "Starter",
        tagline: "Perfect for small businesses",
        price: "$2,999",
        icon: Sparkles,
        gradient: "from-blue-500 to-cyan-400",
        popular: false,
        features: [
            { name: "Custom design (up to 5 pages)", included: true },
            { name: "Responsive layout", included: true },
            { name: "Contact form", included: true },
            { name: "Basic SEO setup", included: true },
            { name: "1 round of revisions", included: true },
            { name: "CMS integration", included: false },
            { name: "E-commerce functionality", included: false },
            { name: "Priority support", included: false },
        ],
    },
    {
        name: "Professional",
        tagline: "Most popular for growing brands",
        price: "$7,499",
        icon: Star,
        gradient: "from-primary to-blue-500",
        popular: true,
        features: [
            { name: "Custom design (up to 15 pages)", included: true },
            { name: "Responsive layout", included: true },
            { name: "Advanced forms & integrations", included: true },
            { name: "Full SEO optimization", included: true },
            { name: "3 rounds of revisions", included: true },
            { name: "CMS integration", included: true },
            { name: "E-commerce functionality", included: false },
            { name: "Priority support", included: true },
        ],
    },
    {
        name: "Enterprise",
        tagline: "For ambitious, large-scale projects",
        price: "Custom",
        icon: Zap,
        gradient: "from-violet-600 to-purple-500",
        popular: false,
        features: [
            { name: "Unlimited pages & features", included: true },
            { name: "Responsive layout", included: true },
            { name: "Custom integrations & APIs", included: true },
            { name: "Full SEO optimization", included: true },
            { name: "Unlimited revisions", included: true },
            { name: "CMS integration", included: true },
            { name: "E-commerce functionality", included: true },
            { name: "Priority support", included: true },
        ],
    },
]

export function PackageComparison() {
    return (
        <section className="py-24 bg-background" id="packages">
            <div className="container">
                <div className="animate-fade-in-up text-center mb-16">
                    <p className="text-overline text-primary mb-3">Pricing</p>
                    <h2 className="sm:text-4xl mb-4">Choose Your Package</h2>
                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
                        Transparent pricing with no hidden fees. Every package includes a dedicated project manager and quality assurance.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
                    {tiers.map((tier, i) => (
                        <div key={tier.name} className="animate-fade-in-up" style={{ animationDelay: `${i * 0.1}s` }}>
                            <Card className={`relative h-full ${tier.popular ? "border-primary shadow-xl shadow-primary/10 scale-[1.02]" : "border"}`}>
                                {tier.popular && (
                                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary px-4 py-1 text-xs font-semibold text-primary-foreground">
                                        Most Popular
                                    </div>
                                )}
                                <CardHeader className="text-center pb-2">
                                    <div className={`w-12 h-12 mx-auto rounded-xl bg-gradient-to-br ${tier.gradient} flex items-center justify-center text-white shadow-lg mb-4`}>
                                        <tier.icon className="w-6 h-6" suppressHydrationWarning />
                                    </div>
                                    <h3 className="text-xl font-bold">{tier.name}</h3>
                                    <p className="text-caption">{tier.tagline}</p>
                                    <div className="mt-4">
                                        <span className="text-4xl font-extrabold tracking-tight">{tier.price}</span>
                                        {tier.price !== "Custom" && <span className="text-caption ml-1">starting</span>}
                                    </div>
                                </CardHeader>
                                <CardContent className="space-y-6">
                                    <ul className="space-y-3">
                                        {tier.features.map((feature) => (
                                            <li key={feature.name} className="flex items-center gap-3 text-sm">
                                                {feature.included ? (
                                                    <Check className="h-4 w-4 text-green-500 shrink-0" suppressHydrationWarning />
                                                ) : (
                                                    <X className="h-4 w-4 text-muted-foreground/40 shrink-0" suppressHydrationWarning />
                                                )}
                                                <span className={feature.included ? "" : "text-muted-foreground/60"}>
                                                    {feature.name}
                                                </span>
                                            </li>
                                        ))}
                                    </ul>
                                    <Button asChild className="w-full" variant={tier.popular ? "default" : "outline"} size="lg">
                                        <Link href="/quote">
                                            Get Started
                                            <ArrowRight className="ml-2 h-4 w-4" suppressHydrationWarning />
                                        </Link>
                                    </Button>
                                </CardContent>
                            </Card>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}