const Contato = () => {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    e.target.reset();
  };

  return (
    <section className="section contato" id="contato">
      <div className="container">
        <div className="section-head" data-reveal="up">
          <span className="kicker">FALE CONOSCO</span>
          <h2>Estamos <em>aqui para você</em>.</h2>
          <p>
            Dúvidas trabalhistas, pedidos de filiação, suporte jurídico ou informações sobre eventos —
            entre em contato pelo canal que preferir. Respondemos rapidamente.
          </p>
        </div>

        <div className="contato-grid">
          <form className="contato-form" onSubmit={submit} data-reveal="left">
            <div className={`form-msg ${sent ? "show" : ""}`} style={{ marginBottom: 22 }}>
              ✓ Mensagem recebida! Entraremos em contato em breve.
            </div>

            <div className="field">
              <label htmlFor="name">Nome completo</label>
              <input id="name" type="text" required placeholder="Seu nome" />
            </div>

            <div className="field">
              <label htmlFor="email">E-mail</label>
              <input id="email" type="email" required placeholder="voce@email.com" />
            </div>

            <div className="field">
              <label htmlFor="phone">Telefone / WhatsApp</label>
              <input id="phone" type="tel" placeholder="(14) 99999-9999" />
            </div>

            <div className="field">
              <label htmlFor="subject">Assunto</label>
              <select id="subject" required defaultValue="">
                <option value="" disabled>Selecione um assunto…</option>
                <option>Filiação ao sindicato</option>
                <option>Apoio jurídico</option>
                <option>Convênios e benefícios</option>
                <option>Eventos e cursos</option>
                <option>Orientação trabalhista</option>
                <option>Outro</option>
              </select>
            </div>

            <div className="field">
              <label htmlFor="msg">Mensagem</label>
              <textarea id="msg" required placeholder="Conte-nos como podemos ajudar…" rows={5} />
            </div>

            <button type="submit" className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
              Enviar mensagem
              <Icon name="arrow" size={16} />
            </button>
          </form>

          <div className="contato-info" data-reveal-group>
            <a href={WHATSAPP_URL} target="_blank" rel="noopener" className="info-item">
              <div className="info-icon" style={{ background: "#d7f5e3", color: "#1ea756" }}>
                <Icon name="whatsapp" size={20} />
              </div>
              <div>
                <h4>WhatsApp · Atendimento rápido</h4>
                <p>(14) 3102-1374</p>
              </div>
            </a>

            <a href="tel:+551431021374" className="info-item">
              <div className="info-icon"><Icon name="phone" size={20} /></div>
              <div>
                <h4>Telefone</h4>
                <p>(14) 3102-1374</p>
              </div>
            </a>

            <a href="mailto:sindicato.satebaurueregiao@gmail.com" className="info-item">
              <div className="info-icon"><Icon name="mail" size={20} /></div>
              <div>
                <h4>E-mail</h4>
                <p>sindicato.satebaurueregiao@gmail.com</p>
              </div>
            </a>

            <div className="info-item">
              <div className="info-icon"><Icon name="pin" size={20} /></div>
              <div>
                <h4>Endereço da sede</h4>
                <p>Rua Araújo Leite, 14-37 · Sala 08<br />Centro · Bauru/SP · CEP 17015-140</p>
              </div>
            </div>

            <div className="info-item">
              <div className="info-icon"><Icon name="clock" size={20} /></div>
              <div>
                <h4>Horário de atendimento</h4>
                <p>Segunda a sexta · 09h às 16h</p>
              </div>
            </div>
          </div>
        </div>

        <div className="map-wrap" style={{ marginTop: 48 }} data-reveal="up-lg">
          <iframe
            title="Localização do S.A.T.E."
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3692.7!2d-49.0610!3d-22.3170!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94bf67a7f6c7b93f%3A0x1234567890abcdef!2sRua%20Ara%C3%BAjo%20Leite%2C%2014-37%20-%20Centro%2C%20Bauru%20-%20SP!5e0!3m2!1spt-BR!2sbr!4v1234567890123!5m2!1spt-BR!2sbr"
            loading="lazy"
            style={{ border: 0 }}
            allowFullScreen
          />
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <span className="sate-mark">S.A.T.E.</span>
          <p>
            Sindicato dos Auxiliares e Técnicos de Enfermagem de Bauru e Região.
            Defendendo quem cuida da saúde desde 2015.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
            <a href="#" aria-label="Instagram" style={{ color: "rgba(255,255,255,0.7)" }}><Icon name="instagram" size={20} /></a>
            <a href="#" aria-label="Facebook" style={{ color: "rgba(255,255,255,0.7)" }}><Icon name="facebook" size={20} /></a>
          </div>
        </div>

        <div>
          <h5>Institucional</h5>
          <ul>
            <li><a href="#sobre">Sobre o S.A.T.E.</a></li>
            <li><a href="#beneficios">Benefícios</a></li>
            <li><a href="#eventos">Eventos</a></li>
            <li><a href="#noticias">Notícias</a></li>
          </ul>
        </div>

        <div>
          <h5>Associado</h5>
          <ul>
            <li><a href={WHATSAPP_URL}>Filiar-se</a></li>
            <li><a href="#contato">Apoio jurídico</a></li>
            <li><a href="#contato">Convênios</a></li>
            <li><a href="#contato">Orientações</a></li>
          </ul>
        </div>

        <div>
          <h5>Contato</h5>
          <ul>
            <li>(14) 3102-1374</li>
            <li style={{ wordBreak: "break-all" }}>sindicato.satebauru<br />eregiao@gmail.com</li>
            <li>Rua Araújo Leite, 14-37<br />Sala 08 · Centro · Bauru/SP</li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <div>© 2026 S.A.T.E. — Sindicato dos Auxiliares e Técnicos de Enfermagem de Bauru e Região. Todos os direitos reservados.</div>
        <div>CNPJ 45.351.315/0001-11</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Contato, Footer });