// ===== Events Page =====
function EventsPage({ navigate }) {
  const [cat, setCat] = React.useState('All Events');
  const [layout, setLayout] = React.useState('grid');

  // Live CMS-driven event list. Falls back to seeded EVENTS while
  // the API call is in flight.
  const { events } = useSiteContent();
  const filtered = events.filter(
    (e) => cat === 'All Events' || e.category === cat
  );
  const featured = events[0] || null;

  return (
    <div className="page-enter">
      <section className="section" style={{paddingTop: 64, paddingBottom: 32}}>
        <div className="container">
          <div className="eyebrow"><span className="dot"/>Events</div>
          <h1 style={{marginTop: 24}}>
            What's <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>happening</em> at VG.
          </h1>
          <p className="lead" style={{maxWidth: 720, marginTop: 24}}>
            From Vision Sunday to Youth nights, baptisms to outreach Saturdays — there is always something stirring at Vision Generation. Find your next moment below.
          </p>
        </div>
      </section>

      {/* FEATURED */}
      {featured && (
        <section className="section" style={{paddingTop: 0}}>
          <div className="container">
            <div className="event-feature">
              <ImgPh dark label={featured.title || 'Featured event'} style={{position:'absolute', inset: 0}}/>
              <div className="event-feature-overlay">
                {featured.tag && <div className="tag tag-gold" style={{background:'var(--vg-gold-600)', color:'var(--vg-purple-900)', borderColor:'transparent'}}>{featured.tag}</div>}
                <h2 style={{color:'#fff', fontSize: 'clamp(40px, 5vw, 64px)', marginTop: 16}}>{featured.title}</h2>
                {featured.desc && <p style={{color:'#F2E2B0', fontSize: 18, maxWidth: 560, marginTop: 12}}>{featured.desc}</p>}
                <div className="event-feature-meta">
                  <div><div className="ef-label">When</div><div className="ef-value">{[featured.date, featured.time].filter(Boolean).join(' · ') || '—'}</div></div>
                  <div><div className="ef-label">Where</div><div className="ef-value">{featured.location || '—'}</div></div>
                  <div><div className="ef-label">Category</div><div className="ef-value">{featured.category || '—'}</div></div>
                </div>
                <div style={{display:'flex', gap: 12, marginTop: 28, flexWrap:'wrap'}}>
                  <button className="btn btn-gold">Event Details <Icon name="arrow" size={16}/></button>
                  <button className="btn btn-outline-gold">Add to Calendar</button>
                </div>
              </div>
            </div>
          </div>
        <style>{`
          .event-feature {
            position: relative;
            border-radius: 32px;
            overflow: hidden;
            min-height: 480px;
          }
          .event-feature-overlay {
            position: relative; z-index: 2;
            padding: 64px;
            background: linear-gradient(110deg, rgba(31,15,61,0.92) 0%, rgba(31,15,61,0.6) 60%, transparent 100%);
            min-height: 480px;
            display: flex; flex-direction: column; justify-content: flex-end;
            max-width: 720px;
          }
          .event-feature-meta {
            display: flex; gap: 40px; margin-top: 32px; flex-wrap: wrap;
            padding-top: 24px;
            border-top: 1px solid rgba(242,226,176,0.2);
          }
          .ef-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vg-gold-500); }
          .ef-value { font-family: var(--font-display); font-style: italic; font-size: 22px; color: #fff; margin-top: 4px; }
          @media (max-width: 720px) { .event-feature-overlay { padding: 32px 24px; } }
        `}</style>
        </section>
      )}

      {/* FILTERS + GRID */}
      <section className="section">
        <div className="container">
          <div className="event-filters">
            <div className="series-tabs">
              {EVENT_CATEGORIES.map(c => (
                <button
                  key={c}
                  onClick={() => setCat(c)}
                  className={`series-tab ${cat === c ? 'is-active' : ''}`}
                >{c}</button>
              ))}
            </div>
            <div className="view-toggle">
              <button className={layout === 'grid' ? 'is-active' : ''} onClick={() => setLayout('grid')}>Grid</button>
              <button className={layout === 'list' ? 'is-active' : ''} onClick={() => setLayout('list')}>List</button>
            </div>
          </div>

          {layout === 'grid' ? (
            <div className="grid grid-3" style={{marginTop: 32}}>
              {filtered.map(e => (
                <div key={e.id} className="card event-card-full">
                  <div style={{position:'relative'}}>
                    <ImgPh label={e.title} style={{aspectRatio:'4/3'}}/>
                    <div className="event-date-badge">
                      <div style={{fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color:'var(--vg-gold-700)'}}>{e.date.split(' ')[0]}</div>
                      <div style={{fontSize: 24, fontFamily:'var(--font-display)', fontStyle:'italic', lineHeight: 1, marginTop: 2}}>{e.date.split(' ').slice(1).join(' ')}</div>
                    </div>
                  </div>
                  <div style={{padding: 24}}>
                    <div style={{display:'flex', gap: 8, flexWrap:'wrap'}}>
                      <div className="tag tag-gold">{e.category}</div>
                      {e.tag && <div className="tag">{e.tag}</div>}
                    </div>
                    <h3 style={{fontSize: 22, marginTop: 12}}>{e.title}</h3>
                    <p style={{marginTop: 8, color:'var(--vg-mute)', fontSize: 14}}>{e.desc}</p>
                    <div style={{display:'flex', gap: 16, marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--vg-line)', fontSize: 13, color:'var(--vg-ink-soft)', flexWrap:'wrap'}}>
                      <span style={{display:'inline-flex', alignItems:'center', gap: 6}}><Icon name="clock" size={14} color="#C8A04A"/> {e.time}</span>
                      <span style={{display:'inline-flex', alignItems:'center', gap: 6}}><Icon name="pin" size={14} color="#C8A04A"/> {e.location}</span>
                    </div>
                    <button className="btn btn-outline btn-sm" style={{marginTop: 16, width:'100%', justifyContent:'center'}}>
                      Event Details <Icon name="arrow" size={14}/>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div style={{marginTop: 32, display:'flex', flexDirection:'column', gap: 8}}>
              {filtered.map(e => (
                <div key={e.id} className="event-row">
                  <div className="event-row-date">
                    <div style={{fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color:'var(--vg-gold-700)'}}>{e.date.split(' ')[0]}</div>
                    <div style={{fontSize: 28, fontFamily:'var(--font-display)', fontStyle:'italic', lineHeight: 1}}>{e.date.split(' ').slice(1).join(' ')}</div>
                  </div>
                  <div style={{flex:1, minWidth: 0}}>
                    <div style={{display:'flex', gap: 8, flexWrap:'wrap'}}>
                      <div className="tag tag-gold">{e.category}</div>
                      {e.tag && <div className="tag">{e.tag}</div>}
                    </div>
                    <h3 style={{fontSize: 20, marginTop: 8}}>{e.title}</h3>
                    <div style={{fontSize: 13, color:'var(--vg-mute)', marginTop: 4}}>
                      {e.time} · {e.location}
                    </div>
                  </div>
                  <button className="btn btn-outline btn-sm">Details <Icon name="arrow" size={14}/></button>
                </div>
              ))}
            </div>
          )}
        </div>
        <style>{`
          .event-filters { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
          .event-card-full { padding: 0; }
          .event-date-badge {
            position: absolute; top: 16px; left: 16px;
            background: #fff;
            padding: 10px 16px;
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
          }
          .event-row {
            display: flex; align-items: center; gap: 24px;
            padding: 20px 24px;
            background: #fff;
            border: 1px solid var(--vg-line);
            border-radius: 18px;
            transition: all .2s ease;
          }
          .event-row:hover { border-color: var(--vg-gold-200); transform: translateX(4px); }
          .event-row-date {
            min-width: 80px;
            text-align: center;
            padding-right: 24px;
            border-right: 1px solid var(--vg-line);
          }
          @media (max-width: 720px) { .event-row { flex-wrap: wrap; } .event-row-date { border-right: none; padding-right: 0; text-align: left; } }
        `}</style>
      </section>
    </div>
  );
}

// ===== Ministries Page =====
function MinistriesPage({ navigate }) {
  const [active, setActive] = React.useState(null);

  return (
    <div className="page-enter">
      <section className="section" style={{paddingTop: 64, paddingBottom: 32}}>
        <div className="container">
          <div className="eyebrow"><span className="dot"/>Ministries</div>
          <h1 style={{marginTop: 24, maxWidth: 900}}>
            A place for every member <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>of your family.</em>
          </h1>
          <p className="lead" style={{maxWidth: 760, marginTop: 24}}>
            From your littlest one in the kids room to your spouse in a life group — Vision Generation is a church family where everyone belongs and everyone has a part to play.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="grid grid-3" style={{gap: 24}}>
            {MINISTRIES.map(m => (
              <div
                key={m.id}
                className={`card ministry-card ${active === m.id ? 'is-active' : ''}`}
                onMouseEnter={() => setActive(m.id)}
                onMouseLeave={() => setActive(null)}
              >
                <div className="ministry-icon">
                  <Icon name={m.icon} size={32}/>
                </div>
                <div className="tag tag-gold" style={{marginTop: 20}}>{m.tag}</div>
                <h3 style={{fontSize: 26, marginTop: 12, fontStyle:'italic'}}>{m.name}</h3>
                <p style={{marginTop: 12, color:'var(--vg-mute)'}}>{m.desc}</p>
                <div style={{display:'flex', gap: 8, marginTop: 24}}>
                  <button className="btn btn-primary btn-sm">Get Involved <Icon name="arrow" size={14}/></button>
                  <button className="btn btn-ghost btn-sm">Learn More</button>
                </div>
                <div className="ministry-corner"></div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .ministry-card {
            padding: 32px;
            position: relative;
            min-height: 320px;
            display: flex;
            flex-direction: column;
            transition: all .3s ease;
          }
          .ministry-card.is-active {
            background: linear-gradient(165deg, var(--vg-purple-50) 0%, var(--vg-gold-100) 130%);
            border-color: var(--vg-gold-600);
            transform: translateY(-6px);
          }
          .ministry-icon {
            width: 64px; height: 64px;
            border-radius: 18px;
            background: linear-gradient(135deg, var(--vg-purple-700), var(--vg-purple-600));
            color: var(--vg-gold-500);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 12px 24px -10px rgba(61,30,109,0.4);
          }
          .ministry-card.is-active .ministry-icon {
            background: linear-gradient(135deg, var(--vg-gold-600), var(--vg-purple-700));
            color: #fff;
          }
          .ministry-corner {
            position: absolute; top: 16px; right: 16px;
            width: 32px; height: 32px;
            opacity: 0;
            transition: opacity .2s ease;
            background: radial-gradient(circle, var(--vg-gold-600) 0%, transparent 70%);
          }
          .ministry-card.is-active .ministry-corner { opacity: 1; }
        `}</style>
      </section>

      {/* JOIN A TEAM */}
      <section className="section section-dark">
        <div className="container">
          <div className="join-team">
            <div>
              <div className="eyebrow"><span className="dot"/>Dream Team</div>
              <h2 style={{marginTop: 16}}>The best place to be at VG? <em style={{fontStyle:'italic', color:'var(--vg-gold-500)'}}>On a team.</em></h2>
              <p className="lead" style={{color:'#D9CCEF', marginTop: 16}}>
                Hospitality. Worship. Tech. Kids. Hosts. Setup crew. Our church runs on volunteers — and on Sundays you'll find that the people having the most fun are the ones serving.
              </p>
              <div style={{display:'flex', gap: 12, marginTop: 28, flexWrap:'wrap'}}>
                <button className="btn btn-gold">Join a Team <Icon name="arrow" size={16}/></button>
                <button onClick={() => navigate('contact')} className="btn btn-outline-gold">Have questions?</button>
              </div>
            </div>
            <div className="team-stats">
              <div><div className="stat-num">300+</div><div className="stat-label">Active volunteers</div></div>
              <div><div className="stat-num">9</div><div className="stat-label">Ministry teams</div></div>
              <div><div className="stat-num">4</div><div className="stat-label">Campuses serving</div></div>
              <div><div className="stat-num">2017</div><div className="stat-label">Founded in</div></div>
            </div>
          </div>
        </div>
        <style>{`
          .join-team { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
          .team-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
          .team-stats > div {
            padding: 28px 24px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px;
          }
          .stat-num {
            font-family: var(--font-display);
            font-style: italic;
            font-size: 56px;
            line-height: 1;
            background: linear-gradient(135deg, var(--vg-gold-500), var(--vg-gold-200));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
          }
          .stat-label { color: #D9CCEF; font-size: 13px; margin-top: 8px; font-weight: 600; letter-spacing: 0.04em; }
          @media (max-width: 900px) { .join-team { grid-template-columns: 1fr; gap: 40px; } }
        `}</style>
      </section>
    </div>
  );
}

// ===== Contact Page =====
function ContactPage({ navigate }) {
  const [campus, setCampus] = React.useState('abu-dhabi');
  const [submitted, setSubmitted] = React.useState(false);
  const loc = LOCATIONS.find(l => l.id === campus);

  return (
    <div className="page-enter">
      <section className="section" style={{paddingTop: 64, paddingBottom: 32}}>
        <div className="container">
          <div className="eyebrow"><span className="dot"/>Contact</div>
          <h1 style={{marginTop: 24}}>
            We'd love to <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>hear from you.</em>
          </h1>
          <p className="lead" style={{maxWidth: 720, marginTop: 24}}>
            Question about a service? Need prayer? Just want to say hi? Drop us a note below and our team will get back to you within a day or two.
          </p>
        </div>
      </section>

      <section className="section" style={{paddingTop: 0}}>
        <div className="container">
          <div className="contact-grid">
            {/* FORM */}
            <div className="card" style={{padding: 40}}>
              {!submitted ? (
                <>
                  <h2 style={{fontSize: 32}}>Send a message</h2>
                  <p className="muted" style={{marginTop: 8}}>We try to respond within 24–48 hours.</p>
                  <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{marginTop: 28, display:'flex', flexDirection:'column', gap: 16}}>
                    <div className="grid grid-2">
                      <div className="field"><label>First name</label><input required placeholder="Maria"/></div>
                      <div className="field"><label>Last name</label><input placeholder="Reyes"/></div>
                    </div>
                    <div className="field"><label>Email</label><input type="email" required placeholder="you@example.com"/></div>
                    <div className="field">
                      <label>Which campus?</label>
                      <select value={campus} onChange={e => setCampus(e.target.value)}>
                        {LOCATIONS.map(l => <option key={l.id} value={l.id}>{l.city}</option>)}
                      </select>
                    </div>
                    <div className="field">
                      <label>What's this about?</label>
                      <select required defaultValue="">
                        <option value="" disabled>Choose a topic</option>
                        <option>I'm planning a visit</option>
                        <option>I'd like to know more about VG</option>
                        <option>I have a ministry question</option>
                        <option>I need to speak with a pastor</option>
                        <option>Something else</option>
                      </select>
                    </div>
                    <div className="field"><label>Your message</label><textarea required placeholder="Tell us a bit more..."/></div>
                    <button type="submit" className="btn btn-primary" style={{justifyContent:'center'}}>
                      Send Message <Icon name="arrow" size={16}/>
                    </button>
                  </form>
                </>
              ) : (
                <div className="text-center" style={{padding: '40px 0'}}>
                  <div style={{
                    width: 72, height: 72, borderRadius: '50%',
                    background: 'var(--vg-gold-100)',
                    color:'var(--vg-gold-700)',
                    margin: '0 auto 24px',
                    display:'flex', alignItems:'center', justifyContent:'center',
                  }}><Icon name="check" size={36}/></div>
                  <h2 style={{fontStyle:'italic'}}>Message received!</h2>
                  <p className="muted" style={{maxWidth: 360, margin: '12px auto 0'}}>Thank you for reaching out. A member of our team will be in touch within 1–2 days.</p>
                  <button onClick={() => setSubmitted(false)} className="btn btn-outline" style={{marginTop: 24}}>Send another</button>
                </div>
              )}
            </div>

            {/* INFO */}
            <div style={{display:'flex', flexDirection:'column', gap: 16}}>
              <div className="contact-info-card">
                <div className="info-row">
                  <Icon name="mail" size={20} color="#C8A04A"/>
                  <div>
                    <div className="info-label">Email</div>
                    <a href="mailto:stephen.bala@visiongeneration.org" style={{fontFamily:'var(--font-display)', fontSize: 18, fontStyle:'italic', color:'var(--vg-purple-700)', wordBreak:'break-all'}}>
                      stephen.bala@visiongeneration.org
                    </a>
                  </div>
                </div>
                <div className="info-row">
                  <Icon name="phone" size={20} color="#C8A04A"/>
                  <div>
                    <div className="info-label">Phone / WhatsApp</div>
                    <div style={{fontFamily:'var(--font-display)', fontSize: 18, fontStyle:'italic'}}>+971 (0) 50 000 0000</div>
                  </div>
                </div>
                <div className="info-row">
                  <Icon name="clock" size={20} color="#C8A04A"/>
                  <div>
                    <div className="info-label">Office Hours</div>
                    <div style={{fontSize: 14}}>Tuesday – Saturday · 10:00 AM – 6:00 PM</div>
                    <div className="muted" style={{fontSize: 13}}>Sundays we're worshipping with you.</div>
                  </div>
                </div>
              </div>

              <div className="card" style={{padding: 28}}>
                <div className="info-label">Visit a campus</div>
                <div style={{display:'flex', gap: 6, flexWrap:'wrap', marginTop: 12, marginBottom: 16}}>
                  {LOCATIONS.map(l => (
                    <button
                      key={l.id}
                      onClick={() => setCampus(l.id)}
                      className={`loc-pill ${campus === l.id ? 'is-active' : ''}`}
                      style={{padding: '8px 14px', fontSize: 13}}
                    >
                      {l.flag} {l.city}
                    </button>
                  ))}
                </div>
                <div className="map-ph" style={{aspectRatio:'16/9', marginTop: 0}}>
                  <div className="map-grid"></div>
                  <div className="map-pin"><Icon name="pin" size={18} color="#fff"/></div>
                </div>
                <div style={{marginTop: 16}}>
                  <h4 style={{fontStyle:'italic'}}>{loc.city}</h4>
                  <div className="muted" style={{fontSize: 14, marginTop: 4}}>{loc.address}</div>
                  <div style={{display:'flex', gap: 8, marginTop: 16}}>
                    <button className="btn btn-outline btn-sm"><Icon name="pin" size={14}/> Directions</button>
                    <button onClick={() => navigate('visit')} className="btn btn-ghost btn-sm">Plan visit</button>
                  </div>
                </div>
              </div>

              <div className="contact-social">
                <div className="info-label">Follow our journey</div>
                <div style={{display:'flex', gap: 10, marginTop: 12}}>
                  <a href="#" className="social-btn-light"><Icon name="fb" size={16}/></a>
                  <a href="#" className="social-btn-light"><Icon name="ig" size={16}/></a>
                  <a href="#" className="social-btn-light"><Icon name="yt" size={16}/></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; }
          .contact-info-card {
            background: linear-gradient(165deg, var(--vg-purple-900) 0%, var(--vg-purple-700) 100%);
            color: #fff;
            border-radius: 24px;
            padding: 32px;
            display: flex; flex-direction: column; gap: 20px;
            position: relative;
            overflow: hidden;
          }
          .contact-info-card::before {
            content: "";
            position: absolute;
            bottom: -80px; right: -80px;
            width: 220px; height: 220px;
            background: radial-gradient(circle, rgba(200,160,74,0.4), transparent 70%);
            pointer-events: none;
          }
          .info-row {
            display: flex; gap: 14px; align-items: flex-start;
            position: relative; z-index: 2;
          }
          .info-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vg-gold-500); }
          .contact-info-card .info-label { color: var(--vg-gold-500); }
          .contact-info-card a, .contact-info-card .info-row > div > div:not(.info-label) { color: #fff; }
          .contact-social {
            padding: 20px 24px;
            background: #fff;
            border: 1px solid var(--vg-line);
            border-radius: 16px;
          }
          .social-btn-light {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--vg-purple-50);
            color: var(--vg-purple-700);
            display: flex; align-items: center; justify-content: center;
            transition: all .2s ease;
          }
          .social-btn-light:hover {
            background: var(--vg-gold-600); color: var(--vg-purple-900); transform: translateY(-2px);
          }
          @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { EventsPage, MinistriesPage, ContactPage });