/* global React */
const { useState, useEffect, useMemo } = React;

// ============================================================
// Dados da Catedral
// ============================================================

const SCHEDULE = {
  // 0=Dom, 1=Seg, 2=Ter, 3=Qua, 4=Qui, 5=Sex, 6=Sáb
  0: [{ time: "09:00", note: "Missa Dominical" }, { time: "11:00", note: "Missa Dominical" }, { time: "19:00", note: "Missa Dominical" }],
  1: [{ time: "18:00", note: "Missa" }],
  2: [],
  3: [{ time: "18:00", note: "Missa com Novena" }],
  4: [{ time: "18:00", note: "Missa" }],
  5: [{ time: "18:00", note: "Missa" }],
  6: [{ time: "18:00", note: "Missa" }],
};

const DAY_NAMES = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
const DAY_SHORT = ["DOM", "SEG", "TER", "QUA", "QUI", "SEX", "SÁB"];

const TIMELINE = [
  { year: "1823", ev: "Dom Pedro I cria a Paróquia dedicada a Sant'Ana — 9ª paróquia do Paraná." },
  { year: "1863", ev: "A pequena igreja de madeira é ampliada para atender a população crescente." },
  { year: "1906", ev: "O arquiteto italiano Nicolau Ferigotti é contratado para reformar a igreja em estilo eclético." },
  { year: "1910", ev: "Inaugurada a igreja eclética de Ferigotti, com aspecto imponente sobre a colina." },
  { year: "1926", ev: "Criação da Diocese de Ponta Grossa. A Matriz é elevada à categoria de Catedral." },
  { year: "1978", ev: "Demolição da antiga catedral. Início da construção do templo atual." },
  { year: "2009", ev: "Bênção e Dedicação da Nova Catedral, com a presença do Núncio Apostólico." },
  { year: "Hoje", ev: "Igreja Mãe da Diocese — referência de fé, beleza e turismo religioso nos Campos Gerais." },
];

const NEWS = [
  {
    date: "22 / 07 / 2025",
    cat: "Tradição",
    title: "Festa de Sant'Ana celebra tradição e fé",
    excerpt: "A comunidade se reuniu em torno da padroeira para a tradicional novena, procissão e missa solene de encerramento.",
  },
  {
    date: "12 / 05 / 2025",
    cat: "Diocese",
    title: "Missa abriu o Ano Jubilar da Diocese",
    excerpt: "Dom Bruno presidiu a celebração de abertura do Ano Jubilar, reunindo o clero e fiéis de toda a diocese.",
  },
  {
    date: "17 / 04 / 2025",
    cat: "Liturgia",
    title: "Tríduo Pascal celebrado na Catedral",
    excerpt: "Da Ceia do Senhor à Vigília Pascal, três dias que conduzem a comunidade ao mistério central da fé cristã.",
  },
];

// ============================================================
// Próxima missa em tempo real
// ============================================================
function getNextMass(now) {
  for (let offset = 0; offset < 8; offset++) {
    const d = new Date(now);
    d.setDate(d.getDate() + offset);
    const dow = d.getDay();
    const day = SCHEDULE[dow] || [];
    for (const m of day) {
      const [h, mn] = m.time.split(":").map(Number);
      const dt = new Date(d);
      dt.setHours(h, mn, 0, 0);
      if (dt > now) {
        return { dt, dow, time: m.time, note: m.note, offset };
      }
    }
  }
  return null;
}

function relWhen(offset, dow) {
  if (offset === 0) return "Hoje";
  if (offset === 1) return "Amanhã";
  return DAY_NAMES[dow];
}

// ============================================================
// Hero
// ============================================================
function Hero() {
  return (
    <section className="hero">
      <div className="hero-img">
        <img src="assets/catedral-interior.jpg" alt="Interior da Catedral Sant'Ana — vitrais em forma de leque" />
        <div className="hero-credit">Foto · Fabio Almeida / Flickr</div>
      </div>
      <div className="hero-text">
        <div>
          <div className="hero-eyebrow-row">
            <span className="dot"></span>
            <span className="eyebrow">Diocese de Ponta Grossa · Paraná</span>
          </div>
          <h1 className="display">
            Catedral<br/>
            <em>Sant'Ana</em>
          </h1>
          <p className="intro">
            Igreja Mãe da Diocese de Ponta Grossa — desde 1823, casa de oração,
            acolhida e devoção à padroeira. Uma marca da fé e do patrimônio
            religioso dos Campos Gerais.
          </p>
        </div>
        <div className="hero-meta">
          <div className="meta-item">
            <div className="k">Endereço</div>
            <div className="v">Pça. Marechal Floriano<br/>Centro, Ponta Grossa</div>
          </div>
          <div className="meta-item">
            <div className="k">Pároco</div>
            <div className="v">Pe. Claudemir<br/>Nascimento Leal</div>
          </div>
          <div className="meta-item">
            <div className="k">Fundação</div>
            <div className="v">15 de setembro<br/>de 1823</div>
          </div>
          <div className="meta-item">
            <div className="k">Padroeira</div>
            <div className="v">Senhora Sant'Ana<br/>Mãe de Maria</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Próxima Missa (live bar)
// ============================================================
function LiveMass() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 30_000);
    return () => clearInterval(id);
  }, []);
  const next = useMemo(() => getNextMass(now), [now]);
  if (!next) return null;
  return (
    <div className="live" id="proxima-missa">
      <div className="container">
        <div className="live-row">
          <span className="pulse"></span>
          <div>
            <div className="live-label">Próxima Celebração</div>
            <div className="live-main">{next.note} <em>· na Catedral</em></div>
          </div>
          <div>
            <div className="live-label">Quando</div>
            <div className="live-when" style={{fontSize: "16px", marginTop: "4px"}}>
              {relWhen(next.offset, next.dow)}
            </div>
          </div>
          <div className="live-time">{next.time}</div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Horários da Semana
// ============================================================
function Schedule() {
  const [filter, setFilter] = useState("all");
  const today = new Date().getDay();

  const days = [1, 2, 3, 4, 5, 6, 0]; // Seg..Dom

  return (
    <section id="horarios">
      <div className="container">
        <div className="section-head">
          <div className="label">02 — Celebrações</div>
          <div>
            <h2>Horários de <em>Missa</em></h2>
            <p>Sete dias para encontrar-se com o Senhor. Confissões às sextas-feiras, das 14h às 17h.</p>
          </div>
        </div>

        <div className="sched-filter">
          <button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>Semana toda</button>
          <button className={filter === "today" ? "active" : ""} onClick={() => setFilter("today")}>Hoje</button>
          <button className={filter === "weekend" ? "active" : ""} onClick={() => setFilter("weekend")}>Fim de semana</button>
          <button className={filter === "weekday" ? "active" : ""} onClick={() => setFilter("weekday")}>Dias de semana</button>
        </div>

        <div className="schedule">
          {days.map((d, i) => {
            const visible =
              filter === "all" ||
              (filter === "today" && d === today) ||
              (filter === "weekend" && (d === 0 || d === 6)) ||
              (filter === "weekday" && d >= 1 && d <= 5);
            if (!visible) return null;
            const masses = SCHEDULE[d];
            return (
              <div key={d} className={`day ${d === today ? "today" : ""}`}>
                <div className="dname">{DAY_SHORT[d]}{d === today && " · HOJE"}</div>
                <div className="dnum">{String(i + 1).padStart(2, "0")}</div>
                {masses.length === 0 ? (
                  <div className="empty">— sem missa</div>
                ) : (
                  masses.map((m, idx) => (
                    <div key={idx}>
                      <div className="mass">{m.time}</div>
                      <div className="mass-note">{m.note}</div>
                    </div>
                  ))
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// História + Stats
// ============================================================
function History() {
  return (
    <section id="historia">
      <div className="container">
        <div className="section-head">
          <div className="label">03 — Memória</div>
          <div>
            <h2>Dois séculos<br/>de <em>fé e pedra</em></h2>
            <p>Da capela de madeira no alto da colina à atual Catedral de 61,9 metros — uma história tecida pela comunidade ao longo de 200 anos.</p>
          </div>
        </div>

        <div className="history-grid">
          <div className="history-text">
            <p>
              Conta a tradição que, para escolher o lugar da capela em devoção
              a Sant'Ana, soltaram um casal de pombos. Onde pousassem, a igreja
              seria erguida. Pousaram numa cruz ao lado de uma grande figueira,
              no alto da colina — e ao redor dela cresceu Ponta Grossa.
            </p>
            <p>
              A primeira capela de madeira foi ampliada em 1863. Em 1906, o
              arquiteto italiano Nicolau Ferigotti reconstruiu a Matriz em
              estilo eclético, ousado para a época. Em 1926, com a criação da
              Diocese de Ponta Grossa, a Matriz foi elevada à categoria de
              Catedral.
            </p>
            <p>
              A atual Catedral foi iniciada em 1979 e dedicada solenemente em
              23 de julho de 2009, pelo Núncio Apostólico Dom Lorenzo
              Baldisseri, em nome do Papa Bento XVI. É hoje referência da
              religiosidade católica e do turismo religioso nos Campos Gerais.
            </p>
          </div>
          <div className="timeline">
            {TIMELINE.map((t) => (
              <div key={t.year} className="tl-item">
                <div className="year">{t.year}</div>
                <div className="ev">{t.ev}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="stats">
          <div className="stat">
            <div className="v">2.250<sup>m²</sup></div>
            <div className="l">Espaço Interno</div>
          </div>
          <div className="stat">
            <div className="v">1.200</div>
            <div className="l">Pessoas Sentadas</div>
          </div>
          <div className="stat">
            <div className="v">61,9<sup>m</sup></div>
            <div className="l">Altura Total</div>
          </div>
          <div className="stat">
            <div className="v">3.650<sup>m²</sup></div>
            <div className="l">Subsolo · Cripta · Museu</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.LiveMass = LiveMass;
window.Schedule = Schedule;
window.History = History;