// ===== Locations Page =====
function LocationsPage({ navigate }) {
  return (
    <div className="page-enter">
      <section className="section" style={{paddingTop: 64, paddingBottom: 32}}>
        <div className="container">
          <div className="eyebrow"><span className="dot"/>Our Locations</div>
          <h1 style={{marginTop: 24, maxWidth: 900}}>
            Four campuses. Two countries. <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>One family.</em>
          </h1>
          <p className="lead" style={{maxWidth: 720, marginTop: 24}}>
            Whether you're in the heart of the Gulf or the heart of Cavite — there's a Vision Generation campus near you. Find your closest one below and we'll see you Sunday.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="loc-grid">
            {LOCATIONS.map((loc, i) => (
              <div key={loc.id} className={`card loc-card ${loc.isMother ? 'is-mother' : ''}`}>
                <div style={{position:'relative'}}>
                  <ImgPh dark label={`${loc.city} Campus Photo`} style={{aspectRatio:'16/10'}}/>
                  <div className="loc-badge">{loc.flag} {loc.badge}</div>
                  {loc.isMother && <div className="loc-mother-tag">Founding Campus</div>}
                </div>
                <div style={{padding: 32}}>
                  <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap: 16}}>
                    <h2 style={{fontSize: 36, fontStyle:'italic'}}>{loc.city}</h2>
                    <span className="loc-num">0{i+1}</span>
                  </div>
                  <div className="muted" style={{fontSize: 14}}>{loc.country}</div>

                  <div className="loc-meta-row">
                    <div className="loc-meta">
                      <Icon name="clock" size={16} color="#C8A04A"/>
                      <div>
                        <div className="loc-meta-label">Service</div>
                        <div className="loc-meta-value">{loc.time}</div>
                        <div className="muted" style={{fontSize: 12}}>{loc.day}</div>
                      </div>
                    </div>
                    <div className="loc-meta">
                      <Icon name="pin" size={16} color="#C8A04A"/>
                      <div>
                        <div className="loc-meta-label">Address</div>
                        <div style={{fontSize: 13, marginTop: 2}}>{loc.address}</div>
                      </div>
                    </div>
                  </div>

                  <p style={{marginTop: 16, color:'var(--vg-mute)', fontSize: 14}}>{loc.blurb}</p>

                  <div className="map-ph">
                    <div className="map-grid"></div>
                    <div className="map-pin"><Icon name="pin" size={18} color="#fff"/></div>
                    <div className="map-label">Map placeholder</div>
                  </div>

                  <div style={{display:'flex', gap: 10, marginTop: 20, flexWrap:'wrap'}}>
                    <button className="btn btn-primary btn-sm" style={{flex: 1, minWidth: 130}}>
                      <Icon name="pin" size={14}/> Get Directions
                    </button>
                    <button onClick={() => navigate('visit')} className="btn btn-outline btn-sm" style={{flex: 1, minWidth: 130}}>
                      Plan Your Visit
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
          .loc-card { padding: 0; }
          .loc-card.is-mother { border: 1.5px solid var(--vg-gold-600); }
          .loc-badge {
            position: absolute; top: 16px; left: 16px;
            background: rgba(255,255,255,0.95);
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 12px; font-weight: 700;
            color: var(--vg-purple-700);
          }
          .loc-mother-tag {
            position: absolute; top: 16px; right: 16px;
            background: var(--vg-gold-600);
            color: var(--vg-purple-900);
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 11px; font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
          }
          .loc-num {
            font-family: var(--font-display); font-style: italic;
            font-size: 28px; color: var(--vg-gold-600);
          }
          .loc-meta-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); }
          .loc-meta { display: flex; gap: 10px; align-items: flex-start; }
          .loc-meta-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vg-gold-700); }
          .loc-meta-value { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1; margin-top: 2px; }
          .map-ph {
            margin-top: 20px;
            position: relative;
            aspect-ratio: 16/8;
            border-radius: 14px;
            background: linear-gradient(135deg, #F7F2FE, #FAF1D6);
            border: 1px solid var(--vg-line);
            overflow: hidden;
            display: flex; align-items: center; justify-content: center;
          }
          .map-grid {
            position: absolute; inset: 0;
            background-image:
              linear-gradient(rgba(61,30,109,0.08) 1px, transparent 1px),
              linear-gradient(90deg, rgba(61,30,109,0.08) 1px, transparent 1px);
            background-size: 24px 24px;
          }
          .map-pin {
            width: 36px; height: 36px; border-radius: 50%;
            background: var(--vg-purple-700);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 8px 20px -6px rgba(61,30,109,0.5);
            position: relative; z-index: 2;
          }
          .map-label {
            position: absolute; bottom: 10px; right: 12px;
            font-family: ui-monospace, monospace;
            font-size: 10px;
            color: var(--vg-purple-700);
            background: rgba(255,255,255,0.85);
            padding: 4px 8px;
            border-radius: 4px;
          }
          @media (max-width: 800px) { .loc-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* MAP / WORLD VIEW */}
      <section className="section section-dark">
        <div className="container">
          <div style={{textAlign:'center', maxWidth: 720, margin: '0 auto'}}>
            <div className="eyebrow" style={{justifyContent:'center'}}><span className="dot"/>Across two countries</div>
            <h2 style={{marginTop: 16}}>From the Gulf to <em style={{fontStyle:'italic', color:'var(--vg-gold-500)'}}>Cavite</em>.</h2>
            <p className="lead" style={{color:'#D9CCEF', marginTop: 16}}>
              We started with one room in Abu Dhabi. Now four campuses gather every Sunday — and the vision keeps growing.
            </p>
          </div>
          <div className="world-map">
            <div className="continent uae"></div>
            <div className="continent ph"></div>
            <div className="map-line"></div>
            {LOCATIONS.map((l, i) => (
              <div key={l.id} className={`map-marker marker-${l.id}`}>
                <div className="marker-dot"></div>
                <div className="marker-label">
                  <div style={{color: 'var(--vg-gold-500)', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em'}}>0{i+1}</div>
                  <div style={{color:'#fff', fontWeight: 700, fontFamily:'var(--font-display)', fontStyle:'italic'}}>{l.city}</div>
                  <div style={{color: '#D9CCEF', fontSize: 12}}>{l.time}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .world-map {
            margin-top: 64px;
            position: relative;
            height: 380px;
            border-radius: 24px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            overflow: hidden;
          }
          .continent {
            position: absolute;
            background-image: radial-gradient(circle at 20% 30%, rgba(200,160,74,0.4), transparent 50%);
          }
          .continent.uae {
            top: 30%; left: 10%; width: 30%; height: 50%;
            background: rgba(200,160,74,0.06);
            border: 1px dashed rgba(200,160,74,0.3);
            border-radius: 30% 70% 60% 40%;
          }
          .continent.ph {
            top: 25%; right: 12%; width: 24%; height: 60%;
            background: rgba(200,160,74,0.06);
            border: 1px dashed rgba(200,160,74,0.3);
            border-radius: 60% 40% 50% 50%;
          }
          .map-line {
            position: absolute;
            top: 50%; left: 25%; right: 22%;
            height: 1px;
            border-top: 1px dashed rgba(200,160,74,0.5);
          }
          .map-marker { position: absolute; }
          .marker-dot {
            width: 14px; height: 14px; border-radius: 50%;
            background: var(--vg-gold-500);
            box-shadow: 0 0 0 6px rgba(200,160,74,0.18), 0 0 0 12px rgba(200,160,74,0.08);
            animation: pulse 2.4s ease infinite;
          }
          @keyframes pulse { 0%,100% { box-shadow: 0 0 0 6px rgba(200,160,74,0.18), 0 0 0 12px rgba(200,160,74,0.08); } 50% { box-shadow: 0 0 0 10px rgba(200,160,74,0.25), 0 0 0 18px rgba(200,160,74,0.0); } }
          .marker-label {
            position: absolute;
            top: 22px; left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            text-align: center;
          }
          .marker-abu-dhabi { top: 38%; left: 22%; }
          .marker-dubai { top: 48%; left: 28%; }
          .marker-imus { top: 42%; right: 22%; }
          .marker-trece { top: 55%; right: 18%; }
          @media (max-width: 720px) { .world-map { height: 320px; } }
        `}</style>
      </section>
    </div>
  );
}

// ===== Sermons Page =====
function SermonsPage({ navigate }) {
  const [series, setSeries] = React.useState('All Series');
  const [query, setQuery] = React.useState('');
  const [view, setView] = React.useState('grid');

  // Live CMS-driven sermon list. The seed array in data.jsx is the
  // hot-load fallback while the API call is in flight. `series` is
  // the pill list with "All Series" already prepended.
  const { sermons, series: seriesOptions } = useSiteContent();

  // Hero shows the explicitly-flagged featured sermon, falling back
  // to the most recent (sermons[0]) when nothing's flagged.
  const featured = sermons.find((s) => s.featured) || sermons[0] || null;

  // Normalize before comparing so a stray-space or casing diff between
  // the pill label and the stored series value doesn't silently hide
  // sermons.
  const norm = (v) => (v || '').trim().toLowerCase();
  const seriesNorm = norm(series);

  // Archive lists every sermon (including the one shown in the hero
  // above). Excluding the featured row used to leave the archive
  // empty when the tenant only had one sermon — a worse UX than the
  // mild redundancy of showing it twice on a busy library.
  const filtered = sermons.filter((s) => {
    const matchSeries =
      series === 'All Series' || norm(s.series) === seriesNorm;
    const q = norm(query);
    const matchQuery =
      !q ||
      norm(s.title).includes(q) ||
      norm(s.speaker).includes(q);
    return matchSeries && matchQuery;
  });

  return (
    <div className="page-enter">
      <section className="section" style={{paddingTop: 64, paddingBottom: 32}}>
        <div className="container">
          <div className="eyebrow"><span className="dot"/>Sermons</div>
          <h1 style={{marginTop: 24, maxWidth: 880}}>
            Grow in <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>faith</em> through the Word.
          </h1>
          <p className="lead" style={{maxWidth: 720, marginTop: 24}}>
            Every Sunday across our campuses, the Bible is preached with conviction, clarity, and warmth. Catch up on what you missed — or share a message that changed your week.
          </p>
        </div>
      </section>

      {/* FEATURED */}
      {featured && (
        <section className="section" style={{paddingTop: 0}}>
          <div className="container">
            <div className="featured-sermon">
              <div className="featured-video">
                <ImgPh dark label="Latest Sermon Thumbnail" style={{aspectRatio:'16/9'}}/>
                <button className="play-overlay" aria-label="Play sermon">
                  <Icon name="play" size={28}/>
                </button>
                {featured.tag && <div className="featured-tag">{featured.tag}</div>}
              </div>
              <div className="featured-info">
                {featured.series && <div className="tag tag-gold">{featured.series}</div>}
                <h2 style={{marginTop: 16}}>{featured.title}</h2>
                <div style={{display:'flex', gap: 12, color:'var(--vg-mute)', fontSize: 14, marginTop: 16, flexWrap:'wrap'}}>
                  {featured.speaker && <span style={{fontWeight: 600, color:'var(--vg-purple-700)'}}>{featured.speaker}</span>}
                  {featured.speaker && featured.date && <span>·</span>}
                  {featured.date && <span>{featured.date}</span>}
                  {featured.date && featured.length && <span>·</span>}
                  {featured.length && <span>{featured.length}</span>}
                </div>
                {featured.desc && <p style={{marginTop: 20, color:'var(--vg-ink-soft)'}}>{featured.desc}</p>}
                <div style={{display:'flex', gap: 10, marginTop: 28, flexWrap:'wrap'}}>
                  {featured.videoUrl ? (
                    <a href={featured.videoUrl} target="_blank" rel="noopener" className="btn btn-primary">
                      <Icon name="play" size={16}/> Watch Now
                    </a>
                  ) : (
                    <button className="btn btn-primary"><Icon name="play" size={16}/> Watch Now</button>
                  )}
                  <button className="btn btn-outline">Sermon Notes</button>
                  <button className="btn btn-ghost">Share</button>
                </div>
              </div>
            </div>
          </div>
        <style>{`
          .featured-sermon {
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            gap: 40px;
            padding: 32px;
            background: linear-gradient(165deg, var(--vg-purple-50) 0%, var(--vg-gold-100) 130%);
            border-radius: 32px;
            border: 1px solid var(--vg-purple-100);
            align-items: center;
          }
          .featured-video { position: relative; border-radius: 20px; overflow: hidden; }
          .featured-tag {
            position: absolute; top: 16px; left: 16px;
            background: var(--vg-gold-600); color: var(--vg-purple-900);
            padding: 6px 14px; border-radius: 999px;
            font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
          }
          @media (max-width: 900px) { .featured-sermon { grid-template-columns: 1fr; padding: 20px; } }
        `}</style>
        </section>
      )}

      {/* FILTERS */}
      <section className="section" style={{paddingTop: 32, paddingBottom: 32}}>
        <div className="container">
          <div className="sermon-filters">
            <div className="series-tabs">
              {/* Pills come from the live series list (CMS-driven).
                  "All Series" is always at the head. */}
              {seriesOptions.map(s => (
                <button
                  key={s}
                  onClick={() => setSeries(s)}
                  className={`series-tab ${series === s ? 'is-active' : ''}`}
                >{s}</button>
              ))}
            </div>
            <div className="filter-side">
              <div className="search-input">
                <input
                  type="text"
                  placeholder="Search sermons..."
                  value={query}
                  onChange={e => setQuery(e.target.value)}
                />
              </div>
              <div className="view-toggle">
                <button className={view === 'grid' ? 'is-active' : ''} onClick={() => setView('grid')}>Grid</button>
                <button className={view === 'list' ? 'is-active' : ''} onClick={() => setView('list')}>List</button>
              </div>
            </div>
          </div>

          {filtered.length === 0 && (
            <div style={{padding: 60, textAlign:'center', color:'var(--vg-mute)'}}>
              No sermons match those filters. Try clearing the search.
            </div>
          )}

          {view === 'grid' ? (
            <div className="grid grid-3" style={{marginTop: 32}}>
              {filtered.map(s => (
                <div key={s.id} className="card sermon-card">
                  <div style={{position:'relative'}}>
                    <ImgPh dark label={s.series} style={{aspectRatio:'16/10'}}/>
                    <div className="sermon-play"><Icon name="play" size={16}/></div>
                    <div className="sermon-length">{s.length}</div>
                  </div>
                  <div style={{padding: 24}}>
                    <div className="tag tag-gold">{s.series}</div>
                    <h3 style={{fontSize: 20, marginTop: 12}}>{s.title}</h3>
                    <div style={{display:'flex', justifyContent:'space-between', marginTop: 16, fontSize: 13, color:'var(--vg-mute)'}}>
                      <span>{s.speaker}</span>
                      <span>{s.date}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{marginTop: 32, display:'flex', flexDirection:'column', gap: 8}}>
              {filtered.map(s => (
                <div key={s.id} className="sermon-row">
                  <div className="sermon-row-thumb">
                    <ImgPh dark label="" style={{height:'100%'}}/>
                    <div className="sermon-play sermon-play-sm"><Icon name="play" size={12}/></div>
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="tag tag-gold">{s.series}</div>
                    <h3 style={{fontSize: 18, marginTop: 8}}>{s.title}</h3>
                    <div style={{fontSize: 13, color: 'var(--vg-mute)', marginTop: 4}}>{s.speaker} · {s.date} · {s.length}</div>
                  </div>
                  <div style={{display:'flex', gap: 8}}>
                    <button className="btn btn-outline btn-sm">Watch</button>
                    <button className="btn btn-ghost btn-sm">Notes</button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        <style>{`
          .sermon-filters { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
          .series-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
          .series-tab {
            padding: 8px 16px; border-radius: 999px;
            font-size: 13px; font-weight: 600;
            color: var(--vg-mute);
            transition: all .2s ease;
          }
          .series-tab:hover { color: var(--vg-purple-700); background: var(--vg-purple-50); }
          .series-tab.is-active {
            background: var(--vg-purple-700); color: #fff;
          }
          .filter-side { display: flex; gap: 12px; align-items: center; }
          .search-input input {
            padding: 10px 16px;
            border-radius: 999px;
            border: 1.5px solid var(--vg-line);
            background: #fff;
            min-width: 220px;
            font-size: 14px;
          }
          .search-input input:focus { outline: none; border-color: var(--vg-purple-700); }
          .view-toggle { display: flex; padding: 4px; background: #fff; border: 1.5px solid var(--vg-line); border-radius: 999px; }
          .view-toggle button { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--vg-mute); }
          .view-toggle button.is-active { background: var(--vg-purple-700); color: #fff; }

          .sermon-card { padding: 0; }
          .sermon-play {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: 56px; height: 56px; border-radius: 50%;
            background: var(--vg-gold-600); color: var(--vg-purple-900);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4);
            transition: transform .2s ease;
          }
          .sermon-card:hover .sermon-play { transform: translate(-50%,-50%) scale(1.08); }
          .sermon-play-sm { width: 32px; height: 32px; }
          .sermon-length {
            position: absolute; bottom: 12px; right: 12px;
            background: rgba(31,15,61,0.85); color: #F2E2B0;
            padding: 4px 10px; border-radius: 6px;
            font-size: 11px; font-weight: 700;
            font-family: ui-monospace, monospace;
          }
          .sermon-row {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 16px 20px;
            background: #fff;
            border: 1px solid var(--vg-line);
            border-radius: 18px;
            transition: all .2s ease;
          }
          .sermon-row:hover { border-color: var(--vg-gold-200); transform: translateX(4px); }
          .sermon-row-thumb { position: relative; width: 100px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
          @media (max-width: 720px) {
            .sermon-row { flex-wrap: wrap; }
            .sermon-row-thumb { width: 80px; height: 50px; }
          }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { LocationsPage, SermonsPage });