/* PortalCards.jsx — Banda de servicios bajo el hero.
 *
 * Match exacto al referente: dos columnas horizontales con 4 servicios
 * cada una, cada uno con ícono lineal y label centrado. En el centro,
 * un botón "+" para ver más. Sin descripciones, sin chrome — minimal.
 */
function PortalCards({ onSelect }) {
  const go = (variant) => {
    if (onSelect) onSelect(variant);else
    {
      window.location.href = variant === "legal" ? "servicios-legales.html" : "servicios-tecnicos.html";
    }
  };

  const legalItems = [
  { icon: "scale",        label: "Asesoría Legal" },
  { icon: "file-check-2", label: "Trámites y Registros" },
  { icon: "pen-line",     label: "Contratos" },
  { icon: "users",        label: "Representación" }];

  const tecnicoItems = [
  { icon: "compass",      label: "Estrategia y Planificación" },
  { icon: "wallet",       label: "Finanzas y Presupuestos" },
  { icon: "activity",     label: "Monitoreo, Evaluación y Aprendizaje" },
  { icon: "book-open",    label: "Investigación Aplicada" }];


  return (
    <section className="services-grid" id="servicios" data-screen-label="02 Servicios">
      <div className="sg-col sg-legal">
        <h3 className="sg-title">Soluciones Legales</h3>
        <span className="sg-rule" aria-hidden="true"></span>
        <ul className="sg-list">
          {legalItems.map((it) =>
          <li className="sg-item" key={it.label}>
              <span className="sg-ico" aria-hidden="true"><i data-lucide={it.icon}></i></span>
              <span className="sg-label">{it.label}</span>
            </li>
          )}
        </ul>
      </div>

      {/* Botón "+" central — ver más */}
      <button className="sg-plus" onClick={() => go("legal")} aria-label="Ver más servicios">
        <i data-lucide="plus"></i>
      </button>

      <div className="sg-col sg-tecnico">
        <h3 className="sg-title">Soluciones Técnicas</h3>
        <span className="sg-rule" aria-hidden="true"></span>
        <ul className="sg-list">
          {tecnicoItems.map((it) =>
          <li className="sg-item" key={it.label}>
              <span className="sg-ico" aria-hidden="true"><i data-lucide={it.icon}></i></span>
              <span className="sg-label">{it.label}</span>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

Object.assign(window, { PortalCards });