/* global React */
const { useState } = React;

// ============================================================
// Pároco
// ============================================================
function Paroco() {
  return (
    <section id="paroco">
      <div className="container">
        <div className="section-head">
          <div className="label">04 — Clero</div>
          <div>
            <h2>Pastoreado<br />com <em>ternura</em></h2>
            <p>"A Catedral é a Igreja Mãe, e como Mãe deve ser acolhedora de todos os filhos e filhas de Deus."</p>
          </div>
        </div>

        <div className="paroco">
          <div className="paroco-portrait">
            <div className="ph-stripes"></div>
            <div className="ph-label">Retrato<br />Pe. Claudemir<br />Nascimento Leal</div>
          </div>
          <div className="paroco-info">
            <div className="role">Pároco · 35º na sucessão</div>
            <h3>Pe. Claudemir<br />Nascimento Leal</h3>
            <div className="since">Pároco desde 2025</div>
            <p>Pe. Claudemir assume a missão de cuidar da Igreja Mãe da Diocese de Ponta Grossa, continuando a longa tradição que começou com Pe. José Pereira da Fonseca em 1825.




            </p>
            <p>
              Da Paróquia Sant'Ana fazem parte duas comunidades: a Matriz, no
              Centro, e a comunidade de São Paulo Apóstolo, no bairro Olarias.
            </p>
            <div className="paroco-quote">
              "Modelo de ternura e aconchego de todos os que buscam Deus e
              a intercessão da Senhora Sant'Ana."
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// Galeria + Lightbox
// ============================================================
const TILES = [
{ cls: "t1", img: "assets/catedral-interior.jpg", caption: "Vitrais em leque · Altar-mor" },
{ cls: "t2", placeholder: "Fachada · vista da Praça Marechal Floriano" },
{ cls: "t3", placeholder: "Cúpula · óculo central" },
{ cls: "t4", placeholder: "Detalhe · vitral azul" },
{ cls: "t5", placeholder: "Coro · órgão" },
{ cls: "t6", placeholder: "Procissão de Sant'Ana · 26 de julho" }];


function Gallery() {
  const [open, setOpen] = useState(null);
  return (
    <section id="galeria">
      <div className="container">
        <div className="section-head">
          <div className="label">05 — Galeria</div>
          <div>
            <h2>Beleza<br />que <em>eleva</em></h2>
            <p>Os vitrais em acrílico, a cúpula radial, o altar floreado — fragmentos do espaço que abriga 1.200 fiéis.</p>
          </div>
        </div>

        <div className="gallery">
          {TILES.map((t, i) =>
          <div
            key={i}
            className={`tile ${t.cls} ${t.placeholder ? "placeholder" : ""}`}
            onClick={() => t.img && setOpen(t)}>
            
              {t.img ? <img src={t.img} alt={t.caption} /> : <div className="lbl">{t.placeholder}</div>}
            </div>
          )}
        </div>
      </div>

      {open &&
      <div className="lightbox" onClick={() => setOpen(null)}>
          <button className="lightbox-close" onClick={() => setOpen(null)}>Fechar · ESC</button>
          <img src={open.img} alt={open.caption} onClick={(e) => e.stopPropagation()} />
          <div className="lightbox-cap">{open.caption} · Foto Fabio Almeida</div>
        </div>
      }
    </section>);

}

// ============================================================
// Notícias
// ============================================================
function News({ items }) {
  return (
    <section id="noticias">
      <div className="container">
        <div className="section-head">
          <div className="label">06 — Comunicação</div>
          <div>
            <h2>Da <em>comunidade</em><br />para você</h2>
            <p>Notícias, avisos pastorais e momentos que marcam a vida da Catedral.</p>
          </div>
        </div>
        <div className="news-grid">
          {items.map((n, i) =>
          <article key={i} className="news-card">
              <div className="date">{n.date}<span className="cat">· {n.cat}</span></div>
              <h4>{n.title}</h4>
              <p>{n.excerpt}</p>
              <span className="read">Ler matéria →</span>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Atendimento
// ============================================================
function Atendimento() {
  return (
    <section id="atendimento" className="tight">
      <div className="container">
        <div className="section-head">
          <div className="label">07 — Atendimento</div>
          <div>
            <h2>Estamos<br /><em>à disposição</em></h2>
            <p>Confissões, secretaria paroquial e canais de contato direto com a Catedral.</p>
          </div>
        </div>
        <div className="atend">
          <div>
            <h5>Confissões</h5>
            <div className="li"><em>Sextas-feiras</em></div>
            <div className="li">14h às 17h, na Igreja</div>
          </div>
          <div>
            <h5>Secretaria Paroquial</h5>
            <div className="li">Seg, Qua a Sex<br />08h30 — 11h30 · 13h30 — 18h</div>
            <div className="li" style={{ marginTop: 12 }}>Sábado<br />08h30 — 12h</div>
          </div>
          <div>
            <h5>Sacramentos</h5>
            <div className="li">Batismo · Crisma</div>
            <div className="li">Matrimônio · Unção</div>
            <div className="li">Eucaristia · Confissão</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// Versículo / Citação central
// ============================================================
function Verse() {
  return (
    <section className="verse">
      <div className="container">
        <div className="divider"></div>
        <blockquote>
          "Senhora Sant'Ana, intercedei por nós e por toda a vossa cidade."
        </blockquote>
        <cite>— Oração da Padroeira</cite>
      </div>
    </section>);

}

window.Paroco = Paroco;
window.Gallery = Gallery;
window.News = News;
window.Atendimento = Atendimento;
window.Verse = Verse;