import SectionHeader from "@/components/home/SectionHeader";
import { toneClasses } from "@/components/home/FeaturesSection";
import type { getHomeData } from "@/data/home.data";

export default function AudienceSection({
  audiences,
  subtitle,
  title,
}: {
  audiences: ReturnType<typeof getHomeData>["audiences"];
  subtitle: string;
  title: string;
}) {
  return (
    <section id="industries" className="mx-auto max-w-[1360px] scroll-mt-20 px-6 py-7 xl:px-8">
      <SectionHeader title={title} subtitle={subtitle} />

      <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
        {audiences.map((item) => {
          const Icon = item.icon;
          return (
            <article
              key={item.title}
              className="flex min-h-[94px] items-center gap-3 rounded-[12px] border border-[#e8edf5] bg-white px-3 py-3 shadow-[0_4px_12px_rgba(51,66,116,0.035)] transition-transform hover:-translate-y-1"
            >
              <div className={`grid h-10 w-10 shrink-0 place-items-center rounded-full ${toneClasses[item.tone]}`}>
                <Icon size={19} strokeWidth={1.8} />
              </div>
              <div>
                <h3 className="text-[12px] font-extrabold text-[#273154]">{item.title}</h3>
                <p className="mt-1 text-[10px] leading-[1.55] text-[#8490a6]">{item.desc}</p>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}