const Hero = ({ t }) => (
  <section id="top" className="hero">
    <div className="container">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">{t.hero_eyebrow}</div>
          <h1 className="hero-title">
            {t.hero_title_a} <span className="accent">{t.hero_title_b}</span>
          </h1>
          <p className="hero-lede">{t.hero_lede}</p>
          <div className="hero-cta">
            <a href="#form" className="btn btn-primary">
              {t.hero_cta_primary}
              <i data-lucide="arrow-right"></i>
            </a>
            <a href="#units" className="btn btn-outline">
              {t.hero_cta_secondary}
            </a>
          </div>
        </div>
        <figure className="hero-image">
          <div className="hero-image-frame">
            <img
              src="assets/tug-reference-photo.jpg"
              alt=""
              role="presentation"
            />
          </div>
          <figcaption>{t.img_caption}</figcaption>
        </figure>
      </div>
      <aside className="hero-notice" aria-label={t.hero_notice_label}>
        <div className="hero-notice-head">
          <i data-lucide="alert-triangle"></i>
          <span>{t.hero_notice_label}</span>
        </div>
        <p>{t.hero_notice}</p>
      </aside>
    </div>
  </section>
);

window.Hero = Hero;