type CourseCatalogIntroProps = {
  totalCourses: number;
  totalLessons: number;
  instructorCount: number;
};

export default function CourseCatalogIntro({ totalCourses, totalLessons, instructorCount }: CourseCatalogIntroProps) {
  return (
    <section className="acve-panel acve-section-base">
      <p className="acve-pill mb-4 w-fit text-sm">Catálogo</p>
      <h1 className="acve-heading text-3xl leading-tight md:text-4xl">Formación Académica</h1>
      <p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted-foreground md:text-base">
        Programas de inglés jurídico estructurados por etapa académica para acompañar un progreso sólido, práctico y
        alineado con escenarios profesionales internacionales.
      </p>

      <div className="mt-5 grid gap-3 sm:grid-cols-3">
        <article className="rounded-2xl border border-border/80 bg-card/70 px-4 py-3">
          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Programas activos</p>
          <p className="mt-1 text-2xl font-semibold text-foreground">{totalCourses}</p>
        </article>
        <article className="rounded-2xl border border-border/80 bg-card/70 px-4 py-3">
          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Lecciones publicadas</p>
          <p className="mt-1 text-2xl font-semibold text-foreground">{totalLessons}</p>
        </article>
        <article className="rounded-2xl border border-border/80 bg-card/70 px-4 py-3">
          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Equipo docente</p>
          <p className="mt-1 text-2xl font-semibold text-foreground">{instructorCount}</p>
        </article>
      </div>
    </section>
  );
}