import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Code, Palette, Smartphone, LineChart, ArrowUpRight } from "lucide-react"
import Link from "next/link"

const services = [
    {
        title: "Web Development",
        description: "We build fast, scalable web applications using Next.js, React, and Node.js. From marketing sites to complex SaaS platforms.",
        icon: Code,
        gradient: "from-blue-500 to-cyan-400",
        deliverables: ["Custom Website", "Web Application", "API Development", "Database Design"],
    },
    {
        title: "Mobile App Development",
        description: "Cross-platform mobile apps for iOS and Android built with React Native and Flutter. Native performance, shared codebase.",
        icon: Smartphone,
        gradient: "from-violet-500 to-purple-400",
        deliverables: ["iOS App", "Android App", "Cross-Platform", "App Store Deployment"],
    },
    {
        title: "UI/UX Design",
        description: "User-centric design that converts. We craft interfaces that are both beautiful and intuitive, backed by research and usability testing.",
        icon: Palette,
        gradient: "from-pink-500 to-rose-400",
        deliverables: ["Wireframes", "Prototypes", "Design System", "Usability Testing"],
    },
    {
        title: "SEO Optimization",
        description: "Data-driven strategies to boost your search rankings, drive organic traffic, and increase visibility across all major search engines.",
        icon: LineChart,
        gradient: "from-amber-500 to-orange-400",
        deliverables: ["Technical Audit", "Keyword Research", "On-Page SEO", "Analytics Setup"],
    },
]

export function ServiceDescriptions() {
    return (
        <section className="py-24 bg-muted/20" id="services-detail">
            <div className="container">
                <div className="animate-fade-in-up text-center mb-16">
                    <p className="text-overline text-primary mb-3">What We Do</p>
                    <h2 className="sm:text-4xl mb-4">Our Services</h2>
                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
                        End-to-end digital solutions tailored to your business goals.
                    </p>
                </div>

                <div className="grid gap-8 md:grid-cols-2">
                    {services.map((service, i) => (
                        <div key={service.title} className="animate-fade-in-up" style={{ animationDelay: `${i * 0.1}s` }}>
                            <Card className="group h-full border hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all duration-500">
                                <CardHeader>
                                    <div className="flex items-start justify-between">
                                        <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${service.gradient} flex items-center justify-center text-white shadow-lg group-hover:scale-110 transition-transform duration-300`}>
                                            <service.icon className="w-7 h-7" suppressHydrationWarning />
                                        </div>
                                        <Link
                                            href="/quote"
                                            className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                                            aria-label={`Request a quote for ${service.title}`}
                                        >
                                            <ArrowUpRight className="h-5 w-5 text-primary" suppressHydrationWarning />
                                        </Link>
                                    </div>
                                    <h3 className="text-xl font-bold mt-4">{service.title}</h3>
                                </CardHeader>
                                <CardContent className="space-y-4">
                                    <p className="text-body text-muted-foreground">{service.description}</p>
                                    <div>
                                        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">Key Deliverables</p>
                                        <div className="flex flex-wrap gap-2">
                                            {service.deliverables.map((d) => (
                                                <span key={d} className="bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-xs font-medium">
                                                    {d}
                                                </span>
                                            ))}
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}