<?php

use ChurchCRM\dto\SystemURLs;

$currentPath = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$isActive = function ($path) use ($currentPath, $rootPath): string {
    $full = rtrim($rootPath . $path, '/');
    $cur = rtrim($currentPath, '/');
    return $full === $cur ? ' active' : '';
};
?>
<style nonce="<?= SystemURLs::getCSPNonce() ?>">
.page-auth { display: block; }
.auth-footer { display: none; }

/* === Dark Mode Variables === */
:root[data-bs-theme="dark"] {
  --website-bg: #1a1d23;
  --website-surface: #23272e;
  --website-text: #e1e3e8;
  --website-text-secondary: #9b9ea7;
  --website-border: rgba(255,255,255,.08);
  --website-nav-bg: rgba(35,39,46,.97);
  --website-section-alt: #1e2128;
  --website-card-shadow: 0 4px 20px rgba(0,0,0,.3);
}
:root[data-bs-theme="light"] {
  --website-bg: #fff;
  --website-surface: #fff;
  --website-text: #1a2332;
  --website-text-secondary: #6c757d;
  --website-border: rgba(0,0,0,.1);
  --website-nav-bg: rgba(255,255,255,.97);
  --website-section-alt: #f8f9fa;
  --website-card-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* === Animations === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,110,253,.3); }
  50% { box-shadow: 0 0 0 12px rgba(13,110,253,0); }
}

.animate-in { animation: fadeIn .6s ease both; }
.animate-up { animation: fadeInUp .6s ease both; }
.animate-down { animation: fadeInDown .4s ease both; }

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Nav === */
.website-nav {
  background: var(--website-nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--website-border);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow .3s;
}
.website-nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.08); }
.website-nav .nav-link {
  color: var(--website-text-secondary);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  transition: all .25s;
  position: relative;
}
.website-nav .nav-link:hover { color: #0d6efd; background: rgba(13,110,253,.06); }
.website-nav .nav-link.active { color: #0d6efd; background: rgba(13,110,253,.1); }
.website-nav .navbar-brand { font-weight: 700; color: var(--website-text); font-size: 1.25rem; }
.website-nav .nav-cta {
  background: #0d6efd;
  color: #fff !important;
  padding: 6px 18px !important;
  border-radius: 50px;
}
.website-nav .nav-cta:hover { background: #0b5ed7; transform: translateY(-1px); }

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  color: var(--website-text-secondary);
  font-size: 1.15rem;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: all .25s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle:hover {
  color: #0d6efd;
  background: rgba(13,110,253,.06);
}
.theme-toggle .theme-label {
  font-size: .85rem;
  font-weight: 500;
}
@media (max-width: 768px) {
  .theme-toggle .theme-label { display: none; }
}

/* === Hero / Page Header === */
.website-hero {
  background: linear-gradient(135deg, #1a2332 0%, #2d3e50 50%, #3a5068 100%);
  color: #fff;
  padding: 100px 0 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.website-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.04) 0%, transparent 60%),
    url('<?= $churchLogoURL ?>') center/contain no-repeat;
  opacity: .08;
  animation: fadeIn 1.5s ease;
  pointer-events: none;
}
.website-hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; letter-spacing: -.5px; }
.website-hero p { font-size: 1.2rem; opacity: .85; max-width: 600px; margin: 0 auto 2rem; line-height: 1.7; }
.website-hero .btn { padding: 12px 32px; font-size: 1.05rem; border-radius: 50px; font-weight: 600; }
.website-hero .btn-light { color: #1a2332; }

.page-header {
  background: linear-gradient(135deg, #1a2332 0%, #2d3e50 50%, #3a5068 100%);
  color: #fff;
  padding: 60px 0 55px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.04) 0%, transparent 60%),
    url('<?= $churchLogoURL ?>') center/contain no-repeat;
  opacity: .07;
  pointer-events: none;
}
.page-header h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: -.3px; }
.page-header p { font-size: 1.05rem; opacity: .8; max-width: 500px; margin: 0 auto; }

/* === Sections === */
.website-section { padding: 70px 0; }
.website-section:nth-child(even) { background: var(--website-section-alt); }
.website-section:last-of-type { padding-bottom: 70px; }

/* === Cards === */
.sermon-card, .video-card, .about-card {
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
  border: none;
  overflow: hidden;
  background: var(--website-surface);
}
.sermon-card:hover, .video-card:hover, .about-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--website-card-shadow) !important;
}
.sermon-card .card-img-top, .video-card .card-img-top {
  height: 200px;
  object-fit: cover;
  background: var(--website-section-alt);
  transition: transform .4s ease;
}
.sermon-card:hover .card-img-top, .video-card:hover .card-img-top {
  transform: scale(1.05);
}
.sermon-card .card-img-top, .video-card .card-img-top { overflow: hidden; }

/* === Prayer Cards === */
.prayer-card {
  border-left: 4px solid #6f42c1;
  margin-bottom: 1rem;
  transition: transform .25s, box-shadow .25s;
  border-radius: 8px;
  background: var(--website-surface);
}
.prayer-card:hover { transform: translateX(5px); box-shadow: var(--website-card-shadow); }

/* === Buttons === */
.btn { border-radius: 8px; font-weight: 500; transition: all .25s; }
.btn-sm { border-radius: 6px; }
.btn-primary { box-shadow: 0 2px 8px rgba(13,110,253,.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(13,110,253,.35); }
.btn-outline-light:hover { transform: translateY(-2px); }

/* === Footer === */
.website-footer {
  background: #1a2332;
  color: rgba(255,255,255,.65);
  padding: 50px 0 40px;
}
.website-footer h5 { color: #fff; margin-bottom: 1rem; font-weight: 600; }
.website-footer a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s; }
.website-footer a:hover { color: #fff; }
.website-footer .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  transition: all .25s;
  margin: 0 4px;
}
.website-footer .social-link:hover {
  background: #0d6efd;
  color: #fff;
  transform: translateY(-3px);
}

/* === Form === */
.form-control { border-radius: 8px; border-color: #dee2e6; padding: 10px 14px; }
.form-control:focus { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(13,110,253,.15); }

/* === Feature Icon === */
.feature-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* === Responsive === */
@media (max-width: 768px) {
  .website-hero { padding: 60px 0 50px; }
  .website-hero h1 { font-size: 2rem; }
  .page-header { padding: 40px 0; }
  .page-header h1 { font-size: 1.8rem; }
  .website-section { padding: 40px 0; }
}
</style>

<script nonce="<?= SystemURLs::getCSPNonce() ?>">
document.addEventListener('DOMContentLoaded', function () {
  // Scroll shadow on nav
  const nav = document.querySelector('.website-nav');
  if (nav) {
    window.addEventListener('scroll', function () {
      nav.classList.toggle('scrolled', window.scrollY > 10);
    }, { passive: true });
  }

  // Scroll-triggered animations using Intersection Observer
  const els = document.querySelectorAll('.animate-on-scroll');
  if (els.length && 'IntersectionObserver' in window) {
    const obs = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.15 });
    els.forEach(function (el) { obs.observe(el); });
  } else {
    els.forEach(function (el) { el.classList.add('visible'); });
  }

  // Theme toggle
  const toggle = document.getElementById('themeToggle');
  if (toggle) {
    toggle.addEventListener('click', function () {
      var html = document.documentElement;
      var current = html.getAttribute('data-bs-theme');
      var next = current === 'dark' ? 'light' : 'dark';
      html.setAttribute('data-bs-theme', next);
      localStorage.setItem('churchcrm-theme', next);
      updateThemeIcon(next);
    });
    updateThemeIcon(document.documentElement.getAttribute('data-bs-theme'));
  }
});

function updateThemeIcon(theme) {
  var toggle = document.getElementById('themeToggle');
  if (!toggle) return;
  var icon = toggle.querySelector('i');
  var label = toggle.querySelector('.theme-label');
  if (theme === 'dark') {
    if (icon) { icon.className = 'fa-solid fa-sun'; }
    if (label) { label.textContent = 'Light'; }
  } else {
    if (icon) { icon.className = 'fa-solid fa-moon'; }
    if (label) { label.textContent = 'Dark'; }
  }
}
</script>

<nav class="website-nav">
  <div class="container">
    <div class="d-flex align-items-center justify-content-between">
      <a class="navbar-brand" href="<?= $rootPath ?>/external/">
        <i class="fa-solid fa-church me-2" style="color:#0d6efd;"></i><?= $churchName ?>
      </a>
      <div class="d-flex align-items-center gap-1">
        <a class="nav-link<?= $isActive('/external/') ?>" href="<?= $rootPath ?>/external/">Home</a>
        <a class="nav-link<?= $isActive('/external/sermons') ?>" href="<?= $rootPath ?>/external/sermons">Sermons</a>
        <a class="nav-link<?= $isActive('/external/videos') ?>" href="<?= $rootPath ?>/external/videos">Videos</a>
        <a class="nav-link<?= $isActive('/external/prayer') ?>" href="<?= $rootPath ?>/external/prayer">Prayer</a>
        <a class="nav-link<?= $isActive('/external/about') ?>" href="<?= $rootPath ?>/external/about">About</a>
        <a class="nav-link<?= $isActive('/external/contact') ?>" href="<?= $rootPath ?>/external/contact">Contact</a>
        <button class="theme-toggle ms-2" id="themeToggle" title="Toggle dark/light mode">
          <i class="fa-solid fa-moon"></i>
          <span class="theme-label">Dark</span>
        </button>
      </div>
    </div>
  </div>
</nav>

<?php if (isset($hidePageHeader) && $hidePageHeader): ?>
<?php else: ?>
<?php if (!isset($showHero) || !$showHero): ?>
<div class="page-header animate-down">
  <div class="container">
    <h1><?= $pageHeaderTitle ?? '' ?></h1>
    <?php if (isset($pageHeaderSubtitle)): ?>
    <p class="mb-0"><?= $pageHeaderSubtitle ?></p>
    <?php endif; ?>
  </div>
</div>
<?php endif; ?>
<?php endif; ?>
