const pillars = [
  { key: "mind", label: "Mind", blurb: "Focus & recreation" },
  { key: "body", label: "Body", blurb: "Strength & vitality" },
  { key: "soul", label: "Soul", blurb: "Craft & nourishment" },
];

export function PillarStrip() {
  return (
    <div className="border-y border-[var(--color-border)] bg-[var(--color-surface)] py-8 md:py-10">
      <div className="container-xl">
        <div className="grid grid-cols-1 gap-8 text-center sm:grid-cols-3 sm:gap-4">
          {pillars.map((pillar, i) => (
            <div
              key={pillar.key}
              className={`flex flex-col items-center gap-2 ${
                i < pillars.length - 1
                  ? "sm:border-r sm:border-[var(--color-border)]"
                  : ""
              }`}
            >
              <span className="text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-heading)]">
                {pillar.label}
              </span>
              <span className="text-sm text-[var(--color-text-muted)]">
                {pillar.blurb}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
