// HeroNex — NEX Higiene & Seguridad
function HeroNex() {
  return (
    <section className="hn-section">
      <video autoPlay muted loop playsInline className="hn-video">
        <source src="assets/video-hero-10s.mp4.mp4" type="video/mp4" />
      </video>

      <div className="hn-overlay" />

      <div className="hn-content">
        <div className="hn-inner">
          <div className="hn-card">
            <h1 className="hn-title">Consultora de Higiene y Seguridad</h1>

            <p className="hn-sub">
              Acompañamos a nuestros clientes en el{' '}
              <span className="hn-red">cumplimiento de la normativa legal vigente</span>
              {' '}y en la implementación de sus políticas internas de cada empresa.
            </p>

            <a href="#contacto" className="hn-cta">CONOCÉ MÁS</a>
          </div>
        </div>
      </div>

      <style>{`
        /* ── Section ── */
        .hn-section {
          position: relative;
          width: 100%;
          height: 100vh;
          min-height: 700px;
          background: #1a1a1a;
          overflow: hidden;
        }

        /* ── Video ── */
        .hn-video {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 0;
        }

        /* ── Overlay ── */
        .hn-overlay {
          position: absolute;
          inset: 0;
          background: linear-gradient(to right, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
          z-index: 1;
        }

        /* ── Content wrapper (alineado con el container del nav) ── */
        .hn-content {
          position: absolute;
          inset: 0;
          z-index: 2;
          display: flex;
          align-items: flex-start;
        }
        .hn-inner {
          width: 100%;
          max-width: 1240px;
          margin: 0 auto;
          padding: 180px 28px 0;
        }

        /* ── Card ── */
        .hn-card {
          max-width: 588px;
          display: flex;
          flex-direction: column;
          gap: 48px;
          padding: 40px 32px;
          border-radius: 40px 8px 40px 8px;
          background: rgba(136, 136, 136, 0.56);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
        }

        /* ── Título ── */
        .hn-title {
          font-family: 'Archivo', sans-serif;
          text-transform: uppercase;
          font-weight: 800;
          font-size: 42px;
          line-height: 1.1;
          color: #FFFFFF;
          margin: 0;
        }

        /* ── Subtítulo ── */
        .hn-sub {
          font-family: 'Rubik', sans-serif;
          font-size: 16px;
          font-weight: 400;
          line-height: 1.6;
          color: #FFFFFF;
          margin: 0;
        }
        .hn-red {
          color: #FFFFFF;
          font-weight: 700;
        }

        /* ── CTA ── */
        .hn-cta {
          align-self: flex-start;
          display: inline-block;
          padding: 14px 28px;
          background: #FF0000;
          color: #FFFFFF;
          font-family: 'Rubik', sans-serif;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          border-radius: 6px;
          text-decoration: none;
          transition: background .2s ease;
        }
        .hn-cta:hover { background: #cc0000; }

        /* ── Tablet (768–1024px) ── */
        @media (max-width: 1024px) and (min-width: 768px) {
          .hn-inner {
            padding: 150px 40px 0;
          }
          .hn-card {
            max-width: 480px;
          }
          .hn-title {
            font-size: 34px;
          }
        }

        /* ── Mobile (<768px) ── */
        @media (max-width: 767px) {
          .hn-section {
            height: auto;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding-top: 76px;
            padding-bottom: 40px;
          }
          .hn-content {
            position: relative;
            inset: auto;
            flex: 1;
            align-items: center;
          }
          .hn-inner {
            padding: 24px 0;
            max-width: 100%;
          }
          .hn-card {
            max-width: 85%;
            margin: 0 0 0 16px;
            padding: 20px 16px;
            border-radius: 24px 6px 24px 6px;
            gap: 24px;
            background: rgba(136, 136, 136, 0.45);
          }
          .hn-title {
            font-size: 24px;
          }
          .hn-sub {
            font-size: 14px;
          }
          .hn-cta {
            padding: 12px 24px;
            font-size: 13px;
          }
        }
      `}</style>
    </section>
  );
}

window.Hero = HeroNex;