/* Agenda (placeholder) → window. */
(function () {
  const { useTheme } = window;

  function Agenda() {
    const { dark } = (typeof useTheme === "function" ? useTheme() : { dark: false });

    const iconoBg = dark ? "#1F2937" : "#EFF3FF";
    const tituloColor = dark ? "#F0F0F0" : "#3C3C3C";
    const subtextoColor = dark ? "#9CA3AF" : "#777";

    return (
      <div className="fade-in flex flex-col items-center justify-center min-h-[70vh] px-8 text-center">
        <div
          className="w-20 h-20 rounded-full flex items-center justify-center mb-5"
          style={{ background: iconoBg }}
        >
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <rect x="3.5" y="5" width="17" height="16" rx="2.5" stroke="#2563EB" strokeWidth="1.8" />
            <path d="M3.5 10h17M8 3.5v3M16 3.5v3" stroke="#2563EB" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        </div>
        <h1 className="text-2xl font-black" style={{ color: tituloColor }}>Próximamente</h1>
        <p className="mt-3 text-sm font-semibold max-w-xs leading-relaxed" style={{ color: subtextoColor }}>
          Aquí verás todos los cultos de tus iglesias favoritas, ordenados por fecha.
        </p>
      </div>
    );
  }
  window.Agenda = Agenda;
})();