const Education = () => {
  const cards = t("education.cards");
  return (
    <section id="info" style={{ background: "var(--surface-2)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">{t("education.eyebrow")}</span>
          <h2>{t("education.title")}</h2>
          <p>{t("education.intro")}</p>
        </div>

        <div className="grid-3">
          {cards.map((c, i) => (
            <article key={i} className="card" style={{ display: "grid", gap: 16, background: "var(--surface)" }}>
              <span className="chip chip-mint" style={{ width: "fit-content" }}>{c.tag}</span>
              <h3 style={{ fontSize: "calc(22px * var(--scale))", fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.02em" }}>{c.t}</h3>
              <p style={{ color: "var(--ink-2)", fontSize: "calc(15px * var(--scale))", lineHeight: 1.6 }}>{c.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Education });