/* global React */
function EventBanner() {
  const { t } = window.useT();
  const e = t.event;
  return (
    <section id="event" className="section-sm">
      <div className="container">
        <div className="event-banner">
          <div className="event-stripe">
            <span className="event-flag" aria-hidden="true">
              <svg viewBox="0 0 24 16" width="22" height="14"><rect width="24" height="16" fill="#009C3B"/><path d="M12 2 22 8l-10 6L2 8z" fill="#FFDF00"/><circle cx="12" cy="8" r="3" fill="#002776"/></svg>
            </span>
            <span className="event-kicker">{e.kicker}</span>
            <span className="event-pulse" aria-hidden="true"><span></span></span>
          </div>
          <div className="event-grid">
            <div>
              <h2 className="event-title">{e.title}</h2>
              <p className="event-sub">{e.sub}</p>
              <div className="event-actions">
                <a href="#cta" className="btn btn-primary">{e.btn} <span className="arrow">→</span></a>
                <a href="#cta" className="btn btn-ghost">{e.btnAlt}</a>
              </div>
            </div>
            <div className="event-meta">
              <div className="event-meta-row">
                <span className="event-meta-lbl">{e.whereLbl}</span>
                <span className="event-meta-val">{e.where}</span>
              </div>
              <div className="event-meta-row">
                <span className="event-meta-lbl">{e.meetingsLbl}</span>
                <span className="event-meta-val">{e.meetings}</span>
              </div>
              <div className="event-meta-row">
                <span className="event-meta-lbl">{e.delegationLbl}</span>
                <span className="event-meta-val">{e.delegation}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.EventBanner = EventBanner;