import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Shield, BarChart3, Wrench, Globe, ArrowRight } from "lucide-react"

const addons = [
    {
        title: "Maintenance Plan",
        description: "Monthly security updates, performance monitoring, and content changes.",
        price: "From $299/mo",
        icon: Wrench,
    },
    {
        title: "SEO Audit & Strategy",
        description: "Comprehensive audit, keyword research, and a 3-month optimization roadmap.",
        price: "From $999",
        icon: BarChart3,
    },
    {
        title: "Security Hardening",
        description: "Advanced security audits, penetration testing, and compliance setup.",
        price: "From $1,499",
        icon: Shield,
    },
    {
        title: "Analytics & Tracking",
        description: "Google Analytics, heatmaps, conversion tracking, and monthly reports.",
        price: "From $499",
        icon: Globe,
    },
]

export function AddOnServices() {
    return (
        <section className="py-24 bg-background" id="addons">
            <div className="container">
                <div className="animate-fade-in-up text-center mb-16">
                    <p className="text-overline text-primary mb-3">Extras</p>
                    <h2 className="sm:text-4xl mb-4">Add-on Services</h2>
                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
                        Enhance your project with these supplementary services.
                    </p>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    {addons.map((addon, i) => (
                        <div
                            key={addon.title}
                            className="animate-fade-in-up group rounded-2xl border bg-card p-6 hover:border-primary/20 hover:shadow-lg transition-all duration-500"
                            style={{ animationDelay: `${i * 0.1}s` }}
                        >
                            <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mb-4 group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300">
                                <addon.icon className="w-6 h-6" suppressHydrationWarning />
                            </div>
                            <h3 className="font-bold mb-2">{addon.title}</h3>
                            <p className="text-caption leading-relaxed mb-4">{addon.description}</p>
                            <p className="text-sm font-semibold text-primary mb-4">{addon.price}</p>
                            <Button asChild variant="outline" size="sm" className="w-full group/btn">
                                <Link href="/quote">
                                    Add to Quote
                                    <ArrowRight className="ml-2 h-3 w-3 transition-transform group-hover/btn:translate-x-1" suppressHydrationWarning />
                                </Link>
                            </Button>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}