"use client";

import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

import { IconBadge } from "./IconBadge";
import { Section } from "./Section";
import { SectionHeading } from "./SectionHeading";
import { SECTION_IDS, STEPS } from "./lib/content";

/** Five-step timeline from location to a sparkling clean car. */
export function HowItWorksSection() {
  const { t } = useTranslation();

  return (
    <Section id={SECTION_IDS.how} className="bg-white">
      <div className="flex flex-col gap-12">
        <SectionHeading
          eyebrow={t("home.how.eyebrow")}
          title={t("home.how.title")}
          subtitle={t("home.how.subtitle")}
        />

        <ol className="grid gap-8 lg:grid-cols-5">
          {STEPS.map(({ key, icon }, index) => (
            <li
              key={key}
              className="flex flex-col items-center gap-3 text-center lg:items-start lg:text-start"
            >
              <div className="flex w-full items-center justify-between">
                <IconBadge icon={icon} size="lg" />
                <Typography
                  as="span"
                  variant="number"
                  className="text-[44px] leading-none font-bold text-primary-blue/15"
                >
                  {String(index + 1).padStart(2, "0")}
                </Typography>
              </div>
              <Typography
                as="span"
                variant="caption"
                className="font-semibold tracking-wide text-primary-blue uppercase"
              >
                {t("home.how.stepLabel", { number: index + 1 })}
              </Typography>
              <div className="flex flex-col gap-1">
                <Typography as="h3" variant="h3">
                  {t(`home.how.steps.${key}.title`)}
                </Typography>
                <Typography variant="body" color="secondary">
                  {t(`home.how.steps.${key}.description`)}
                </Typography>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </Section>
  );
}