import { pillars, type Locale } from "@/content/site";
import { translations } from "@/content/translations";

export function GrowthSystem({ locale }: { locale: Locale }) {
  const t = translations[locale];
  const label = {
    fr: "Les six piliers du système de croissance",
    en: "Six Growth System pillars",
    ar: "ركائز نظام النمو الست",
  }[locale];
  return (
    <ol className="growth-system" aria-label={label}>
      {pillars.map((pillar, index) => (
        <li key={pillar} data-reveal>
          <span className="system-index">{String(index + 1).padStart(2, "0")}</span>
          <div>
            <h3>{t.pillars[pillar].name}</h3>
            <p>{t.pillars[pillar].text}</p>
          </div>
          <i className="system-connector" aria-hidden="true" />
        </li>
      ))}
    </ol>
  );
}