/* PortalHero.jsx — Bifurcación diagonal Legal / Técnico.
 *
 * Inspirado en el referente del cliente: dos mitades separadas por una línea
 * diagonal, con un medallón circular central que carga la marca institucional.
 * El lado izquierdo (Legal) lee oscuro y editorial; el derecho (Técnico)
 * lee más claro y dinámico, con verde como acento secundario.
 *
 * Los chips de servicios se movieron a la banda <PortalCards/> de abajo.
 */

function PortalHero({ onSelect }) {
  const go = (variant) => {
    if (onSelect) onSelect(variant);else
    {
      window.location.href = variant === "legal" ? "servicios-legales.html" : "servicios-tecnicos.html";
    }
  };

  return (
    <section className="hero-split" id="inicio" data-screen-label="01 Hero">
      {/* Lado izquierdo — Servicios Legales */}
      <div className="side legal"
      role="button" tabIndex={0}
      onClick={() => go("legal")}
      onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();go("legal");}}}>
        <div className="photo" aria-hidden="true"></div>
        <div className="veil" aria-hidden="true"></div>
        <div className="content">
          <h2>
            Soluciones<br /><em>Legales</em>
          </h2>
          <button className="card-cta" onClick={(e) => {e.stopPropagation();go("legal");}}>
            Ver Servicios Legales
            <i data-lucide="arrow-right"></i>
          </button>
        </div>
      </div>

      {/* Lado derecho — Servicios Técnicos */}
      <div className="side tecnico"
      role="button" tabIndex={0}
      onClick={() => go("tecnico")}
      onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();go("tecnico");}}}>
        <div className="photo" aria-hidden="true"></div>
        <div className="veil" aria-hidden="true"></div>
        <div className="content">
          <h2>
            Soluciones<br /><em>Técnicas</em>
          </h2>
          <button className="card-cta" onClick={(e) => {e.stopPropagation();go("tecnico");}}>
            Ver Servicios Técnicos
            <i data-lucide="arrow-right"></i>
          </button>
        </div>
      </div>

      {/* Medallón central que une las dos mitades */}
      <div className="hero-medallion" aria-hidden="true">
        <img src="assets/hondulegal-logo.png" alt="" />
      </div>
    </section>);

}

Object.assign(window, { PortalHero });