/* contactoApp.jsx — Página de Contacto. Logo HONDULegal grande arriba,
 * sección ContactCTA reutilizada (WhatsApp + email) y CTABanner.
 */
function ContactoApp() {
  const [themisxOpen, setThemisxOpen] = React.useState(false);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  React.useEffect(() => {
    document.body.style.overflow = themisxOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [themisxOpen]);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setThemisxOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <>
      <Header onThemisXClick={() => setThemisxOpen(true)} activePath="contacto" />

      <section className="contacto-hero">
        <div className="int-container">
          <nav className="int-breadcrumb" aria-label="Breadcrumb">
            <a href="index.html">Inicio</a>
            <span className="sep">/</span>
            <span className="current">Contacto</span>
          </nav>
          <div className="contacto-logo-wrap">
            <img src="assets/hondulegal-logo.png" alt="HONDULegal" className="contacto-logo" />
          </div>
        </div>
      </section>

      <ContactCTA
        variant="legal"
        heading="Contáctanos por:"
        lede="Escríbenos por WhatsApp o por correo electrónico y un especialista te responde en menos de 24 horas."
      />

      <section className="int-section contacto-socials">
        <div className="int-container">
          <div className="int-section-head center">
            <h2>Sigue nuestras <em>redes sociales</em></h2>
          </div>
          <div className="socials-grid">
            <a className="social-btn social-instagram" href="https://www.instagram.com/hondulegal_hn/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
              <div className="social-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <rect x="2" y="2" width="20" height="20" rx="5"/>
                  <circle cx="12" cy="12" r="5"/>
                  <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/>
                </svg>
              </div>
              <span className="social-label">@hondulegal_hn</span>
            </a>
            <a className="social-btn social-facebook" href="https://www.facebook.com/profile.php?id=61566177717471" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
              <div className="social-icon">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.875V12h3.328l-.532 3.47h-2.796v8.384C19.612 22.954 24 17.99 24 12z"/>
                </svg>
              </div>
              <span className="social-label">HONDULegal</span>
            </a>
            <a className="social-btn social-tiktok" href="https://www.tiktok.com/@hondulegal.com" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
              <div className="social-icon">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.27 6.27 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.34-6.34V9.75a8.16 8.16 0 0 0 4.79 1.53V7.85a4.84 4.84 0 0 1-1.03-.16v-.01z"/>
                </svg>
              </div>
              <span className="social-label">@hondulegal.com</span>
            </a>
            <a className="social-btn social-linkedin" href="https://www.linkedin.com/company/hondulegal" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
              <div className="social-icon">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
              </div>
              <span className="social-label">HONDULegal</span>
            </a>
          </div>
        </div>
      </section>

      <CTABanner
        variant="legal"
        secondaryLabel="Consultar a ThemisX"
        onSecondary={() => setThemisxOpen(true)}
      />

      <SiteFooter />

      <ThemisXModal open={themisxOpen} onClose={() => setThemisxOpen(false)} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ContactoApp />);