---
/**
 * EducationHistory.astro
 * ---------------------------------------------------------------------------
 * Card grid for the Education section of the Professional page. Each entry is a
 * degree/diploma with institution, period, and optional detail. Data is seeded
 * with placeholder rows (Greg to fill); swap the array below with real entries.
 *
 * Mirrors the Timeline/ProjectCard card aesthetic: raised surface, hairline
 * border, gold accent for the credential, mono period label.
 */
import Icon from "@components/Icon.astro";

interface EduEntry {
  icon: string;
  credential: string;
  institution: string;
  period: string;
  detail?: string;
}

// Placeholder entries — replace with Greg's real education history.
const entries: EduEntry[] = [
  {
    icon: "school",
    credential: "B.S., Computer Science",
    institution: "Drexel University",
    period: "2014 – 2018",
    detail:
      "Foundational coursework in software engineering, algorithms, and systems. Focuses in AI and human-computer interaction.",
  },
];
---

<div class="grid gap-4 sm:grid-cols-2">
  {
    entries.map((e) => (
      <article class="card flex flex-col gap-3">
        <div class="flex items-start gap-3">
          <span
            class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
            style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
            aria-hidden="true"
          >
            <Icon name={e.icon} class="h-5 w-5" />
          </span>
          <div class="flex flex-col gap-1">
            <h3 class="font-display text-lg" style="color: var(--color-text);">
              {e.credential}
            </h3>
            <p
              class="font-sans font-semibold"
              style="color: var(--color-accent);"
            >
              {e.institution}
            </p>
            <span
              class="font-eyebrow text-xs uppercase tracking-[0.18em]"
              style="color: var(--color-text-subtle);"
            >
              {e.period}
            </span>
          </div>
        </div>
        {e.detail && (
          <p
            class="text-sm leading-relaxed"
            style="color: var(--color-text-muted);"
          >
            {e.detail}
          </p>
        )}
      </article>
    ))
  }
</div>