/* global React */
function NxHero({ lang, onNav }) {
  const t = window.NX_COPY[lang].hero;
  return (
    <section className="nx-hero" id="top">
      <div className="nx-hero__visual" aria-hidden>
        <div className="nx-hero__grid"></div>
        <div className="nx-hero__strokes">
          <svg viewBox="0 0 800 900" preserveAspectRatio="none">
            <line className="s1 anim" x1="0" y1="900" x2="800" y2="100" />
            <line className="s2 anim anim2" x1="120" y1="900" x2="920" y2="100" />
            <line className="s2 anim anim2" x1="-120" y1="900" x2="680" y2="100" />
            <line className="s3 anim anim3" x1="540" y1="160" x2="720" y2="0" />
            <path className="s1 anim" d="M 200 720 L 480 480 L 480 280 L 720 60" />
            <circle cx="480" cy="480" r="3" fill="#5CB947" />
            <circle cx="480" cy="280" r="3" fill="#1F4E79" />
          </svg>
        </div>
      </div>
      <div className="nx-container nx-container--wide">
        <div className="nx-hero__content nx-reveal is-in">
          <div className="nx-hero__eyebrow">
            <span className="dot" aria-hidden></span>
            <span>{t.eyebrow}</span>
          </div>
          <h1 className="nx-display" style={{ marginTop: 32 }}>{t.headline}</h1>
          <p className="nx-hero__sub">{t.sub}</p>
          <div className="nx-hero__cta">
            <button className="nx-btn nx-btn--primary" onClick={() => onNav("services")}>
              {window.NX_COPY[lang].cta.services}<span className="arrow" aria-hidden>→</span>
            </button>
            <button className="nx-btn nx-btn--ghost" onClick={() => onNav("contact")}>
              {window.NX_COPY[lang].cta.contact}
            </button>
          </div>
          <div className="nx-hero__stops">
            <span>Future-driven.</span>
            <span>Structured.</span>
            <span className="accent">Essential.</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.NxHero = NxHero;