"use client";
import SectionContainer from "../shared/SectionContainer";
import StepCard from "../shared/StepCard";
import { UI, type Lang } from "@/lib/config";

export default function GetStartedSection({ lang }: { lang: Lang }) {
  const t = UI[lang].t;

  const steps = [
    {
      num: "1",
      icon: "🔗",
      title: t.healthcareStep1Title,
      desc: t.healthcareStep1Desc,
    },
    {
      num: "2",
      icon: "📋",
      title: t.healthcareStep2Title,
      desc: t.healthcareStep2Desc,
    },
    {
      num: "3",
      icon: "⚙️",
      title: t.healthcareStep3Title,
      desc: t.healthcareStep3Desc,
    },
    {
      num: "4",
      icon: "📞",
      title: t.healthcareStep4Title,
      desc: t.healthcareStep4Desc,
    },
  ];

  return (
    <SectionContainer
      title={t.healthcareGetStartedTitle}
      subtitle={t.healthcareGetStartedSubtitle}
      background="gray"
    >
      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        {steps.map((step, index) => (
          <StepCard
            key={step.num}
            step={step.num}
            icon={step.icon}
            title={step.title}
            description={step.desc}
            delay={index * 0.15}
          />
        ))}
      </div>
    </SectionContainer>
  );
}
