/* global React */

// ============================================================
// Contato + Mapa + Redes
// ============================================================
function Contact() {
  return (
    <section id="contato">
      <div className="container">
        <div className="section-head">
          <div className="label">08 — Visite-nos</div>
          <div>
            <h2>No coração<br/>de <em>Ponta Grossa</em></h2>
            <p>Praça Marechal Floriano, no Centro histórico — ao alto da colina onde tudo começou em 1823.</p>
          </div>
        </div>

        <div className="contact">
          <div className="contact-info">
            <dl>
              <dt>Endereço</dt>
              <dd>
                Praça Marechal Floriano
                <span className="small">Centro · Ponta Grossa — PR</span>
              </dd>

              <dt>Telefone</dt>
              <dd>
                <a href="tel:+554232240143">(42) 3224-0143</a>
                <span className="small">Secretaria paroquial</span>
              </dd>

              <dt>E-mail</dt>
              <dd>
                <a href="mailto:catedralsantana23@gmail.com">catedralsantana23@gmail.com</a>
              </dd>

              <dt>Diocese</dt>
              <dd>
                <a href="https://www.diocesepontagrossa.org.br" target="_blank" rel="noopener">
                  diocesepontagrossa.org.br
                </a>
                <span className="small">Sede da Diocese de Ponta Grossa</span>
              </dd>
            </dl>

            <div className="socials">
              <a href="https://www.instagram.com/catedralpg/" target="_blank" rel="noopener" aria-label="Instagram">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <rect x="3" y="3" width="18" height="18" rx="4"/>
                  <circle cx="12" cy="12" r="4"/>
                  <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/>
                </svg>
              </a>
              <a href="https://web.facebook.com/catedralsantanapg/" target="_blank" rel="noopener" aria-label="Facebook">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v7h3v-7h3l1-3h-4V9z"/>
                </svg>
              </a>
              <a href="http://streaming.radiosantana.com.br/" target="_blank" rel="noopener" aria-label="Rádio Santanna">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M4 14a8 8 0 0116 0"/>
                  <rect x="3" y="13" width="6" height="7" rx="1"/>
                  <rect x="15" y="13" width="6" height="7" rx="1"/>
                </svg>
              </a>
            </div>
          </div>

          <div className="map-card">
            <iframe
              title="Mapa Catedral Sant'Ana"
              src="https://www.openstreetmap.org/export/embed.html?bbox=-50.166%2C-25.097%2C-50.156%2C-25.087&layer=mapnik&marker=-25.0917%2C-50.1611"
              loading="lazy"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Footer
// ============================================================
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          <div>
            <div className="brand" style={{marginBottom: 0}}>
              <div className="brand-mark">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <path d="M12 2v20M8 6h8M5 22h14M5 14l7-6 7 6"/>
                </svg>
              </div>
              <div className="brand-text">
                <div className="t1">Catedral Sant'Ana</div>
                <div className="t2">Ponta Grossa · PR</div>
              </div>
            </div>
            <p className="foot-desc">
              Igreja Mãe da Diocese de Ponta Grossa — desde 1823, casa de
              oração e devoção à padroeira.
            </p>
          </div>
          <div>
            <h6>Navegação</h6>
            <ul>
              <li><a href="#horarios">Horários</a></li>
              <li><a href="#historia">História</a></li>
              <li><a href="#paroco">Pároco</a></li>
              <li><a href="#galeria">Galeria</a></li>
              <li><a href="#noticias">Notícias</a></li>
            </ul>
          </div>
          <div>
            <h6>Diocese</h6>
            <ul>
              <li><a href="https://www.diocesepontagrossa.org.br" target="_blank" rel="noopener">Site Diocesano</a></li>
              <li><a href="http://streaming.radiosantana.com.br/" target="_blank" rel="noopener">Rádio Santanna</a></li>
              <li><a href="https://www.diocesepontagrossa.org.br/agenda" target="_blank" rel="noopener">Agenda</a></li>
              <li><a href="https://www.diocesepontagrossa.org.br/horarios-de-missa" target="_blank" rel="noopener">Missas (Diocese)</a></li>
            </ul>
          </div>
          <div>
            <h6>Contato</h6>
            <ul>
              <li>Pça. Mal. Floriano</li>
              <li>Centro, Ponta Grossa</li>
              <li><a href="tel:+554232240143">(42) 3224-0143</a></li>
              <li><a href="mailto:catedralsantana23@gmail.com">catedralsantana23@gmail.com</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© {new Date().getFullYear()} Paróquia Sant'Ana — Catedral · Diocese de Ponta Grossa</div>
          <div>Padroeira intercedei por nós</div>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// Nav
// ============================================================
function Nav() {
  return (
    <header className="nav">
      <div className="container nav-row">
        <a href="#" className="brand">
          <div className="brand-mark">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M12 2v20M8 6h8M5 22h14M5 14l7-6 7 6"/>
            </svg>
          </div>
          <div className="brand-text">
            <div className="t1">Catedral Sant'Ana</div>
            <div className="t2">Ponta Grossa · PR</div>
          </div>
        </a>
        <nav className="nav-links">
          <a href="#horarios">Horários</a>
          <a href="#historia">História</a>
          <a href="#paroco">Pároco</a>
          <a href="#galeria">Galeria</a>
          <a href="#noticias">Notícias</a>
          <a href="#contato">Contato</a>
        </nav>
        <a href="#proxima-missa" className="nav-cta">Próxima Missa</a>
      </div>
    </header>
  );
}

window.Contact = Contact;
window.Footer = Footer;
window.Nav = Nav;