// ===== About Page =====
function AboutPage({ navigate }) {
  return (
    <div className="page-enter">
      <section className="section" style={{paddingTop: 64, paddingBottom: 48}}>
        <div className="container">
          <div className="eyebrow"><span className="dot"/>About Vision Generation</div>
          <h1 style={{marginTop: 24, maxWidth: 900}}>
            One vision. Two countries. <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>One growing family.</em>
          </h1>
          <p className="lead" style={{maxWidth: 760, marginTop: 24}}>
            Vision Generation is a non-denominational, full-gospel church — born in Abu Dhabi in 2017 and now home to a family worshipping across four cities in the UAE and the Philippines.
          </p>
        </div>
      </section>

      {/* STORY */}
      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="story-grid">
            <div>
              <ImgPh dark label="Founding Service · Abu Dhabi 2017" style={{aspectRatio:'4/5', borderRadius: 24}}/>
            </div>
            <div>
              <div className="eyebrow"><span className="dot"/>Our Story</div>
              <h2 style={{marginTop: 16}}>It started with a small group, a big God, and a borrowed room.</h2>
              <div style={{marginTop: 24, display:'flex', flexDirection:'column', gap: 16, color:'var(--vg-ink-soft)', fontSize: 17}}>
                <p>In 2017, Pastor Stephen Bala and a handful of believers gathered in a small space in Abu Dhabi with a clear conviction: God was raising up a generation marked by His vision — anchored in the Word, alive in the Spirit, and burning to bless their cities.</p>
                <p>What started as a few has become many. In just 8 years, Vision Generation has become a multi-cultural family across <strong>four campuses</strong> — Abu Dhabi, Dubai, Imus, and Trece Martires — with people from every walk of life calling it home.</p>
                <p>We are not a perfect church. We are a family. And our doors — across cities, languages, and backgrounds — are wide open to you.</p>
              </div>
            </div>
          </div>
          <style>{`
            .story-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
            @media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; gap: 40px; } }
          `}</style>
        </div>
      </section>

      {/* MISSION / TAGLINE */}
      <section className="section section-dark">
        <div className="container">
          <div style={{textAlign:'center', maxWidth: 880, margin: '0 auto'}}>
            <div className="eyebrow" style={{justifyContent:'center'}}><span className="dot"/>Our Tagline</div>
            <h2 style={{marginTop: 24, fontSize: 'clamp(48px, 7vw, 96px)'}}>
              <em style={{
                background: 'linear-gradient(135deg, var(--vg-gold-500), var(--vg-gold-200))',
                WebkitBackgroundClip: 'text',
                backgroundClip: 'text',
                color: 'transparent',
                fontStyle: 'italic',
              }}>"Blessed to Bless."</em>
            </h2>
            <p className="lead" style={{color:'#D9CCEF', marginTop: 24, fontSize: 22}}>
              Three words. One conviction. We believe that everything God pours into us — His grace, His Word, His Spirit, His people — is meant to overflow. We are blessed not to keep, but to give.
            </p>
            <div className="mission-trio">
              <div><div className="big">01</div><h4 style={{color:'#fff'}}>To Worship</h4><p style={{color:'#D9CCEF'}}>To exalt the name of Jesus with our whole lives.</p></div>
              <div><div className="big">02</div><h4 style={{color:'#fff'}}>To Grow</h4><p style={{color:'#D9CCEF'}}>To become disciples who make disciples.</p></div>
              <div><div className="big">03</div><h4 style={{color:'#fff'}}>To Bless</h4><p style={{color:'#D9CCEF'}}>To carry the love of Jesus to the ends of the earth.</p></div>
            </div>
          </div>
        </div>
        <style>{`
          .mission-trio {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 32px;
            margin-top: 64px; text-align: left;
          }
          .mission-trio .big {
            font-family: var(--font-display);
            font-style: italic;
            font-size: 56px;
            color: var(--vg-gold-500);
            line-height: 1;
          }
          .mission-trio h4 { margin: 12px 0 6px; font-size: 22px; }
          @media (max-width: 720px) { .mission-trio { grid-template-columns: 1fr; gap: 32px; } }
        `}</style>
      </section>

      {/* PASTOR */}
      <section className="section">
        <div className="container">
          <div className="pastor-grid">
            <div>
              <img
                src="/welcome/uploads/pastor-stephen.jpg"
                alt="Pastor Stephen Bala"
                style={{
                  width: '100%',
                  aspectRatio: '4/5',
                  objectFit: 'cover',
                  borderRadius: 24,
                  display: 'block',
                }}
              />
            </div>
            <div>
              <div className="eyebrow"><span className="dot"/>Senior Pastor</div>
              <h2 style={{marginTop: 16}}>Pastor Stephen Bala</h2>
              <p style={{marginTop: 16, color: 'var(--vg-gold-700)', fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 22}}>
                Founder · Senior Pastor · Father · Friend
              </p>
              <div style={{marginTop: 24, display:'flex', flexDirection:'column', gap: 16, color:'var(--vg-ink-soft)'}}>
                <p>Pastor Stephen carries a deep love for the local church and a fiery conviction that the Gospel still changes everything. Together with his wife Pastora Pamela Rose, he founded Vision Generation in 2017 with a vision to raise a generation that is anchored in Christ and aflame with His Spirit.</p>
                <p>His preaching is bold, biblical, and warm — equal parts truth and tenderness. Whether he's pastoring a young couple, mentoring a leader, or speaking across our four campuses, his message is always the same: <em>you are deeply loved by a Father who has more for you than you can imagine.</em></p>
              </div>
              <div style={{display:'flex', gap: 12, marginTop: 32, flexWrap:'wrap'}}>
                <button className="btn btn-primary"><Icon name="mail" size={16}/> Get in touch</button>
                <button onClick={() => navigate('sermons')} className="btn btn-outline">
                  <Icon name="play" size={16}/> Watch his sermons
                </button>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .pastor-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
          @media (max-width: 900px) { .pastor-grid { grid-template-columns: 1fr; gap: 40px; } }
        `}</style>
      </section>

      {/* WHAT WE BELIEVE */}
      <section className="section section-cream">
        <div className="container">
          <div style={{textAlign:'center', maxWidth: 720, margin: '0 auto 56px'}}>
            <div className="eyebrow" style={{justifyContent:'center'}}><span className="dot"/>What We Believe</div>
            <h2 style={{marginTop: 16}}>Anchored in the unchanging truth of Scripture.</h2>
            <p className="lead" style={{marginTop: 16}}>
              We are a non-denominational, full-gospel church. Here's the foundation we stand on — drawn from the Word of God and lived out in our weekly life together.
            </p>
          </div>

          <div className="beliefs-grid">
            {BELIEFS.map((b, i) => (
              <div key={b.title} className="card belief-card">
                <div className="belief-num">{String(i+1).padStart(2, '0')}</div>
                <h3 style={{fontSize: 22, marginTop: 12}}>{b.title}</h3>
                <p style={{marginTop: 12, color:'var(--vg-mute)', fontSize: 15}}>{b.body}</p>
              </div>
            ))}
          </div>

          <div style={{textAlign:'center', marginTop: 48}}>
            <button onClick={() => navigate('visit')} className="btn btn-primary btn-lg">
              Plan Your Visit <Icon name="arrow" size={18}/>
            </button>
          </div>
        </div>
        <style>{`
          .beliefs-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
          }
          .belief-card { padding: 28px; }
          .belief-num {
            font-family: var(--font-display);
            font-style: italic;
            font-size: 14px;
            color: var(--vg-gold-700);
            letter-spacing: 0.1em;
          }
          @media (max-width: 900px) { .beliefs-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 560px) { .beliefs-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>
    </div>
  );
}

// ===== Plan Your Visit Page =====
function VisitPage({ navigate }) {
  const [selectedLoc, setSelectedLoc] = React.useState('abu-dhabi');
  const loc = LOCATIONS.find(l => l.id === selectedLoc);

  const expect = [
    { icon: 'sparkle', title: 'Vibrant Worship', body: 'Around 30 minutes of full-hearted, Spirit-led worship — modern, alive, and unashamedly joyful.' },
    { icon: 'discipleship', title: 'Bible-Centered Message', body: 'A 35–40 minute message rooted in Scripture, practical for your week, and pointing you to Jesus.' },
    { icon: 'kids', title: 'Kids Are Welcome', body: 'Safe, fun, faith-filled environments for ages 0–11. Check-in opens 20 minutes before service.' },
    { icon: 'groups', title: 'Real Community', body: 'Stay after service for coffee, prayer, and meeting some of the family. Everyone is welcome at the table.' },
  ];

  const faqs = [
    { q: 'What should I wear?', a: 'Whatever feels like you. You\'ll see jeans, dresses, polos, and abayas — come comfortable. There is no dress code at Vision Generation.' },
    { q: 'How long is the service?', a: 'About 90 minutes from worship to the closing prayer. Plan to arrive 15 minutes early for parking and kids check-in.' },
    { q: 'What language is the service in?', a: 'All of our services are conducted in English across every campus.' },
    { q: 'Is parking available?', a: 'Yes — free parking is available at every campus. Look for our team in VG vests; they\'ll point you the right way.' },
    { q: 'Do I need to bring anything?', a: 'Just yourself, an open heart, and a Bible if you have one. We\'ve got coffee covered.' },
    { q: 'I\'m new to church. Will I feel out of place?', a: 'Not for a second. Come exactly as you are — questions, doubts, and all. You\'ll be welcomed like family because that\'s what you are.' },
  ];

  const [openFaq, setOpenFaq] = React.useState(0);

  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="section" style={{paddingTop: 64, paddingBottom: 48}}>
        <div className="container">
          <div className="visit-hero">
            <div>
              <div className="eyebrow"><span className="dot"/>Plan Your Visit</div>
              <h1 style={{marginTop: 24}}>
                We can't wait to <em style={{fontStyle:'italic', color:'var(--vg-gold-700)'}}>meet you.</em>
              </h1>
              <p className="lead" style={{marginTop: 24, maxWidth: 540}}>
                First time visiting? Take a deep breath — you're going to love it here. Here's everything you need to know to walk in like family.
              </p>
              <div style={{display:'flex', gap: 12, marginTop: 32, flexWrap:'wrap'}}>
                <button onClick={() => document.getElementById('visit-form')?.scrollIntoView({behavior:'smooth'})} className="btn btn-primary btn-lg">
                  Tell us you're coming <Icon name="arrow" size={18}/>
                </button>
                <button onClick={() => navigate('contact')} className="btn btn-outline btn-lg">
                  <Icon name="mail" size={18}/> Got a question?
                </button>
              </div>
            </div>
            <div style={{position:'relative'}}>
              <ImgPh dark label="Welcome Team · Greeters" style={{aspectRatio:'4/5', borderRadius: 24}}/>
              <div className="visit-pill">
                <Icon name="check" size={16} color="#3D1E6D"/>
                <span>No pressure. No expectations. Just welcome.</span>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .visit-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
          .visit-pill {
            position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
            background: var(--vg-gold-100);
            border: 1px solid var(--vg-gold-200);
            color: var(--vg-purple-700);
            padding: 14px 22px;
            border-radius: 999px;
            font-weight: 600;
            font-size: 14px;
            display: flex; align-items: center; gap: 10px;
            white-space: nowrap;
            box-shadow: var(--shadow-md);
          }
          @media (max-width: 900px) {
            .visit-hero { grid-template-columns: 1fr; gap: 56px; }
            .visit-pill { white-space: normal; text-align: center; }
          }
        `}</style>
      </section>

      {/* WHAT TO EXPECT */}
      <section className="section section-cream">
        <div className="container">
          <div style={{maxWidth: 720, marginBottom: 48}}>
            <div className="eyebrow"><span className="dot"/>What to Expect</div>
            <h2 style={{marginTop: 16}}>An hour and a half that just might change your week.</h2>
          </div>
          <div className="grid grid-4">
            {expect.map(e => (
              <div key={e.title} className="card" style={{padding: 28}}>
                <div className="mini-icon" style={{width: 52, height: 52, borderRadius: 14, background:'linear-gradient(135deg, var(--vg-purple-50), var(--vg-gold-100))', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--vg-purple-700)'}}>
                  <Icon name={e.icon} size={24}/>
                </div>
                <h3 style={{fontSize: 20, marginTop: 16}}>{e.title}</h3>
                <p style={{marginTop: 8, color:'var(--vg-mute)', fontSize: 14}}>{e.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICE TIMES + LOCATION SELECTOR */}
      <section className="section">
        <div className="container">
          <div className="eyebrow"><span className="dot"/>Pick a Sunday Service</div>
          <h2 style={{marginTop: 16, marginBottom: 32}}>Choose the campus closest to you.</h2>

          <div className="loc-selector">
            {LOCATIONS.map(l => (
              <button
                key={l.id}
                onClick={() => setSelectedLoc(l.id)}
                className={`loc-pill ${selectedLoc === l.id ? 'is-active' : ''}`}
              >
                <span style={{fontSize: 18}}>{l.flag}</span>
                <span>{l.city}</span>
              </button>
            ))}
          </div>

          <div className="service-card">
            <div>
              <div className="tag tag-gold">{loc.badge}</div>
              <h3 style={{fontSize: 36, marginTop: 12, fontStyle:'italic'}}>{loc.city}</h3>
              <p className="muted" style={{fontSize: 14}}>{loc.country}</p>
              <p style={{marginTop: 16}}>{loc.blurb}</p>
            </div>
            <div className="service-meta">
              <div className="meta-block">
                <Icon name="clock" size={20} color="#C8A04A"/>
                <div>
                  <div className="meta-label">Service Time</div>
                  <div className="meta-value">{loc.time}</div>
                  <div className="muted" style={{fontSize: 13}}>{loc.day}</div>
                </div>
              </div>
              <div className="meta-block">
                <Icon name="pin" size={20} color="#C8A04A"/>
                <div>
                  <div className="meta-label">Address</div>
                  <div style={{fontSize: 14, marginTop: 4}}>{loc.address}</div>
                </div>
              </div>
            </div>
            <div style={{display:'flex', gap: 12, gridColumn:'1 / -1', marginTop: 16, flexWrap:'wrap'}}>
              <button className="btn btn-primary"><Icon name="pin" size={16}/> Get Directions</button>
              <button onClick={() => navigate('contact')} className="btn btn-outline">Ask a question</button>
            </div>
          </div>
        </div>
        <style>{`
          .loc-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
          .loc-pill {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 10px 18px;
            border-radius: 999px;
            border: 1.5px solid var(--vg-line);
            background: #fff;
            font-weight: 600;
            font-size: 14px;
            transition: all .2s ease;
          }
          .loc-pill:hover { border-color: var(--vg-purple-700); }
          .loc-pill.is-active {
            background: var(--vg-purple-700);
            color: #fff;
            border-color: var(--vg-purple-700);
          }
          .service-card {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 40px;
            padding: 40px;
            background: linear-gradient(135deg, var(--vg-purple-50) 0%, var(--vg-gold-100) 130%);
            border: 1px solid var(--vg-purple-100);
            border-radius: 24px;
          }
          .service-meta { display: flex; flex-direction: column; gap: 24px; }
          .meta-block { display: flex; gap: 16px; align-items: flex-start; }
          .meta-label {
            font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
            color: var(--vg-gold-700);
          }
          .meta-value { font-family: var(--font-display); font-size: 28px; font-style: italic; line-height: 1.1; margin-top: 4px; }
          @media (max-width: 800px) { .service-card { grid-template-columns: 1fr; padding: 28px; gap: 28px; } }
        `}</style>
      </section>

      {/* FAQ */}
      <section className="section section-cream">
        <div className="container" style={{maxWidth: 880}}>
          <div className="eyebrow"><span className="dot"/>Frequently Asked</div>
          <h2 style={{marginTop: 16, marginBottom: 32}}>Quick answers for first-time visitors.</h2>
          <div style={{display:'flex', flexDirection:'column', gap: 12}}>
            {faqs.map((f, i) => (
              <div key={i} className="faq-item">
                <button onClick={() => setOpenFaq(openFaq === i ? -1 : i)} className="faq-q">
                  <span>{f.q}</span>
                  <span className={`faq-toggle ${openFaq === i ? 'is-open' : ''}`}>+</span>
                </button>
                {openFaq === i && <div className="faq-a">{f.a}</div>}
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .faq-item { background: #fff; border: 1px solid var(--vg-line); border-radius: 16px; overflow: hidden; }
          .faq-q {
            width: 100%; text-align: left; padding: 20px 24px;
            display: flex; align-items: center; justify-content: space-between;
            font-weight: 600; font-size: 17px; font-family: var(--font-display);
          }
          .faq-toggle {
            font-size: 28px; color: var(--vg-gold-700); transition: transform .25s ease; line-height: 1;
            font-family: var(--font-body); font-weight: 300;
          }
          .faq-toggle.is-open { transform: rotate(45deg); }
          .faq-a { padding: 0 24px 24px; color: var(--vg-mute); font-size: 15px; }
        `}</style>
      </section>

      {/* TELL US YOU'RE COMING */}
      <section className="section" id="visit-form">
        <div className="container">
          <div className="visit-form-card">
            <div>
              <div className="eyebrow"><span className="dot"/>Tell us you're coming</div>
              <h2 style={{marginTop: 16}}>We'll save you a seat.</h2>
              <p className="lead" style={{marginTop: 16}}>
                Drop us a line and our welcome team will look out for you on Sunday — coffee in hand, kids check-in mapped, no awkwardness required.
              </p>
              <div style={{marginTop: 24}}>
                <div className="reassure"><Icon name="check" size={16} color="#9B7A2E"/> Personal welcome at the door</div>
                <div className="reassure"><Icon name="check" size={16} color="#9B7A2E"/> Kids check-in walked through</div>
                <div className="reassure"><Icon name="check" size={16} color="#9B7A2E"/> Free coffee for first-timers</div>
              </div>
            </div>
            <form onSubmit={(e) => { e.preventDefault(); alert('Thanks! Our welcome team will be in touch.'); }} style={{display:'flex', flexDirection:'column', gap: 16}}>
              <div className="grid grid-2">
                <div className="field"><label>First name</label><input type="text" placeholder="Maria" required/></div>
                <div className="field"><label>Last name</label><input type="text" placeholder="Reyes"/></div>
              </div>
              <div className="field"><label>Email</label><input type="email" placeholder="you@example.com" required/></div>
              <div className="field">
                <label>Which campus are you visiting?</label>
                <select required defaultValue="">
                  <option value="" disabled>Select a campus</option>
                  {LOCATIONS.map(l => <option key={l.id} value={l.id}>{l.city} — {l.time} Sundays</option>)}
                </select>
              </div>
              <div className="field"><label>Anything we should know? (optional)</label><textarea placeholder="Bringing kids? First time at church? Let us know how to welcome you well."/></div>
              <button type="submit" className="btn btn-primary" style={{width:'100%'}}>
                I'm coming this Sunday <Icon name="arrow" size={16}/>
              </button>
            </form>
          </div>
        </div>
        <style>{`
          .visit-form-card {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 64px;
            padding: 56px;
            background: linear-gradient(165deg, var(--vg-purple-900) 0%, var(--vg-purple-700) 100%);
            color: #fff;
            border-radius: 32px;
            position: relative;
            overflow: hidden;
          }
          .visit-form-card::before {
            content: "";
            position: absolute;
            top: -100px; right: -100px;
            width: 320px; height: 320px;
            background: radial-gradient(circle, rgba(200,160,74,0.4), transparent 70%);
            pointer-events: none;
          }
          .visit-form-card h2, .visit-form-card .lead { color: #fff; }
          .visit-form-card .lead { color: #D9CCEF; }
          .visit-form-card .field label { color: #E8DDFA; }
          .visit-form-card .field input, .visit-form-card .field textarea, .visit-form-card .field select {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.18);
            color: #fff;
          }
          .visit-form-card .field input::placeholder, .visit-form-card .field textarea::placeholder { color: rgba(255,255,255,0.4); }
          .visit-form-card .field input:focus, .visit-form-card .field textarea:focus, .visit-form-card .field select:focus {
            border-color: var(--vg-gold-500);
            box-shadow: 0 0 0 4px rgba(200,160,74,0.18);
          }
          .reassure {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 0;
            color: #F2E2B0;
            font-size: 14px;
          }
          @media (max-width: 800px) {
            .visit-form-card { grid-template-columns: 1fr; gap: 40px; padding: 32px; }
          }
        `}</style>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, VisitPage });