import { Search, PenTool, Code, Rocket } from "lucide-react"

const steps = [
    {
        number: "01",
        title: "Discovery",
        description: "We dive deep into your business goals, target audience, and competition to build a solid project strategy.",
        icon: Search,
        gradient: "from-blue-500 to-cyan-400",
    },
    {
        number: "02",
        title: "Design",
        description: "Our designers create wireframes and high-fidelity mockups that bring your vision to life with pixel-perfect precision.",
        icon: PenTool,
        gradient: "from-violet-500 to-purple-400",
    },
    {
        number: "03",
        title: "Develop",
        description: "Our engineers build your product using modern tech stacks with clean code, performance, and scalability in mind.",
        icon: Code,
        gradient: "from-pink-500 to-rose-400",
    },
    {
        number: "04",
        title: "Deploy",
        description: "We launch your project with rigorous QA testing, performance optimization, and ongoing support to ensure success.",
        icon: Rocket,
        gradient: "from-amber-500 to-orange-400",
    },
]

export function ProcessTimeline() {
    return (
        <section className="py-24 bg-background" id="process">
            <div className="container">
                <div className="animate-fade-in-up text-center mb-16">
                    <p className="text-overline text-primary mb-3">Our Process</p>
                    <h2 className="sm:text-4xl mb-4">How We Work</h2>
                    <p className="text-body text-muted-foreground max-w-2xl mx-auto">
                        A proven 4-step process that takes your project from idea to launch.
                    </p>
                </div>

                {/* Desktop: horizontal timeline */}
                <div className="hidden md:grid md:grid-cols-4 gap-8 relative">
                    {/* Connecting line */}
                    <div className="absolute top-10 left-[12.5%] right-[12.5%] h-0.5 bg-border" aria-hidden="true" />

                    {steps.map((step, i) => (
                        <div key={step.number} className="animate-fade-in-up relative text-center" style={{ animationDelay: `${i * 0.12}s` }}>
                            <div className={`relative z-10 w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${step.gradient} flex items-center justify-center text-white shadow-lg mb-6`}>
                                <step.icon className="w-8 h-8" suppressHydrationWarning />
                            </div>
                            <div className="text-xs font-bold text-primary mb-1">{step.number}</div>
                            <h3 className="font-bold mb-2">{step.title}</h3>
                            <p className="text-caption leading-relaxed">{step.description}</p>
                        </div>
                    ))}
                </div>

                {/* Mobile: vertical timeline */}
                <div className="md:hidden relative pl-12">
                    {/* Vertical line */}
                    <div className="absolute left-5 top-0 bottom-0 w-0.5 bg-border" aria-hidden="true" />

                    {steps.map((step, i) => (
                        <div key={step.number} className="animate-fade-in-up relative pb-12 last:pb-0" style={{ animationDelay: `${i * 0.12}s` }}>
                            <div className={`absolute left-[-1.75rem] z-10 w-10 h-10 rounded-xl bg-gradient-to-br ${step.gradient} flex items-center justify-center text-white shadow-lg`}>
                                <step.icon className="w-5 h-5" suppressHydrationWarning />
                            </div>
                            <div className="text-xs font-bold text-primary mb-1">{step.number}</div>
                            <h3 className="font-bold mb-2">{step.title}</h3>
                            <p className="text-caption leading-relaxed">{step.description}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}