import { CheckCircle2 } from "lucide-react";
import type { Messages } from "@/messages";
import AnimatedSection from "./AnimatedSection";
import SectionHeader from "./SectionHeader";

export default function AboutSection({ t }: { t: Messages }) {
  return (
    <AnimatedSection className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-7xl rounded-[2.8rem] bg-white/70 p-6 shadow-glass ring-1 ring-ink/5 backdrop-blur sm:p-10 lg:p-14">
        <SectionHeader eyebrow={t.about.eyebrow} title={t.about.title} body={t.about.body} />
        <div className="mt-10 grid gap-4 md:grid-cols-3">
          {t.about.cards.map((card) => (
            <div key={card} className="flex items-center gap-3 rounded-3xl border border-ink/8 bg-smoke/70 p-5 text-sm font-semibold text-ink/72">
              <CheckCircle2 className="shrink-0 text-optical" size={20} />
              <span>{card}</span>
            </div>
          ))}
        </div>
      </div>
    </AnimatedSection>
  );
}