// ===== Home Page =====
function HomePage({ navigate, onLogin }) {
  // Live CMS-driven content. Falls back to the seed SERMONS / EVENTS
  // arrays from data.jsx while the API call is in flight.
  const { sermons, events } = useSiteContent();
  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="container hero-grid">
          <div className="hero-copy">
            <div className="eyebrow fade-up"><span className="dot"/>A church across the UAE & PH</div>
            <h1 className="hero-headline fade-up-2">
              You are <em>blessed</em><br/>
              to be a <em>blessing.</em>
            </h1>
            <p className="lead fade-up-3" style={{maxWidth: 540, marginTop: 24}}>
              Welcome to Vision Generation — a non-denominational, full-gospel family of churches believing for revival in our cities and the nations. Whoever you are, wherever you've been, there's a seat saved for you this Sunday.
            </p>
            <div className="hero-ctas fade-up-4">
              <button onClick={() => navigate('visit')} className="btn btn-primary btn-lg">
                Plan Your Visit <Icon name="arrow" size={18}/>
              </button>
              <button onClick={() => navigate('sermons')} className="btn btn-outline btn-lg">
                <Icon name="play" size={18}/> Watch Sermons
              </button>
            </div>
            <div className="hero-meta fade-up-4">
              <div><strong>4 cities</strong> · 2 countries</div>
              <div className="dot-sep">·</div>
              <div><strong>Founded 2017</strong> · Abu Dhabi</div>
              <div className="dot-sep">·</div>
              <div><strong>One family</strong> · Many homes</div>
            </div>
          </div>

          <div className="hero-visual fade-up-3">
            <ImgPh dark label="Family Worship Photo · Hands Raised" style={{
              aspectRatio: '4/5',
              borderRadius: 32,
              boxShadow: 'var(--shadow-lg)',
            }}/>
            <div className="hero-card hero-card-1">
              <div style={{fontSize: 11, fontWeight: 700, letterSpacing:'0.18em', color: 'var(--vg-gold-700)', textTransform:'uppercase'}}>This Sunday</div>
              <div style={{fontFamily:'var(--font-display)', fontSize: 24, fontStyle:'italic', marginTop: 4}}>10:30 AM</div>
              <div style={{fontSize: 13, color: 'var(--vg-mute)'}}>Abu Dhabi · Founding Campus</div>
            </div>
            {/* Latest-sermon "tablet" floating over the hero photo.
                Series label is shown when set, else the title — keeps
                the chip short. Click jumps to /sermons. */}
            <button
              type="button"
              onClick={() => navigate('sermons')}
              className="hero-card hero-card-2"
              style={{ background: 'inherit', cursor: 'pointer', textAlign: 'left' }}
            >
              <div className="flex items-center gap-12">
                <div style={{width:36, height:36, borderRadius:'50%', background:'var(--vg-purple-700)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--vg-gold-500)'}}>
                  <Icon name="play" size={16}/>
                </div>
                <div>
                  <div style={{fontSize: 12, color:'var(--vg-mute)'}}>Latest sermon</div>
                  <div style={{fontWeight: 700, fontSize: 14}}>
                    {sermons[0]?.series || sermons[0]?.title || 'Latest message'}
                  </div>
                </div>
              </div>
            </button>
            <svg className="hero-blob" viewBox="0 0 400 400" aria-hidden>
              <defs>
                <linearGradient id="blob-g" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#C8A04A" stopOpacity="0.4"/>
                  <stop offset="100%" stopColor="#5A2FA0" stopOpacity="0.0"/>
                </linearGradient>
              </defs>
              <circle cx="200" cy="200" r="160" fill="url(#blob-g)"/>
            </svg>
          </div>
        </div>

        <style>{`
          .hero {
            position: relative;
            padding: 56px 0 96px;
            overflow: hidden;
          }
          .hero::before {
            content: "";
            position: absolute;
            top: -100px; left: -200px;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(124,78,209,0.18), transparent 60%);
            pointer-events: none;
          }
          .hero::after {
            content: "";
            position: absolute;
            bottom: -150px; right: -100px;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(200,160,74,0.18), transparent 60%);
            pointer-events: none;
          }
          .hero-grid {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: 80px;
            align-items: center;
            position: relative;
            z-index: 2;
          }
          .hero-headline { margin-top: 24px; }
          .hero-ctas {
            display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap;
          }
          .hero-meta {
            display: flex; gap: 16px; margin-top: 36px;
            color: var(--vg-mute); font-size: 14px;
            flex-wrap: wrap;
          }
          .hero-meta strong { color: var(--vg-purple-700); }
          .dot-sep { opacity: 0.4; }
          .hero-visual { position: relative; }
          .hero-card {
            position: absolute;
            background: #fff;
            border-radius: 18px;
            padding: 16px 20px;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--vg-line);
            z-index: 3;
          }
          .hero-card-1 { top: 32px; left: -32px; }
          .hero-card-2 { bottom: 48px; right: -32px; }
          .hero-blob {
            position: absolute; inset: -10%;
            z-index: -1; pointer-events: none;
          }
          @media (max-width: 960px) {
            .hero-grid { grid-template-columns: 1fr; gap: 48px; }
            .hero-card-1 { left: 16px; }
            .hero-card-2 { right: 16px; }
          }
        `}</style>
      </section>

      {/* WELCOME */}
      <section className="section" style={{paddingTop: 32}}>
        <div className="container">
          <div className="welcome-grid">
            <div>
              <h2>Whoever you are. <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>Wherever you're from.</em></h2>
            </div>
            <div>
              <p className="lead">
                Vision Generation is a vibrant, multi-cultural church family. We believe that God still moves, that the Bible is alive, and that the local church is the hope of the world. Most of all — we believe you belong here.
              </p>
              <p className="lead">
                Come as you are. Bring your questions, your kids, your doubts, your dreams. We'll meet you with worship, the Word, and a warm welcome.
              </p>
            </div>
          </div>
        </div>
        <style>{`
          .welcome-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
          @media (max-width: 800px) { .welcome-grid { grid-template-columns: 1fr; gap: 24px; } }
        `}</style>
      </section>

      {/* ONE CHURCH MULTIPLE LOCATIONS */}
      <section className="section section-dark" style={{padding: '96px 0'}}>
        <div className="container">
          <div style={{textAlign:'center', maxWidth: 720, margin: '0 auto 48px'}}>
            <div className="eyebrow" style={{justifyContent:'center'}}><span className="dot"/>One Church · Multiple Locations</div>
            <h2 style={{marginTop: 16}}>From Abu Dhabi to Cavite — <em style={{fontStyle:'italic', color: 'var(--vg-gold-500)'}}>one family, many homes.</em></h2>
            <p className="lead" style={{color:'#D9CCEF', marginTop: 16}}>
              In just 8 years we've grown from one campus to four — across two countries — because the vision is bigger than any one city.
            </p>
          </div>

          <div className="loc-preview-grid">
            {LOCATIONS.map((loc, i) => (
              <button key={loc.id} onClick={() => navigate('locations')} className="loc-preview-card">
                <div className="loc-preview-num">0{i+1}</div>
                <div style={{flex:1}}>
                  <div className="loc-preview-flag">{loc.flag}</div>
                  <h3 style={{color:'#fff', fontStyle:'italic', fontSize: 28, marginTop: 8}}>{loc.city}</h3>
                  <div style={{color:'var(--vg-gold-500)', fontFamily:'var(--font-body)', fontSize: 13, fontWeight: 700, letterSpacing:'0.12em', textTransform:'uppercase', marginTop: 4}}>
                    Sundays · {loc.time}
                  </div>
                  <div style={{color:'#B7A6D6', fontSize: 14, marginTop: 4}}>{loc.country}</div>
                </div>
                <Icon name="arrow" size={20} color="#C8A04A"/>
              </button>
            ))}
          </div>

          <div style={{textAlign:'center', marginTop: 48}}>
            <button onClick={() => navigate('locations')} className="btn btn-gold btn-lg">
              Find a Location <Icon name="arrow" size={18}/>
            </button>
          </div>
        </div>

        <style>{`
          .loc-preview-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
          }
          .loc-preview-card {
            text-align: left;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 24px;
            padding: 28px 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            color: #fff;
            transition: all .25s ease;
            min-height: 240px;
          }
          .loc-preview-card:hover {
            transform: translateY(-4px);
            background: rgba(200,160,74,0.08);
            border-color: var(--vg-gold-600);
          }
          .loc-preview-num {
            font-family: var(--font-display);
            font-size: 14px;
            color: var(--vg-gold-500);
            font-style: italic;
          }
          .loc-preview-flag { font-size: 28px; }
          @media (max-width: 900px) { .loc-preview-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 500px) { .loc-preview-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* SERVICE TIMES PREVIEW + LATEST SERMON */}
      <section className="section">
        <div className="container">
          <div className="two-col-feature">
            {/* Latest sermon — sermons[0] is the featured row from
                the CMS (the API orders is_featured first). */}
            <div className="feature-block">
              <div className="eyebrow"><span className="dot"/>Latest Sermon</div>
              <h2 style={{marginTop: 16}}>{sermons[0]?.title || ''}</h2>
              <div style={{display:'flex', gap: 16, color:'var(--vg-mute)', fontSize: 14, margin: '12px 0 24px'}}>
                {sermons[0]?.speaker && <span>{sermons[0].speaker}</span>}
                {sermons[0]?.speaker && sermons[0]?.date && <span>·</span>}
                {sermons[0]?.date && <span>{sermons[0].date}</span>}
                {sermons[0]?.date && sermons[0]?.length && <span>·</span>}
                {sermons[0]?.length && <span>{sermons[0].length}</span>}
              </div>
              <div style={{position:'relative', borderRadius: 24, overflow:'hidden'}}>
                <ImgPh dark label="Sermon Video Thumbnail" style={{aspectRatio:'16/9'}}/>
                <button onClick={() => navigate('sermons')} className="play-overlay" aria-label="Play latest sermon">
                  <Icon name="play" size={28}/>
                </button>
              </div>
              <button onClick={() => navigate('sermons')} className="btn btn-outline" style={{marginTop: 24}}>
                Watch all sermons <Icon name="arrow" size={16}/>
              </button>
            </div>

            {/* Pastor welcome */}
            <div className="feature-block pastor-block">
              <div style={{display:'flex', gap: 20, alignItems:'flex-start'}}>
                <ImgPh label="Ps. Stephen" style={{width: 96, height: 96, borderRadius: '50%', flexShrink: 0}}/>
                <div>
                  <div className="eyebrow"><span className="dot"/>A Word From Our Pastor</div>
                  <h3 style={{marginTop: 12, fontSize: 24, fontStyle:'italic'}}>"You weren't blessed to keep it. You were blessed to give it away."</h3>
                  <div style={{marginTop: 16, fontSize: 14}}>
                    <div style={{fontWeight: 700}}>Pastor Stephen Bala</div>
                    <div className="muted">Senior Pastor · Vision Generation</div>
                  </div>
                </div>
              </div>
              <p style={{marginTop: 24}}>
                Whether this is your first time hearing about Jesus or you've walked with Him for decades, you'll find a home here. Our church exists for the next generation, the next family, the next person who walks through our doors. That just might be you.
              </p>
              <button onClick={() => navigate('about')} className="btn btn-ghost" style={{padding:'8px 0', color:'var(--vg-purple-700)'}}>
                Read Pastor Stephen's story <Icon name="arrow" size={16}/>
              </button>
            </div>
          </div>
        </div>

        <style>{`
          .two-col-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
          .feature-block {}
          .pastor-block {
            background: linear-gradient(165deg, var(--vg-purple-50) 0%, var(--vg-gold-100) 120%);
            border-radius: 32px;
            padding: 40px;
            border: 1px solid var(--vg-purple-100);
            position: relative;
          }
          .play-overlay {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(31,15,61,0.2);
            color: #fff;
            transition: background .25s ease;
          }
          .play-overlay > svg {
            width: 80px; height: 80px;
            background: var(--vg-gold-600);
            border-radius: 50%;
            padding: 20px;
            color: var(--vg-purple-900);
            transition: transform .25s ease;
          }
          .play-overlay:hover { background: rgba(31,15,61,0.45); }
          .play-overlay:hover > svg { transform: scale(1.05); }
          @media (max-width: 900px) {
            .two-col-feature { grid-template-columns: 1fr; gap: 40px; }
            .pastor-block { padding: 28px; }
          }
        `}</style>
      </section>

      {/* MINISTRIES PREVIEW */}
      <section className="section section-cream">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="dot"/>Ministries</div>
              <h2 style={{marginTop: 16, maxWidth: 640}}>There's a place for every member of your family.</h2>
            </div>
            <button onClick={() => navigate('ministries')} className="btn btn-outline">
              See all ministries <Icon name="arrow" size={16}/>
            </button>
          </div>
          <div className="grid grid-3" style={{marginTop: 40}}>
            {MINISTRIES.slice(0, 6).map(m => (
              <div key={m.id} className="card mini-min-card">
                <div className="mini-icon"><Icon name={m.icon} size={26}/></div>
                <h3 style={{fontSize: 22, marginTop: 16}}>{m.name}</h3>
                <div className="tag tag-gold" style={{marginTop: 8}}>{m.tag}</div>
                <p style={{marginTop: 12, color:'var(--vg-mute)', fontSize: 14}}>{m.desc}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
          .mini-min-card { padding: 32px 28px; }
          .mini-icon {
            width: 56px; height: 56px; border-radius: 16px;
            background: linear-gradient(135deg, var(--vg-purple-50), var(--vg-gold-100));
            display: flex; align-items: center; justify-content: center;
            color: var(--vg-purple-700);
          }
        `}</style>
      </section>

      {/* EVENTS PREVIEW */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="dot"/>Upcoming</div>
              <h2 style={{marginTop: 16}}>Don't miss what's <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>coming up.</em></h2>
            </div>
            <button onClick={() => navigate('events')} className="btn btn-outline">
              All events <Icon name="arrow" size={16}/>
            </button>
          </div>
          <div className="grid grid-3" style={{marginTop: 40}}>
            {events.slice(0, 3).map(e => (
              <button key={e.id} onClick={() => navigate('events')} className="card event-card-mini" style={{textAlign:'left'}}>
                <ImgPh label={e.title} style={{aspectRatio:'16/10'}}/>
                <div style={{padding: 24}}>
                  <div style={{display:'flex', gap: 8}}>
                    <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>
                  <div style={{display:'flex', gap: 12, marginTop: 12, color:'var(--vg-mute)', fontSize: 13}}>
                    <span><Icon name="clock" size={14} color="currentColor"/> {e.date} · {e.time}</span>
                    <span>·</span>
                    <span><Icon name="pin" size={14} color="currentColor"/> {e.location}</span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
        <style>{`
          .event-card-mini { padding: 0; }
          .event-card-mini > div span { display: inline-flex; align-items: center; gap: 4px; }
        `}</style>
      </section>

      {/* FINAL CTA */}
      <section className="section" style={{paddingTop: 32}}>
        <div className="container">
          <div className="final-cta">
            <ImgPh dark label="Sunday Worship · Hands Lifted" style={{position:'absolute', inset:0, borderRadius: 32}}/>
            <div className="final-cta-overlay">
              <div className="eyebrow" style={{color:'var(--vg-gold-500)'}}><span className="dot" style={{background:'var(--vg-gold-500)'}}/>Your seat is saved</div>
              <h2 style={{color:'#fff', marginTop: 16, fontSize: 'clamp(40px, 5vw, 72px)'}}>
                See you this <em style={{
                  background: 'linear-gradient(135deg, var(--vg-gold-500), var(--vg-gold-200))',
                  WebkitBackgroundClip: 'text',
                  backgroundClip: 'text',
                  color: 'transparent',
                  fontStyle: 'italic',
                }}>Sunday.</em>
              </h2>
              <p className="lead" style={{color:'#F2E2B0', marginTop: 16, maxWidth: 540, marginLeft:'auto', marginRight:'auto'}}>
                Plan your visit in 30 seconds. We'll save you a parking spot, point you to kids check-in, and have a fresh coffee waiting.
              </p>
              <div style={{display:'flex', gap: 16, justifyContent:'center', marginTop: 32, flexWrap:'wrap'}}>
                <button onClick={() => navigate('visit')} className="btn btn-gold btn-lg">
                  Plan Your Visit <Icon name="arrow" size={18}/>
                </button>
                <button onClick={() => navigate('contact')} className="btn btn-outline-gold btn-lg">
                  Contact Us
                </button>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .final-cta {
            position: relative;
            border-radius: 32px;
            overflow: hidden;
            min-height: 480px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .final-cta-overlay {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 80px 32px;
            background: linear-gradient(180deg, rgba(31,15,61,0.5) 0%, rgba(31,15,61,0.85) 100%);
            width: 100%;
            min-height: 480px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
          }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage });