"use client";

import { useTranslations } from "next-intl";
import HowItWorksContent from "./HowItWorksContent";
import HowItWorksImage from "./HowItWorksImage";

export default function HowItWorksSection() {
  const t = useTranslations("howItWorks.steps");

  const steps = [
    {
      title: t("step1.title"),
      description: t("step1.description"),
    },
    {
      title: t("step2.title"),
      description: t("step2.description"),
    },
    {
      title: t("step3.title"),
      description: t("step3.description"),
    },
  ];

  return (
    <section id="how-it-works" className="bg-background-dark scroll-mt-24 md:scroll-mt-28">
      <div className="p-5 md:p-10 lg:p-20 lg:pb-5 grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-20">
        <HowItWorksContent steps={steps} />
        <HowItWorksImage />
      </div>
    </section>
  );
}