/* MStheory website — image showcase band (AI-generated theme imagery) */
function Showcase({ t, lang }) {
  const copy = {
    nl: { eyebrow: "Echte examenstof", title: "Leer op de weg, niet uit je hoofd", sub: "Elke vraag plaatst je in een echte verkeerssituatie — met beeld en uitleg." },
    en: { eyebrow: "Real exam material", title: "Learn on the road, not by heart", sub: "Every question puts you in a real traffic situation — with imagery and explanation." },
    ar: { eyebrow: "مادة امتحان حقيقية", title: "تعلّم على الطريق، لا بالحفظ", sub: "كل سؤال يضعك في موقف مروري حقيقي — بالصورة والشرح." },
    uk: { eyebrow: "Справжній матеріал", title: "Вчіться на дорозі, а не напам'ять", sub: "Кожне питання — реальна дорожня ситуація з зображенням і поясненням." },
    tr: { eyebrow: "Gerçek sınav içeriği", title: "Ezberle değil, yolda öğren", sub: "Her soru sizi gerçek bir trafik durumuna koyar — görsel ve açıklamayla." },
  };
  const c = copy[lang] || copy.nl;

  return (
    <section style={{ position: "relative", paddingBlock: "var(--space-24)" }}>
      <div className="ms-container">
        <div style={{ textAlign: "center", maxWidth: "640px", margin: "0 auto var(--space-12)" }}>
          <p className="ms-eyebrow">{c.eyebrow}</p>
          <h2 style={{ fontSize: "var(--text-2xl)", marginTop: "12px", marginBottom: "12px" }}>{c.title}</h2>
          <p style={{ color: "var(--text-secondary)", fontSize: "var(--text-md)" }}>{c.sub}</p>
        </div>
        <div className="ms-showcase-grid">
          <figure className="ms-shot ms-shot-wide">
            <img src="../../assets/landing/hero-road.webp" alt="" />
            <figcaption>Vrachtwagen &amp; auto · A12</figcaption>
          </figure>
          <figure className="ms-shot">
            <img src="../../assets/landing/motor-curve.webp" alt="" />
            <figcaption>Motor · bochttechniek</figcaption>
          </figure>
          <figure className="ms-shot">
            <img src="../../assets/landing/wheel-pov.webp" alt="" />
            <figcaption>Voertuigbeheersing</figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}
window.Showcase = Showcase;