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

export function BenefitsSection() {
  return (
    <Section>
      <h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
        {BENEFITS_CONFIG.title}
      </h2>
      <p className="mb-10 text-center text-[var(--muted-foreground)] sm:mb-12 md:mb-16">
        {BENEFITS_CONFIG.subtitle}
      </p>
      <div className="space-y-4 sm:space-y-6">
        {BENEFITS_CONFIG.items.map((b, i) => (
          <div
            key={b.num}
            className="hover-shimmer animate__animated animate__fadeInUp flex flex-col gap-4 rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 transition-all duration-300 hover:border-[var(--accent)]/30 hover:-translate-y-0.5 sm:flex-row sm:gap-6 sm:rounded-2xl sm:p-6"
            style={{ animationDelay: `${i * 0.08}s`, animationFillMode: "both" }}
          >
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--accent-muted)] text-base font-bold text-[var(--accent)] sm:h-12 sm:w-12 sm:text-lg">
              {b.num}
            </div>
            <div className="min-w-0 flex-1">
              <h3 className="mb-1 font-semibold">{b.title}</h3>
              <p className="text-sm text-[var(--muted-foreground)]">{b.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}