import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { CheckCircle2, Target, Zap } from "lucide-react";

const steps = [
  {
    title: "Tentukan Goal",
    description: "Beri tahu kami apa yang ingin kamu capai dalam karier atau skill teknismu.",
    icon: <Target className="w-10 h-10 text-indigo-600" />,
  },
  {
    title: "Pilih Mentor",
    description: "Dapatkan rekomendasi mentor terbaik yang sesuai dengan budget dan jadwalmu.",
    icon: <Zap className="w-10 h-10 text-indigo-600" />,
  },
  {
    title: "Mulai Sesi",
    description: "Booking jadwal dan mulai sesi mentoring 1:1 yang intensif dan solutif.",
    icon: <CheckCircle2 className="w-10 h-10 text-indigo-600" />,
  },
];

export function HowItWorks() {
  return (
    <section id="how-it-works" className="py-24 bg-neutral-50">
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-16">
          <Heading>Cara Kerja Mentora</Heading>
          <Subheading>Hanya butuh 3 langkah mudah untuk memulai perjalanan transformasimu.</Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {steps.map((step, index) => (
            <Card key={index} className="border-none shadow-sm hover:shadow-md transition-shadow">
              <CardHeader className="p-8">
                <div className="mb-6">{step.icon}</div>
                <CardTitle className="text-2xl mb-4">{step.title}</CardTitle>
                <CardDescription className="text-base leading-relaxed">
                  {step.description}
                </CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}