// certs.jsx

function Certs({ t }) {
  return (
    <section className="section" data-screen-label="06 Zertifikate">
      <div className="section-tag">{t.certs.tag}</div>
      <h2 className="section-title">{t.certs.title} <em>{t.certs.titleEm}</em></h2>
      <div className="certs-grid">
        {t.certs.items.map((c, i) => (
          <div key={i} className="cert">
            <div className="seal">{c.seal}</div>
            <h4>{c.t}</h4>
            <div className="meta">{c.m}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Testimonial({ t }) {
  return (
    <section className="testimonial" data-screen-label="07 Anerkennung">
      <div className="section-tag" style={{ textAlign: "center", justifyContent: "center" }}>
        {t.testimonial.tag}
      </div>
      <blockquote className="testimonial-q">
        {t.testimonial.q}
      </blockquote>
      <div className="testimonial-cite">
        <strong>{t.testimonial.who}</strong> · {t.testimonial.role}
      </div>
    </section>
  );
}

window.Certs = Certs;
window.Testimonial = Testimonial;