import { useLanguage } from "@/contexts/language-context";

export default function HowItWorks() {
  const { t } = useLanguage();
  const steps = [
    {
      number: "1",
      title: t.howItWorks.steps.step1.title,
      description: t.howItWorks.steps.step1.desc,
    },
    {
      number: "2",
      title: t.howItWorks.steps.step2.title,
      description: t.howItWorks.steps.step2.desc,
    },
    {
      number: "3",
      title: t.howItWorks.steps.step3.title,
      description: t.howItWorks.steps.step3.desc,
    },
  ];

  return (
    <section id="secure" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12 md:mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            {t.howItWorks.title}
          </h2>
          <p className="text-lg text-muted-foreground">
            {t.howItWorks.subtitle}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-4">
          {steps.map((step, index) => (
            <div key={index} className="relative">
              <div className="flex items-start gap-4">
                <div className="shrink-0">
                  <div className="flex items-center justify-center h-12 w-12 rounded-lg bg-primary text-white font-bold text-lg">
                    {step.number}
                  </div>
                </div>
                <div className="flex-1">
                  <h3 className="text-xl font-semibold text-foreground mb-2">
                    {step.title}
                  </h3>
                  <p className="text-muted-foreground">{step.description}</p>
                </div>
              </div>
              {index < steps.length - 1 && (
                <div className="hidden md:block absolute top-6 -right-8 w-12 h-0.5 bg-primary/30" />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}