/* global React, Reveal, Cta */

function Contato({ avatar }) {
  return (
    <section className="contact" data-screen-label="06 Contato">
      <div className="container">
        <div className="contact-cta-wrap">
          <Cta>Agendar consulta</Cta>
        </div>

        <div className="contact-id">
          <div className="contact-id-avatar" style={{ backgroundImage: `url(${avatar})` }} />
          <div>
            <h3 className="contact-id-name">Dra. Fernanda Quilles</h3>
            <div className="contact-id-role">Cirurgiã-Dentista</div>
          </div>
        </div>

        <div className="contact-grid">
          <Reveal className="contact-map">
            <iframe
              title="Localização do consultório"
              src="https://www.google.com/maps?q=Av.+Dr.+Renato+de+Andrade+Maia,+1609&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </Reveal>

          <Reveal delay={1}>
            <h2 className="contact-info-title">Endereço<br/>e <em>contatos.</em></h2>

            <div className="contact-block">
              <div className="contact-label">Onde estamos</div>
              <p className="contact-value">Av. Dr. Renato de Andrade Maia, 1609</p>
              <p className="contact-value-sub">São Paulo · SP</p>
            </div>

            <div className="contact-block">
              <div className="contact-label">Contato</div>
              <p className="contact-value">(11) 98599-3244</p>
              <p className="contact-value-sub">Atendimento apenas com hora marcada</p>
            </div>

            <div className="contact-block">
              <div className="contact-label">Instagram</div>
              <a className="contact-value contact-instagram" href="https://instagram.com/fernanda.quilles" target="_blank" rel="noopener noreferrer">@fernanda.quilles</a>
            </div>
          </Reveal>
        </div>

        <div className="footer">
          <span className="footer-text">Dra. Fernanda Quilles © 2025 · Todos os direitos reservados.</span>
          <div className="footer-social">
            <a href="https://instagram.com/fernanda.quilles" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" />
              </svg>
            </a>
            <a href={window.WA_LINK} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M3 21l1.65-4.5A8.5 8.5 0 1 1 7.5 19.5L3 21z" strokeLinejoin="round" />
                <path d="M9 9.5c.5 2 2.5 4 4.5 4.5l1.5-1.5 2 1c-.5 1.5-2 2-3 2-3 0-6-3-6-6 0-1 .5-2.5 2-3l1 2L9 9.5z" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatsAppFloat() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 300);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a
      className={`wa-float ${show ? "show" : ""}`}
      href={window.WA_LINK}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Falar no WhatsApp"
    >
      <span className="wa-tip">Fale comigo no WhatsApp</span>
      <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor">
        <path d="M16 3C8.8 3 3 8.8 3 16c0 2.5.7 4.8 1.9 6.8L3 29l6.4-1.7A12.9 12.9 0 0 0 16 29c7.2 0 13-5.8 13-13S23.2 3 16 3zm0 23.6c-2 0-3.9-.5-5.5-1.5l-.4-.2-3.8 1 1-3.7-.3-.4A10.5 10.5 0 0 1 5.4 16C5.4 10.2 10.2 5.4 16 5.4S26.6 10.2 26.6 16 21.8 26.6 16 26.6zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.2.3 2.1 3.2 5.2 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.9-.8 2.1-1.5.3-.7.3-1.4.2-1.5l-.4-.2z" />
      </svg>
    </a>
  );
}

window.Contato = Contato;
window.WhatsAppFloat = WhatsAppFloat;