import { Section } from "../Section";
import { AUDIENCE_CONFIG } from "../../config/course";

export function AudienceSection() {
  return (
    <Section>
      <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
        {AUDIENCE_CONFIG.title}
      </h2>
      <p className="mb-10 text-center text-[var(--muted-foreground)] sm:mb-12 md:mb-16">
        {AUDIENCE_CONFIG.subtitle}
      </p>
      <div className="grid gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
        {AUDIENCE_CONFIG.items.map((a, i) => (
          <div
            key={a.title}
            className="hover-shimmer animate__animated animate__fadeInUp rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 transition-all duration-300 hover:border-[var(--accent)]/30 hover:bg-[var(--muted)] hover:-translate-y-0.5 sm:rounded-2xl sm:p-6"
            style={{ animationDelay: `${i * 0.1}s`, animationFillMode: "both" }}
          >
            <div className="mb-3 text-2xl sm:mb-4 sm:text-3xl">{a.emoji}</div>
            <h3 className="mb-2 font-semibold">{a.title}</h3>
            <p className="text-sm text-[var(--muted-foreground)]">{a.desc}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}