/* ContactCTA.jsx — replaces WhyUs.
 * Two prominent contact options: WhatsApp and Email, each as a big card.
 * Variant changes the accent color (teal for legal, navy for tecnico).
 */
function ContactCTA({ variant, heading, lede }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  const WHATSAPP_NUMBER = "50499068301";
  const EMAIL = "servicioalcliente@hondulegal.com";
  const wapMsg = variant === "legal" ?
  "Hola, me gustaría agendar una consulta sobre servicios legales." :
  "Hola, me gustaría agendar una reunión sobre servicios técnicos.";
  const wapHref = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(wapMsg)}`;
  const mailSubject = variant === "legal" ? "Consulta — Servicios Legales" : "Consulta — Servicios Técnicos";
  const mailHref = `mailto:${EMAIL}?subject=${encodeURIComponent(mailSubject)}`;

  return (
    <section className="int-section" id="contacto">
      <div className="int-container">
        <div className="int-section-head center">
          <h2>{heading}</h2>
          <p>{lede}</p>
        </div>

        <div className={"contact-grid " + variant}>
          <a className="contact-card whatsapp" href={wapHref} target="_blank" rel="noopener noreferrer">
            <div className="ic">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.8-.9-2.9-1.6-4.1-3.6-.3-.5.3-.5.9-1.6.1-.2 0-.4-.1-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0s-.5.1-.8.4c-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.4 5.2L2 22l4.9-1.3c1.5.8 3.2 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.7 0-3.4-.5-4.8-1.3l-.3-.2-3.3.9.9-3.2-.2-.3C3.4 15 2.8 13.5 2.8 12 2.8 6.9 6.9 2.8 12 2.8s9.2 4.1 9.2 9.2c0 5.1-4.1 9.2-9.2 9.2z" />
              </svg>
            </div>
            <div className="body">
              <div className="label">WhatsApp</div>
              <div className="value" style={{ fontSize: "18px" }}>+(504) 9906-8301</div>
              <p className="hint">Respuesta directa con un especialista en menos de 24 horas.</p>
            </div>
            <span className="arrow"><i data-lucide="arrow-up-right"></i></span>
          </a>

          <a className="contact-card email" href={mailHref}>
            <div className="ic">
              <i data-lucide="mail"></i>
            </div>
            <div className="body">
              <div className="label">Correo electrónico</div>
              <div className="value" style={{ fontSize: "18px" }}>{EMAIL}</div>
              <p className="hint">Cuéntanos los detalles del caso y adjunta cualquier documento.</p>
            </div>
            <span className="arrow"><i data-lucide="arrow-up-right"></i></span>
          </a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { ContactCTA });