/* MStheory website — Topics grid */
const { TopicCard } = window.MStheoryDesignSystem_61eb29;

function Topics({ t, lang, onTopic }) {
  return (
    <section id="topics" style={{ position: "relative", paddingBlock: "var(--space-32)" }}>
      <div className="ms-container">
        <div style={{ textAlign: "center", maxWidth: "640px", margin: "0 auto var(--space-12)" }}>
          <p className="ms-eyebrow">{t.topics.eyebrow}</p>
          <h2 style={{ fontSize: "var(--text-2xl)", marginTop: "12px", marginBottom: "14px" }}>{t.topics.title}</h2>
          <p style={{ color: "var(--text-secondary)", fontSize: "var(--text-md)" }}>{t.topics.sub}</p>
        </div>
        <div className="ms-topic-grid">
          {window.MS_TOPICS.map((tp) => (
            <TopicCard
              key={tp.id}
              title={tp.names[lang] || tp.names.nl}
              description={tp.desc[lang] || tp.desc.nl}
              code={tp.code}
              count={tp.count}
              iconSrc={`../../assets/icons/${tp.icon}.svg`}
              locked
              onClick={() => onTopic(tp.id)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
window.Topics = Topics;