/* global React */
function NxHero({ lang }) {
  const t = window.NX_COPY[lang].hero;
  const products = window.NX_COPY[lang].products.items;
  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>

          {/* Product cards */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 24,
            marginTop: 56,
            maxWidth: 840,
          }}>
            {products.map((p) => (
              <a
                key={p.name}
                href={p.href}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 12,
                  padding: "32px 28px",
                  borderRadius: 8,
                  border: p.accent ? "1px solid var(--nx-green)" : "1px solid var(--border-strong)",
                  background: p.accent ? "rgba(92,185,71,0.05)" : "#fff",
                  textDecoration: "none",
                  color: "var(--fg)",
                  transition: "box-shadow 0.2s ease, border-color 0.2s ease",
                  cursor: "pointer",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 4px 24px rgba(0,0,0,0.08)"; e.currentTarget.style.borderColor = p.accent ? "var(--nx-green)" : "var(--nx-blue)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = p.accent ? "var(--nx-green)" : "var(--border-strong)"; }}
              >
                <span style={{
                  fontSize: 11,
                  fontWeight: 700,
                  textTransform: "uppercase",
                  letterSpacing: "0.16em",
                  color: p.accent ? "var(--nx-green)" : "var(--nx-blue)",
                }}>{p.tag}</span>
                <span style={{
                  fontFamily: "var(--font-display)",
                  fontWeight: 700,
                  fontSize: 22,
                  letterSpacing: "-0.01em",
                  color: "var(--fg)",
                  lineHeight: 1.2,
                }}>{p.name}</span>
                <span style={{
                  fontSize: 14,
                  lineHeight: 1.5,
                  color: "var(--fg-muted)",
                }}>{p.tagline}</span>
                <span style={{
                  marginTop: 8,
                  fontSize: 13,
                  fontWeight: 600,
                  color: p.accent ? "var(--nx-green)" : "var(--nx-blue)",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                }}>{p.cta} →</span>
              </a>
            ))}
          </div>

          <div className="nx-hero__stops" style={{ marginTop: 48 }}>
            <span>Future-driven.</span>
            <span>Structured.</span>
            <span className="accent">Essential.</span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.NxHero = NxHero;