// Landing — Portal de selección Guaca Repuestos
(function () {

  function App() {
    return (
      <div className="ld-root">

        {/* ── Mitad izquierda — Solicitud nueva ── */}
        <a className="ld-half ld-half-left" href="/solicitud">
          <div className="ld-deco" />
          <div className="ld-content">
            <span className="ld-chip ld-chip-yellow">Solicitud nueva</span>
            <h2 className="ld-title ld-title-yellow">
              Código de<br/><em>Cliente</em>
            </h2>
            <p className="ld-desc">
              ¿Repuestera? Solicitá tu código
              para acceder a precios y catálogo mayorista.
            </p>
            <div className="ld-btn ld-btn-yellow">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
              </svg>
              Solicitar código
            </div>
          </div>
        </a>

        {/* Badge central sobre el borde */}
        <div className="ld-badge">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="9 18 15 12 9 6"/>
          </svg>
        </div>

        {/* ── Mitad derecha — Cambio de código ── */}
        <a className="ld-half ld-half-right" href="/cambio">
          <div className="ld-deco" />
          <div className="ld-content">
            <span className="ld-chip ld-chip-red">Actualización</span>
            <h2 className="ld-title ld-title-red">
              Cambio de<br/><em>Código</em>
            </h2>
            <p className="ld-desc">
              ¿Ya sos cliente y cambiaste de razón social o datos?
              Actualizá tu código de cliente existente.
            </p>
            <div className="ld-btn ld-btn-red">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
              </svg>
              Actualizar código
            </div>
          </div>
        </a>

        {/* Footer */}
        <p className="ld-foot">
          © {new Date().getFullYear()} Repuestos La Guaca · Paso Ancho, San José · (506) 2217-1818
        </p>

      </div>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
})();