// pages/HomeV2.jsx — Redesigned homepage
// Changes: full-bleed hero, coverage moved up, static scripture,
// bolder pillars, fewer prayer cards, tighter padding, warmer retro

const useLangV2 = () => {
  const [, setLang] = React.useState(() => (window.__getLang && window.__getLang()) || 'en');
  React.useEffect(() => {
    if (!window.__onLangChange) return;
    return window.__onLangChange(setLang);
  }, []);
};
const T2 = (k) => (window.t ? window.t(k) : k);

/* ─── COUNTDOWN BADGE ─── */
const LAUNCH_DATE = new Date('2027-01-04T00:00:00-08:00');
const CountdownBadge = () => {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = LAUNCH_DATE - now;
  if (diff <= 0) return null;
  const days = Math.floor(diff / 86400000);
  const hrs = Math.floor((diff % 86400000) / 3600000);
  const mins = Math.floor((diff % 3600000) / 60000);
  const secs = Math.floor((diff % 60000) / 1000);
  const unit = (n, label) => (
    <div style={{ textAlign: 'center' }}>
      <div className="h-display" style={{ fontSize: 22, color: 'var(--cream)', lineHeight: 1 }}>{String(n).padStart(2, '0')}</div>
      <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 8, letterSpacing: '0.15em', color: 'var(--gold)', textTransform: 'uppercase', marginTop: 4 }}>{label}</div>
    </div>
  );
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 18,
      background: 'rgba(6,28,58,0.6)', border: '1px solid rgba(242,183,5,0.3)',
      borderRadius: 10, padding: '12px 20px', marginBottom: 32,
    }}>
      <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.15em', color: 'var(--gold)', textTransform: 'uppercase' }}>
        {T2('home.hero.countdown')}
      </div>
      <div style={{ display: 'flex', gap: 14 }}>
        {unit(days, 'Days')}
        {unit(hrs, 'Hrs')}
        {unit(mins, 'Min')}
        {unit(secs, 'Sec')}
      </div>
    </div>
  );
};

/* ─── HERO: full-bleed photo + overlay ─── */
const HomeHeroV2 = ({ onNavigate }) => {
  useLangV2();

  return (
    <section style={{
      position: 'relative',
      minHeight: '92vh',
      display: 'flex', alignItems: 'center',
      overflow: 'hidden',
    }} className="grain">
      {/* Background image */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url('uploads/sacramento-sunrise.png')`,
        backgroundSize: 'cover',
        backgroundPosition: 'center 30%',
        filter: 'saturate(0.7) contrast(1.05)',
      }} />
      {/* Dark overlay with warm tint */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(6,28,58,0.82) 0%, rgba(11,45,92,0.7) 50%, rgba(6,28,58,0.88) 100%)',
      }} />
      {/* Gold glow accent */}
      <div style={{
        position: 'absolute', top: '20%', left: '50%', transform: 'translateX(-50%)',
        width: 800, height: 800, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(242,183,5,0.08) 0%, transparent 60%)',
      }} />

      <div className="u-container hero-container" style={{ position: 'relative', zIndex: 2, padding: '100px 40px 80px', width: '100%' }}>
        <div style={{ maxWidth: 800 }}>
          <div className="u-eyebrow" style={{ color: 'var(--gold)', marginBottom: 20 }}>
            {T2('home.hero.eyebrow')}
          </div>
          <h1 className="h-display h-hero" style={{
            fontSize: 'clamp(40px, 8vw, 100px)',
            color: 'var(--cream)',
            margin: '0 0 8px',
            textTransform: 'uppercase',
            lineHeight: 1,
          }}>
            {T2('home.hero.title1')}<br />
            <span style={{ color: 'var(--gold)' }}>{T2('home.hero.title2')}</span><br />
            {T2('home.hero.title3')}
          </h1>
          <p className="h-elegant" style={{
            fontSize: 'clamp(18px, 2.5vw, 26px)',
            color: 'var(--gold-soft)',
            margin: '24px 0 36px',
            maxWidth: 560,
            lineHeight: 1.4,
          }}>
            {T2('home.hero.sub')}
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 24 }}>
            <button className="btn btn-primary" onClick={() => document.getElementById('register-form')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>
              {T2('home.hero.ctaJoin')}
            </button>
          </div>
          <CountdownBadge />
        </div>

        {/* Stats row — desktop */}
        <div className="hero-stats-v2-desktop" style={{
          display: 'flex', gap: 0,
          borderTop: '1px solid rgba(242,183,5,0.3)',
          borderBottom: '1px solid rgba(242,183,5,0.3)',
        }}>
          {[
            { big: '250+', small: T2('home.hero.statChurches') },
            { big: '80+', small: T2('home.hero.statIntercessors') },
            { big: '365', small: T2('home.hero.statCoverage') },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '20px 32px',
              borderRight: i < 2 ? '1px solid rgba(242,183,5,0.25)' : 'none',
              textAlign: 'center',
            }}>
              <div className="h-display" style={{ fontSize: 44, color: 'var(--cream)', lineHeight: 1 }}>{s.big}</div>
              <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.15em',
                color: 'var(--gold)', textTransform: 'uppercase', marginTop: 8,
              }}>{s.small}</div>
            </div>
          ))}
        </div>

        {/* Stats row — mobile */}
        <div className="hero-stats-v2-mobile" style={{ display: 'none' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            borderTop: '1px solid rgba(242,183,5,0.3)',
            borderBottom: '1px solid rgba(242,183,5,0.3)',
          }}>
            {[
              { big: '250+', small: T2('home.hero.statChurches') },
              { big: '80+', small: T2('home.hero.statIntercessors') },
              { big: '365', small: T2('home.hero.statCoverage') },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '14px 8px',
                borderRight: i < 2 ? '1px solid rgba(242,183,5,0.25)' : 'none',
                textAlign: 'center',
              }}>
                <div className="h-display" style={{ fontSize: 28, color: 'var(--cream)', lineHeight: 1 }}>{s.big}</div>
                <div style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 8, letterSpacing: '0.12em',
                  color: 'var(--gold)', textTransform: 'uppercase', marginTop: 6,
                }}>{s.small}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─── COVERAGE CLOCK: moved up to position 2 ─── */
const FALLBACK_CHURCHES = [
  'Capital Christian', 'Bayside Church', 'Grace Community',
  'Adventure Church', 'Warehouse Christian', 'William Jessup',
  'Fountain of Life', 'New Life Covenant', 'Destiny Christian',
  'Harvest Church', "The Father's House", 'Fremont Presbyterian',
];
const CoverageClockV2 = ({ onNavigate }) => {
  useLangV2();
  const hours = Array.from({ length: 24 });
  const [now] = React.useState(new Date());
  const currentHour = now.getHours();
  const [hourMap, setHourMap] = React.useState({});
  const [churchNames, setChurchNames] = React.useState(FALLBACK_CHURCHES);


  React.useEffect(() => {
    fetch('/api/churches')
      .then(r => r.json())
      .then(({ churches, hourMap: map }) => {
        if (churches && churches.length > 0) {
          setChurchNames(churches.map(c => c.name || c.Name).filter(Boolean));
        }
        if (map && Object.keys(map).length > 0) setHourMap(map);
      })
      .catch(() => {});
  }, []);

  const coverageFor = (h) => {
    if (hourMap[h]) return [hourMap[h]];
    const seed = (h * 7) % churchNames.length;
    return [churchNames[seed], churchNames[(seed + 3) % churchNames.length]];
  };
  const isCovered = (h) => !!hourMap[h] || (Object.keys(hourMap).length === 0 && h !== 3 && h !== 14);

  return (
    <section className="section grain" style={{ background: 'var(--beige)', padding: '80px 0' }}>
      <div className="u-container">
        <div className="coverage-section-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 60, alignItems: 'center',
        }}>
          <div>
            <div className="u-eyebrow" style={{ marginBottom: 16 }}>{T2('home.coverage.eyebrow')}</div>
            <h2 className="h-display h-section" style={{
              fontSize: 48, color: 'var(--blue)', margin: '0 0 16px',
              textTransform: 'uppercase', lineHeight: 1.05,
            }}>
              {T2('home.coverage.title1')}<br />{T2('home.coverage.title2')}<br />
              <span style={{ color: 'var(--gold-deep)' }}>{T2('home.coverage.title3')}</span>
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 8 }}>
              {T2('home.coverage.body2')}
            </p>
            <p style={{ fontSize: 13, color: 'var(--gold-deep)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.05em', lineHeight: 1.6, marginBottom: 24 }}>
              {T2('home.coverage.smallChurch')}
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 28 }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 12, height: 12, borderRadius: 3, background: 'var(--gold)' }} />
                <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{T2('home.coverage.legendNow')}</span>
              </div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 12, height: 12, borderRadius: 3, background: 'var(--blue)' }} />
                <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{T2('home.coverage.legendCovered')}</span>
              </div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 12, height: 12, borderRadius: 3, background: 'var(--beige-2)', border: '1.5px solid var(--blue)' }} />
                <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{T2('home.coverage.legendOpen')}</span>
              </div>
            </div>
            <button className="btn btn-primary" style={{ marginBottom: 12 }} onClick={() => document.getElementById('register-form')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>
              {T2('home.coverage.cta')}
            </button>
            <p style={{ fontSize: 12, color: 'var(--ink-soft)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              {T2('home.coverage.noSize')}
            </p>
          </div>
          <div>
            {/* Desktop clock */}
            <div className="coverage-clock-desktop" style={{
              background: 'var(--cream)', border: '2px solid var(--ink)',
              borderRadius: 20, padding: 28,
              boxShadow: '10px 10px 0 var(--ink)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
                <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--gold-deep)', textTransform: 'uppercase' }}>
                  {T2('home.coverage.today')}
                </div>
                <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--blue)' }}>
                  {T2('home.coverage.hoursCovered')}
                </div>
              </div>
              <div className="coverage-grid">
                {hours.map((_, h) => {
                  const isNow = h === currentHour;
                  const covered = isCovered(h);
                  const bg = isNow ? 'var(--gold)' : covered ? 'var(--blue)' : 'var(--beige-2)';
                  const border = covered || isNow ? 'none' : '1.5px solid var(--blue)';
                  const color = covered ? 'var(--gold-soft)' : 'var(--blue)';
                  return (
                    <div key={h} style={{
                      aspectRatio: '1',
                      background: bg,
                      border,
                      borderRadius: 6,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'var(--ff-mono)', fontSize: 11,
                      color,
                      fontWeight: isNow ? 700 : 500,
                      position: 'relative',
                    }}>
                      {String(h).padStart(2, '0')}
                      {isNow && <span className="pulse-soft" style={{
                        position: 'absolute', top: -3, right: -3, width: 8, height: 8,
                        borderRadius: '50%', background: '#21c55d',
                      }} />}
                    </div>
                  );
                })}
              </div>
              <div style={{
                marginTop: 20, padding: 14,
                background: 'var(--beige-2)', borderRadius: 10,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <div>
                  <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--gold-deep)', textTransform: 'uppercase' }}>
                    {T2('home.coverage.prayingNow')} · {String(currentHour).padStart(2, '0')}:00
                  </div>
                  <div style={{ fontFamily: 'var(--ff-display)', fontSize: 18, color: 'var(--blue)', marginTop: 4, letterSpacing: '0.02em' }}>
                    {coverageFor(currentHour)[0]}
                  </div>
                </div>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%',
                  background: 'var(--grad-gold)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: '2px solid var(--blue)',
                }}>
                  <span style={{ color: 'var(--blue)', fontSize: 18 }}>✦</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
};

/* ─── CLAIM HOUR MODAL ─── */
const ClaimHourModal = ({ onClose }) => {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', church: '', timeSlot: '', website: '' });
  const [loading, setLoading] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const [err, setErr] = React.useState('');
  const hours = Array.from({ length: 24 }, (_, i) => ({
    value: i,
    label: `${String(i).padStart(2,'0')}:00 – ${String(i+1).padStart(2,'0')}:00`,
  }));
  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErr('');
    try {
      const res = await fetch('/api/claim-hour', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, timeSlot: parseInt(form.timeSlot) }),
      });
      if (!res.ok) { setErr('Something went wrong. Please try again.'); setLoading(false); return; }
    } catch (_) { setErr('Something went wrong. Please try again.'); setLoading(false); return; }
    setLoading(false);
    setDone(true);
  };
  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'rgba(6,28,58,0.85)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20,
    }} onClick={onClose}>
      <div style={{
        background: 'var(--cream)', borderRadius: 20, padding: 36,
        border: '3px solid var(--gold)', boxShadow: '12px 12px 0 var(--blue)',
        width: '100%', maxWidth: 480,
      }} onClick={e => e.stopPropagation()}>
        {done ? (
          <div style={{ textAlign: 'center', padding: '20px 0' }}>
            <div style={{ fontSize: 48, marginBottom: 12 }}>✦</div>
            <h3 className="h-display" style={{ fontSize: 26, color: 'var(--blue)', margin: '0 0 8px', textTransform: 'uppercase' }}>Hour Claimed!</h3>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', margin: '0 0 24px' }}>Thank you for standing in the gap for Sacramento.</p>
            <button className="btn btn-primary" onClick={onClose}>Close</button>
          </div>
        ) : (
          <form onSubmit={submit}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
              <h3 className="h-display" style={{ fontSize: 22, color: 'var(--blue)', margin: 0, textTransform: 'uppercase' }}>Claim a Prayer Hour</h3>
              <button type="button" onClick={onClose} style={{ fontSize: 22, color: 'var(--ink-soft)', lineHeight: 1 }}>✕</button>
            </div>
            {[
              { label: 'Your Name *', key: 'name', type: 'text', required: true },
              { label: 'Email', key: 'email', type: 'email' },
              { label: 'Phone', key: 'phone', type: 'tel' },
              { label: 'Church / Organization', key: 'church', type: 'text' },
            ].map(({ label, key, type, required }) => (
              <div key={key} style={{ marginBottom: 14 }}>
                <label style={{ display: 'block', fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 6 }}>{label}</label>
                <input type={type} required={!!required} value={form[key]}
                  onChange={e => setForm({ ...form, [key]: e.target.value })}
                  style={{ width: '100%', padding: 12, fontFamily: 'var(--ff-body)', fontSize: 14, background: 'white', color: 'var(--ink)', border: '1.5px solid rgba(11,45,92,0.25)', borderRadius: 10 }} />
              </div>
            ))}
            <div style={{ marginBottom: 20 }}>
              <label style={{ display: 'block', fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 6 }}>Prayer Hour *</label>
              <select required value={form.timeSlot} onChange={e => setForm({ ...form, timeSlot: e.target.value })}
                style={{ width: '100%', padding: 12, fontFamily: 'var(--ff-body)', fontSize: 14, background: 'white', color: 'var(--ink)', border: '1.5px solid rgba(11,45,92,0.25)', borderRadius: 10 }}>
                <option value="">Select an hour…</option>
                {hours.map(h => <option key={h.value} value={h.value}>{h.label}</option>)}
              </select>
            </div>
            <input type="text" name="website" value={form.website} onChange={e => setForm({ ...form, website: e.target.value })} style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
            {err && <p style={{ color: '#c0392b', fontSize: 13, marginBottom: 12 }}>{err}</p>}
            <button type="submit" className="btn btn-primary" disabled={loading} style={{ width: '100%', justifyContent: 'center', opacity: loading ? 0.7 : 1 }}>
              {loading ? 'Saving…' : 'Claim This Hour ✦'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
};

/* ─── SCRIPTURE MARQUEE (scrolling, like v1) ─── */
const ScriptureMarqueeV2 = () => {
  useLangV2();
  const verses = [
    T2('marquee.v1'),
    T2('marquee.v2'),
    T2('marquee.v3'),
    T2('marquee.v4'),
    T2('marquee.v5'),
  ];
  const stream = [...verses, ...verses];
  return (
    <div style={{
      background: 'var(--grad-gold)',
      borderTop: '3px solid var(--ink)',
      borderBottom: '3px solid var(--ink)',
      padding: '22px 0',
      overflow: 'hidden',
    }}>
      <div style={{
        display: 'inline-flex', gap: 60, whiteSpace: 'nowrap',
        animation: 'ticker 70s linear infinite',
        fontFamily: 'var(--ff-display)',
        fontSize: 22, color: 'var(--blue)',
        letterSpacing: '0.03em', fontWeight: 600,
      }}>
        {stream.map((v, i) => <span key={i}>✦ {v}</span>)}
      </div>
    </div>
  );
};

/* ─── PILLARS: bold manifesto-style ─── */
const MissionV2 = () => {
  useLangV2();
  const cards = [
    { key: 'vision', icon: <svg viewBox="0 0 60 60" width={36}><circle cx="30" cy="30" r="26" fill="none" stroke="currentColor" strokeWidth="3" /><circle cx="30" cy="30" r="8" fill="currentColor" /></svg> },
    { key: 'call', icon: <svg viewBox="0 0 60 60" width={36}><path d="M10 50 V20 L30 6 L50 20 V50 Z" fill="none" stroke="currentColor" strokeWidth="3" /><path d="M25 50 V34 h10 V50" fill="none" stroke="currentColor" strokeWidth="3" /></svg> },
    { key: 'idea', icon: <svg viewBox="0 0 60 60" width={36}><circle cx="30" cy="24" r="14" fill="none" stroke="currentColor" strokeWidth="3" /><path d="M24 38 v8 h12 v-8" fill="none" stroke="currentColor" strokeWidth="3" /><line x1="30" y1="14" x2="30" y2="24" stroke="currentColor" strokeWidth="3" /></svg> },
    { key: 'commitment', icon: <svg viewBox="0 0 60 60" width={36}><path d="M30 8 L6 24 V52 h48 V24 Z" fill="none" stroke="currentColor" strokeWidth="3" /><path d="M22 52 V36 h16 V52" fill="none" stroke="currentColor" strokeWidth="3" /><path d="M26 8 h8 v12 h-8 z" fill="currentColor" /></svg> },
  ];

  return (
    <section style={{ background: 'var(--cream)', padding: '80px 0' }}>
      <div className="u-container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="u-eyebrow" style={{ marginBottom: 12 }}>
            <span style={{ color: 'var(--gold-deep)' }}>{T2('home.mission.eyebrow')}</span>
          </div>
          <h2 className="h-display h-section" style={{
            fontSize: 'clamp(32px, 5vw, 48px)', color: 'var(--blue)', margin: 0,
            textTransform: 'uppercase', lineHeight: 1.1,
          }}>
            {T2('home.mission.title')}
          </h2>
        </div>
        <div className="mission-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {cards.map(c => (
            <div key={c.key} className="retro-card" style={{ padding: 32, position: 'relative' }}>
              <div style={{ color: 'var(--gold-deep)', marginBottom: 16 }}>{c.icon}</div>
              <h3 className="h-display" style={{
                fontSize: 24, margin: '0 0 12px', color: 'var(--blue)',
                textTransform: 'uppercase', letterSpacing: '0.03em',
              }}>
                {T2('home.mission.' + c.key + '.word')}
              </h3>
              <p style={{ fontSize: 15, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.7 }}>
                {T2('home.mission.' + c.key + '.body')}
              </p>
              {T2('home.mission.' + c.key + '.why') !== 'home.mission.' + c.key + '.why' && (
                <p style={{ fontSize: 14, color: 'var(--gold-deep)', margin: '10px 0 0', lineHeight: 1.6, fontStyle: 'italic' }}>
                  {T2('home.mission.' + c.key + '.why')}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─── VISION: tighter copy ─── */
const VisionV2 = () => {
  useLangV2();
  return (
    <section className="section section-dark grain" style={{ padding: '90px 0' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.18, overflow: 'hidden' }}>
        <img
          src={IMG.capitolBuilding}
          alt=""
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', filter: 'sepia(0.5) saturate(0.5)' }}
        />
      </div>
      <div className="u-container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="vision-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <div className="u-eyebrow" style={{ marginBottom: 20, color: 'var(--gold-soft)' }}>{T2('home.vision.eyebrow')}</div>
            <h2 className="h-display h-section" style={{
              fontSize: 'clamp(36px, 5vw, 60px)', color: 'var(--gold)', margin: '0 0 24px',
              textTransform: 'uppercase', lineHeight: 1.05,
            }}>
              {T2('home.vision.title1')}<br />{T2('home.vision.title2')}
            </h2>
            <p className="h-elegant" style={{ fontSize: 22, color: 'var(--gold-soft)', margin: '0 0 20px', lineHeight: 1.5 }}>
              {T2('home.vision.lede')}
            </p>
            <p style={{ fontSize: 15, color: 'rgba(251,247,240,0.8)', margin: '0 0 16px', lineHeight: 1.7, maxWidth: 480 }}>
              {T2('home.vision.body')}
            </p>
            <p style={{ fontSize: 15, color: 'var(--gold-soft)', margin: '0 0 32px', lineHeight: 1.7, maxWidth: 480, fontStyle: 'italic' }}>
              {T2('home.vision.why')}
            </p>
            <button className="btn btn-on-dark" onClick={() => document.getElementById('register-form')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>{T2('home.vision.cta')}</button>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{
              border: '3px solid var(--gold)',
              borderRadius: 16,
              padding: 12,
              background: 'rgba(11,45,92,0.5)',
              transform: 'rotate(-2deg)',
              boxShadow: '12px 12px 0 var(--gold-deep)',
            }}>
              <Img
                src={IMG.capitol}
                alt="California State Capitol"
                label={T2('home.vision.imgLabel')}
                ratio="4/5"
                style={{ borderRadius: 8 }}
              />
            </div>
            <div className="vision-badge" style={{
              position: 'absolute', bottom: -24, right: -24,
              background: 'var(--gold)',
              color: 'var(--blue)',
              padding: '16px 22px',
              borderRadius: 14,
              border: '3px solid var(--blue)',
              transform: 'rotate(4deg)',
              boxShadow: '6px 6px 0 var(--blue-deep)',
              maxWidth: 200,
            }}>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em', marginBottom: 4 }}>
                {T2('home.vision.badge.since')}
              </div>
              <div className="h-display" style={{ fontSize: 18, lineHeight: 1.1 }}>
                {T2('home.vision.badge.text')}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─── PRAYER WALL: live from Supabase ─── */
const PrayerWallV2 = () => {
  useLangV2();
  const fallbackWalls = [
    { from: T2('home.wall.req1.from'), req: T2('home.wall.req1.body') },
    { from: T2('home.wall.req2.from'), req: T2('home.wall.req2.body') },
    { from: T2('home.wall.req3.from'), req: T2('home.wall.req3.body') },
  ];
  const [walls, setWalls] = React.useState(fallbackWalls);
  React.useEffect(() => {
    fetch('/api/prayer-wall')
      .then(r => r.json())
      .then(({ requests }) => {
        if (requests && requests.length > 0) {
          setWalls(requests.slice(0, 3).map(r => ({ from: r.from, req: r.req })));
        }
      })
      .catch(() => {});
  }, []);
  const tilts = ['-1.5deg', '1deg', '-0.5deg'];
  return (
    <section style={{ background: 'var(--beige)', padding: '80px 0' }}>
      <div className="u-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="u-eyebrow" style={{ marginBottom: 12 }}>{T2('home.wall.eyebrow')}</div>
            <h2 className="h-display h-section" style={{ fontSize: 44, color: 'var(--blue)', margin: 0, textTransform: 'uppercase' }}>
              {T2('home.wall.title')}
            </h2>
          </div>
          <button className="btn btn-ghost">{T2('home.wall.seeAll')}</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {walls.map((w, i) => (
            <div key={i} style={{
              background: i % 2 === 0 ? 'var(--beige-2)' : 'var(--cream)',
              border: '2px solid var(--ink)',
              borderRadius: 14,
              padding: 28,
              transform: `rotate(${tilts[i]})`,
              boxShadow: '5px 5px 0 var(--gold-deep)',
            }}>
              <svg viewBox="0 0 24 24" width={22} style={{ color: 'var(--gold-deep)', marginBottom: 12 }}>
                <path d="M6 17V7l-2 2v10H6zM10 17V7l-2 2v10h2zM18 17V7l-2 2v10h2zM22 17V7l-2 2v10h2z" fill="currentColor" />
              </svg>
              <p className="h-elegant" style={{ fontSize: 17, color: 'var(--ink)', margin: '0 0 18px', lineHeight: 1.5 }}>
                {w.req}
              </p>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--gold-deep)', textTransform: 'uppercase' }}>
                — {w.from}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ─── PRAYER FORM: trimmed copy ─── */
const PrayerFormV2 = () => {
  useLangV2();
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', type: 'Personal', request: '', website: '' });
  const [formErr, setFormErr] = React.useState('');
  const typeOptions = [
    { id: 'Personal', label: T2('home.form.type.personal') },
    { id: 'Family', label: T2('home.form.type.family') },
    { id: 'Church', label: T2('home.form.type.church') },
    { id: 'City', label: T2('home.form.type.city') },
    { id: 'Praise', label: T2('home.form.type.praise') },
  ];
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setFormErr('');
    try {
      const res = await fetch('/api/prayer-request', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) { setFormErr('Something went wrong. Please try again.'); setLoading(false); return; }
    } catch (_) { setFormErr('Something went wrong. Please try again.'); setLoading(false); return; }
    setLoading(false);
    setSubmitted(true);
  };
  return (
    <section id="prayer-form-anchor" className="section section-dark grain" style={{ padding: '90px 0' }}>
      <div className="u-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 60, alignItems: 'start' }}>
          <div>
            <div className="u-eyebrow" style={{ marginBottom: 16, color: 'var(--gold-soft)' }}>{T2('home.form.eyebrow')}</div>
            <h2 className="h-display h-section" style={{
              fontSize: 48, color: 'var(--gold)', margin: '0 0 20px',
              textTransform: 'uppercase', lineHeight: 1.05,
            }}>
              {T2('home.form.title1')}<br />{T2('home.form.title2')}
            </h2>
            <p style={{ fontSize: 15, color: 'rgba(251,247,240,0.8)', lineHeight: 1.7, margin: '0 0 20px', maxWidth: 400 }}>
              Every request is prayed over within 24 hours. Nothing is too small. You can stay anonymous.
            </p>
          </div>
          <form
            onSubmit={handleSubmit}
            style={{
              background: 'var(--cream)',
              color: 'var(--ink)',
              padding: 36,
              borderRadius: 18,
              border: '3px solid var(--gold)',
              boxShadow: '12px 12px 0 rgba(242,183,5,0.3)',
            }}
          >
            {submitted ? (
              <div style={{ textAlign: 'center', padding: '36px 0' }}>
                <div style={{
                  width: 72, height: 72, borderRadius: '50%',
                  background: 'var(--grad-gold)',
                  margin: '0 auto 20px',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: '3px solid var(--blue)',
                }}>
                  <svg viewBox="0 0 24 24" width={32}><path d="M5 12l5 5L20 7" fill="none" stroke="#0B2D5C" strokeWidth="3" /></svg>
                </div>
                <h3 className="h-display" style={{ fontSize: 28, color: 'var(--blue)', margin: '0 0 8px', textTransform: 'uppercase' }}>
                  {T2('home.form.success.title')}
                </h3>
                <p className="h-elegant" style={{ fontSize: 16, color: 'var(--ink-soft)', margin: 0 }}>
                  {T2('home.form.success.body')}
                </p>
                <button
                  type="button"
                  className="btn btn-ghost"
                  onClick={() => { setSubmitted(false); setForm({ name: '', email: '', type: 'Personal', request: '' }); }}
                  style={{ marginTop: 20 }}
                >
                  {T2('home.form.success.again')}
                </button>
              </div>
            ) : (
              <>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                  <div>
                    <label style={{
                      display: 'block', fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em',
                      textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8,
                    }}>{T2('home.form.nameLabel')}</label>
                    <input type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})}
                      placeholder={T2('home.form.namePlaceholder')}
                      style={{
                        width: '100%', padding: 12, fontFamily: 'var(--ff-body)', fontSize: 14,
                        background: 'white', color: 'var(--ink)',
                        border: '1.5px solid rgba(11,45,92,0.3)', borderRadius: 10,
                      }} />
                  </div>
                  <div>
                    <label style={{
                      display: 'block', fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em',
                      textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8,
                    }}>{T2('home.form.emailLabel')}</label>
                    <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})}
                      placeholder={T2('home.form.emailPlaceholder')}
                      style={{
                        width: '100%', padding: 12, fontFamily: 'var(--ff-body)', fontSize: 14,
                        background: 'white', color: 'var(--ink)',
                        border: '1.5px solid rgba(11,45,92,0.3)', borderRadius: 10,
                      }} />
                  </div>
                </div>
                <div style={{ marginBottom: 14 }}>
                  <label style={{
                    display: 'block', fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8,
                  }}>{T2('home.form.typeLabel')}</label>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {typeOptions.map(opt => (
                      <button type="button" key={opt.id} onClick={() => setForm({...form, type: opt.id})}
                        style={{
                          padding: '10px 16px',
                          fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.15em',
                          textTransform: 'uppercase', fontWeight: 500,
                          borderRadius: 999,
                          background: form.type === opt.id ? 'var(--blue)' : 'transparent',
                          color: form.type === opt.id ? 'var(--gold)' : 'var(--blue)',
                          border: `1.5px solid ${form.type === opt.id ? 'var(--blue)' : 'rgba(11,45,92,0.3)'}`,
                        }}>{opt.label}</button>
                    ))}
                  </div>
                </div>
                <div style={{ marginBottom: 20 }}>
                  <label style={{
                    display: 'block', fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em',
                    textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8,
                  }}>{T2('home.form.requestLabel')}</label>
                  <textarea value={form.request} onChange={e => setForm({...form, request: e.target.value})}
                    placeholder={T2('home.form.requestPlaceholder')} rows={4} required
                    style={{
                      width: '100%', padding: 12, fontFamily: 'var(--ff-body)', fontSize: 14,
                      color: 'var(--ink)', background: 'white',
                      border: '1.5px solid rgba(11,45,92,0.3)', borderRadius: 10, resize: 'vertical',
                    }} />
                </div>
                <input type="text" name="website" value={form.website} onChange={e => setForm({...form, website: e.target.value})} style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
                {formErr && <p style={{ color: '#c0392b', fontSize: 13, marginBottom: 12 }}>{formErr}</p>}
                <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <button type="submit" className="btn btn-primary" disabled={loading} style={{ opacity: loading ? 0.7 : 1 }}>
                    {loading ? 'Sending…' : T2('home.form.submit')}
                  </button>
                  <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-soft)', textTransform: 'uppercase' }}>
                    {T2('home.form.confidential')}
                  </span>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

/* ─── PRAYER POINTS: current shared focuses ─── */
const PrayerPointsV2 = () => {
  useLangV2();
  const points = [
    { num: '01', title: T2('points.1.title'), body: T2('points.1.body'), ref: T2('points.1.ref') },
    { num: '02', title: T2('points.2.title'), body: T2('points.2.body'), ref: T2('points.2.ref') },
    { num: '03', title: T2('points.3.title'), body: T2('points.3.body'), ref: T2('points.3.ref') },
    { num: '04', title: T2('points.4.title'), body: T2('points.4.body'), ref: T2('points.4.ref') },
    { num: '05', title: T2('points.5.title'), body: T2('points.5.body'), ref: T2('points.5.ref') },
    { num: '06', title: T2('points.6.title'), body: T2('points.6.body'), ref: T2('points.6.ref') },
  ];
  const mountains = ['gov', 'mil', 'media', 'biz', 'edu', 'church', 'family'];
  return (
    <section style={{ background: 'var(--beige-2)', padding: '80px 0' }}>
      <div className="u-container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="u-eyebrow" style={{ marginBottom: 12 }}>{T2('points.eyebrow')}</div>
          <h2 className="h-display h-section" style={{ fontSize: 'clamp(32px, 5vw, 48px)', color: 'var(--blue)', margin: '0 0 16px', textTransform: 'uppercase' }}>
            {T2('points.title')}
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-soft)', maxWidth: 600, margin: '0 auto', lineHeight: 1.7 }}>
            {T2('points.sub')}
          </p>
        </div>
        <div className="prayer-points-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {points.map(p => (
            <div key={p.num} style={{
              background: 'var(--cream)', border: '2px solid var(--ink)',
              borderRadius: 14, padding: 24,
              boxShadow: '5px 5px 0 var(--gold-deep)',
              display: 'flex', gap: 16, alignItems: 'flex-start',
            }}>
              <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.2em',
                color: 'var(--gold-deep)', flexShrink: 0, paddingTop: 3,
              }}>{p.num}</div>
              <div>
                <h3 className="h-display" style={{ fontSize: 18, color: 'var(--blue)', margin: '0 0 6px', textTransform: 'uppercase', letterSpacing: '0.03em' }}>
                  {p.title}
                </h3>
                <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: '0 0 8px', lineHeight: 1.7 }}>{p.body}</p>
                <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--gold-deep)' }}>{p.ref}</div>
              </div>
            </div>
          ))}
        </div>
        {/* 7th prayer point: 7 Mountains of Influence — spans full width */}
        <div style={{
          marginTop: 20, background: 'var(--cream)', border: '2px solid var(--ink)',
          borderRadius: 14, padding: 32,
          boxShadow: '5px 5px 0 var(--gold-deep)',
        }}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', marginBottom: 20 }}>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.2em',
              color: 'var(--gold-deep)', flexShrink: 0, paddingTop: 3,
            }}>07</div>
            <div>
              <h3 className="h-display" style={{ fontSize: 18, color: 'var(--blue)', margin: '0 0 6px', textTransform: 'uppercase', letterSpacing: '0.03em' }}>
                {T2('points.7.title')}
              </h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: '0 0 8px', lineHeight: 1.7 }}>{T2('points.7.body')}</p>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--gold-deep)' }}>{T2('points.7.ref')}</div>
            </div>
          </div>
          <div className="mountains-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10, paddingLeft: 32 }}>
            {mountains.map(m => (
              <div key={m} style={{
                padding: '10px 14px', borderRadius: 8,
                background: 'var(--beige)', border: '1px solid rgba(11,45,92,0.12)',
                fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5,
              }}>
                {T2('points.7.' + m)}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ─── CHURCH REGISTRATION FORM (inline on homepage) ─── */
const REG_NEIGHBORHOODS = [
  'Antelope', 'Arden-Arcade', 'Auburn', 'Cameron Park', 'Carmichael',
  'Citrus Heights', 'Clarksburg', 'Colfax', 'Cool', 'Courtland',
  'Davis', 'Dixon', 'Downtown Sacramento', 'East Sacramento', 'El Dorado Hills',
  'Elk Grove', 'Elverta', 'Esparto', 'Fair Oaks', 'Florin',
  'Folsom', 'Foothill Farms', 'Foresthill', 'Franklin', 'Fruitridge',
  'Galt', 'Georgetown', 'Gold River', 'Granite Bay', 'Grass Valley',
  'Greenback', 'Herald', 'Highlands', 'Hood', 'Isleton',
  'La Riviera', 'Laguna', 'Land Park', 'Lincoln', 'Live Oak',
  'Loomis', 'Marysville', 'McClellan Park', 'Meadowview', 'Midtown Sacramento',
  'Natomas', 'Nevada City', 'Newcastle', 'North Highlands', 'North Sacramento',
  'Oak Park', 'Olivehurst', 'Orangevale', 'Penryn', 'Pilot Hill',
  'Placerville', 'Pocket', 'Rancho Cordova', 'Rancho Murieta', 'Rio Linda',
  'Rio Vista', 'Robla', 'Rocklin', 'Rosemont', 'Roseville',
  'Sacramento (Central)', 'Shingle Springs', 'South Lake Tahoe', 'South Sacramento',
  'Suisun City', 'Sutter Creek', 'Tahoe City', 'Truckee', 'Vacaville',
  'Vineyard', 'Walnut Grove', 'West Sacramento', 'Wheatland', 'Wilton',
  'Winters', 'Woodland', 'Yuba City / Plumas Lake', 'Other',
];
const REG_SIZES = ['Under 50', '50–200', '200+'];

const CustomSelect = ({ value, onChange, placeholder, options, style }) => {
  const [open, setOpen] = React.useState(false);
  const [search, setSearch] = React.useState('');
  const ref = React.useRef(null);
  const searchRef = React.useRef(null);
  React.useEffect(() => {
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);
  React.useEffect(() => {
    if (open && searchRef.current) searchRef.current.focus();
    if (!open) setSearch('');
  }, [open]);
  const filtered = search
    ? options.filter(opt => opt.toLowerCase().includes(search.toLowerCase()))
    : options;
  return (
    <div ref={ref} style={{ position: 'relative', ...style }}>
      <button type="button" onClick={() => setOpen(!open)} style={{
        width: '100%', padding: 14, fontFamily: 'var(--ff-body)', fontSize: 15,
        color: value ? 'var(--ink)' : 'rgba(11,45,92,0.45)', background: 'white',
        border: open ? '1.5px solid var(--gold)' : '1.5px solid rgba(11,45,92,0.25)',
        borderRadius: 10, textAlign: 'left', cursor: 'pointer',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        transition: 'border-color 0.2s',
      }}>
        <span>{value || placeholder}</span>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', flexShrink: 0 }}>
          <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 4, zIndex: 20,
          background: 'white', border: '1.5px solid rgba(11,45,92,0.15)',
          borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
          maxHeight: 260, display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ padding: '8px 10px', borderBottom: '1px solid rgba(11,45,92,0.1)', flexShrink: 0 }}>
            <input ref={searchRef} type="text" value={search} onChange={e => setSearch(e.target.value)}
              placeholder="Search…" autoComplete="off"
              style={{
                width: '100%', padding: '8px 10px', fontFamily: 'var(--ff-body)', fontSize: 13,
                border: '1px solid rgba(11,45,92,0.15)', borderRadius: 6, outline: 'none',
                color: 'var(--ink)', background: 'var(--beige)',
              }} />
          </div>
          <div style={{ overflowY: 'auto', flex: 1 }}>
            {filtered.length === 0 && (
              <div style={{ padding: '14px', fontSize: 13, color: 'var(--ink-soft)', textAlign: 'center' }}>No results</div>
            )}
            {filtered.map(opt => (
              <button key={opt} type="button" onClick={() => { onChange(opt); setOpen(false); }} style={{
                width: '100%', padding: '11px 14px', textAlign: 'left',
                fontFamily: 'var(--ff-body)', fontSize: 14, color: 'var(--ink)',
                background: value === opt ? 'rgba(242,183,5,0.12)' : 'transparent',
                fontWeight: value === opt ? 600 : 400,
                borderBottom: '1px solid rgba(11,45,92,0.06)',
                cursor: 'pointer',
              }}
                onMouseEnter={e => { if (value !== opt) e.currentTarget.style.background = 'rgba(11,45,92,0.04)'; }}
                onMouseLeave={e => { if (value !== opt) e.currentTarget.style.background = 'transparent'; }}
              >
                {opt}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const ChurchRegisterSection = () => {
  useLangV2();
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    contactName: '', phone: '', email: '',
    churchName: '', neighborhood: '', churchSize: '',
    preferredDay: 0, cycleTrack: '',
    hasIntercessor: null,
    intercessorName: '', intercessorPhone: '', intercessorEmail: '',
    website: '',
  });
  const [loading, setLoading] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [claimedDays, setClaimedDays] = React.useState({ A: {}, B: {} });
  const [cycleIndex, setCycleIndex] = React.useState(() => Math.random() < 0.5 ? 0 : 1);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  React.useEffect(() => {
    fetch('/api/claimed-days')
      .then(r => r.json())
      .then(({ A, B }) => { setClaimedDays({ A: A || {}, B: B || {} }); })
      .catch(() => {});
  }, []);

  const canAdvance = step === 1
    ? form.contactName.trim() && form.phone.trim()
    : step === 2
    ? form.churchName.trim() && form.neighborhood && form.churchSize
    : true;

  const submit = async () => {
    setLoading(true);
    setErr('');
    const payload = {
      contactName: form.contactName, phone: form.phone, email: form.email,
      churchName: form.churchName, neighborhood: form.neighborhood, churchSize: form.churchSize,
      preferredDay: form.preferredDay,
      cycleTrack: form.cycleTrack || 'A',
      hasIntercessor: form.hasIntercessor === true,
      intercessorName: form.intercessorName, intercessorPhone: form.intercessorPhone, intercessorEmail: form.intercessorEmail,
      website: form.website,
    };
    try {
      const res = await fetch('/api/register-church', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        setErr(data.error || 'Something went wrong. Please try again.');
        setLoading(false);
        return;
      }
    } catch (_) { setErr('Something went wrong. Please try again.'); setLoading(false); return; }
    setLoading(false);
    setStep(4);
  };

  const inputStyle = {
    width: '100%', padding: 14, fontFamily: 'var(--ff-body)', fontSize: 15,
    color: 'var(--ink)', background: 'white',
    border: '1.5px solid rgba(11,45,92,0.25)', borderRadius: 10,
  };
  const labelStyle = {
    display: 'block', fontFamily: 'var(--ff-mono)', fontSize: 10,
    letterSpacing: '0.2em', textTransform: 'uppercase',
    color: 'var(--gold-deep)', marginBottom: 8,
  };
  const pillRow = { display: 'flex', gap: 8, flexWrap: 'wrap' };
  const pill = (active) => ({
    padding: '10px 16px', fontFamily: 'var(--ff-mono)', fontSize: 11,
    letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
    borderRadius: 999,
    background: active ? 'var(--blue)' : 'transparent',
    color: active ? 'var(--gold)' : 'var(--blue)',
    border: `1.5px solid ${active ? 'var(--blue)' : 'rgba(11,45,92,0.3)'}`,
    cursor: 'pointer',
  });
  return (
    <section id="register-form" style={{ background: 'var(--beige)', padding: '72px 0 80px' }}>
      <div className="u-container" style={{ maxWidth: 560 }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <div className="u-eyebrow">{T2('reg.eyebrow')}</div>
          <h2 className="h-display" style={{ fontSize: 34, color: 'var(--blue)', textTransform: 'uppercase', margin: '8px 0 12px' }}>
            {T2('reg.title')}
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 440, margin: '0 auto' }}>
            {T2('reg.sub')}
          </p>
        </div>

        {step < 4 && (
          <div style={{ display: 'flex', gap: 8, marginBottom: 28 }}>
            {[1, 2, 3].map(s => (
              <div key={s} style={{
                flex: 1, height: 4, borderRadius: 2,
                background: step >= s ? 'var(--gold)' : 'rgba(11,45,92,0.15)',
                transition: 'background 0.3s',
              }} />
            ))}
          </div>
        )}

        <div className="retro-card" style={{ padding: 36 }}>
          {step === 1 && (
            <>
              <div style={{ marginBottom: 24 }}>
                <h3 className="h-display" style={{ fontSize: 22, color: 'var(--blue)', margin: 0, textTransform: 'uppercase' }}>
                  {T2('reg.step1')}
                </h3>
              </div>
              <div style={{ marginBottom: 18 }}>
                <label style={labelStyle}>{T2('reg.name')} *</label>
                <input type="text" name="contactName" autoComplete="name" value={form.contactName} onChange={e => set('contactName', e.target.value)}
                  placeholder={T2('reg.namePh')} style={inputStyle} required />
              </div>
              <div style={{ marginBottom: 18 }}>
                <label style={labelStyle}>{T2('reg.phone')} *</label>
                <input type="tel" name="phone" autoComplete="tel" value={form.phone} onChange={e => set('phone', e.target.value)}
                  placeholder={T2('reg.phonePh')} style={inputStyle} required />
              </div>
              <div style={{ marginBottom: 24 }}>
                <label style={labelStyle}>{T2('reg.email')}</label>
                <input type="email" name="email" autoComplete="email" value={form.email} onChange={e => set('email', e.target.value)}
                  placeholder={T2('reg.emailPh')} style={inputStyle} />
              </div>
              <input type="text" name="website" value={form.website} onChange={e => set('website', e.target.value)} style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
              <div style={{
                display: 'flex', alignItems: 'flex-start', gap: 10, padding: '14px 16px',
                background: 'rgba(11,45,92,0.04)', borderRadius: 10, marginBottom: 18,
              }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, marginTop: 2 }}>
                  <rect x="1" y="4" width="14" height="11" rx="2" stroke="var(--blue)" strokeWidth="1.5" fill="none"/>
                  <path d="M5 4V2.5A3 3 0 0 1 11 2.5V4" stroke="var(--blue)" strokeWidth="1.5" strokeLinecap="round"/>
                </svg>
                <span style={{ fontFamily: 'var(--ff-body)', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                  {T2('reg.privacy')}
                </span>
              </div>
              <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}
                disabled={!canAdvance} onClick={() => setStep(2)}>
                Next →
              </button>
            </>
          )}

          {step === 2 && (
            <>
              <div style={{ marginBottom: 24 }}>
                <h3 className="h-display" style={{ fontSize: 22, color: 'var(--blue)', margin: 0, textTransform: 'uppercase' }}>
                  {T2('reg.step2')}
                </h3>
              </div>
              <div style={{ marginBottom: 18 }}>
                <label style={labelStyle}>{T2('reg.churchName')} *</label>
                <input type="text" name="churchName" autoComplete="organization" value={form.churchName} onChange={e => set('churchName', e.target.value)}
                  placeholder={T2('reg.churchPh')} style={inputStyle} required />
              </div>
              <div style={{ marginBottom: 18 }}>
                <label style={labelStyle}>{T2('reg.neighborhood')} *</label>
                <CustomSelect
                  value={form.neighborhood}
                  onChange={v => set('neighborhood', v)}
                  placeholder={T2('reg.neighborhoodPh')}
                  options={REG_NEIGHBORHOODS}
                />
              </div>
              <div style={{ marginBottom: 24 }}>
                <label style={labelStyle}>{T2('reg.size')} *</label>
                <div style={pillRow}>
                  {REG_SIZES.map(s => (
                    <button key={s} type="button" onClick={() => set('churchSize', s)} style={pill(form.churchSize === s)}>{s}</button>
                  ))}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <button className="btn btn-ghost" onClick={() => setStep(1)}>← Back</button>
                <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}
                  disabled={!canAdvance} onClick={() => setStep(3)}>
                  Next →
                </button>
              </div>
            </>
          )}

          {step === 3 && (() => {
            const mIdx = cycleIndex % 12;
            const yr = 2027 + Math.floor(cycleIndex / 12);
            const track = mIdx % 2 === 0 ? 'A' : 'B';
            const trackData = claimedDays[track] || {};
            const getDayStatus = (d) => {
              const info = trackData[d];
              return info ? 'taken' : 'available';
            };
            const totalClaimed = Object.keys(claimedDays.A || {}).length + Object.keys(claimedDays.B || {}).length;
            const totalSpots = 61;
            const spotsLeft = totalSpots - totalClaimed;
            const firstDow = new Date(yr, mIdx, 1).getDay();
            const dim = new Date(yr, mIdx + 1, 0).getDate();
            const lang = (window.__getLang && window.__getLang()) || 'en';
            const mLabel = new Date(yr, mIdx, 1).toLocaleDateString(lang === 'es' ? 'es-US' : 'en-US', { month: 'long', year: 'numeric' });
            const dh = lang === 'es' ? ['D','L','M','X','J','V','S'] : ['S','M','T','W','T','F','S'];
            const cells = [];
            for (let i = 0; i < firstDow; i++) cells.push(null);
            for (let d = 1; d <= dim; d++) cells.push(d);
            return (
            <>
              <div style={{ marginBottom: 24 }}>
                <h3 className="h-display" style={{ fontSize: 22, color: 'var(--blue)', margin: 0, textTransform: 'uppercase' }}>
                  {T2('reg.step3')}
                </h3>
              </div>
              <div style={{ marginBottom: 18 }}>
                <label style={labelStyle}>{T2('reg.preferredDay')}</label>
                <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, margin: '0 0 12px' }}>
                  {T2('reg.preferredDayNote')}
                </p>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  background: spotsLeft > 20 ? 'rgba(6,28,58,0.06)' : 'rgba(242,183,5,0.12)',
                  borderRadius: 8, padding: '8px 14px', marginBottom: 14,
                }}>
                  <span style={{ fontFamily: 'var(--ff-display)', fontSize: 20, fontWeight: 700, color: 'var(--blue)', lineHeight: 1 }}>
                    {spotsLeft}
                  </span>
                  <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-soft)', textTransform: 'uppercase' }}>
                    {lang === 'es' ? `de ${totalSpots} lugares disponibles` : `of ${totalSpots} spots available`}
                  </span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                  <button type="button" onClick={() => setCycleIndex(i => Math.max(0, i - 1))}
                    disabled={cycleIndex === 0}
                    style={{ background: 'none', border: 'none', fontSize: 22, cursor: cycleIndex === 0 ? 'default' : 'pointer', color: 'var(--blue)', opacity: cycleIndex === 0 ? 0.25 : 1, padding: '2px 10px', fontWeight: 700, lineHeight: 1 }}>
                    ‹
                  </button>
                  <span style={{ fontFamily: 'var(--ff-display)', fontSize: 15, fontWeight: 600, color: 'var(--blue)', textTransform: 'capitalize' }}>
                    {mLabel}
                  </span>
                  <button type="button" onClick={() => setCycleIndex(i => i + 1)}
                    style={{ background: 'none', border: 'none', fontSize: 22, cursor: 'pointer', color: 'var(--blue)', padding: '2px 10px', fontWeight: 700, lineHeight: 1 }}>
                    ›
                  </button>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, marginBottom: 4 }}>
                  {dh.map((h, i) => (
                    <div key={i} style={{ textAlign: 'center', fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: '0.1em', padding: '4px 0' }}>
                      {h}
                    </div>
                  ))}
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
                  {cells.map((d, i) => {
                    if (d === null) return <div key={'e' + i} />;
                    const selected = form.preferredDay === d && form.cycleTrack === track;
                    const isTaken = getDayStatus(d) === 'taken';
                    const bg = selected ? 'var(--blue)' : isTaken ? 'rgba(11,45,92,0.08)' : 'transparent';
                    const color = selected ? 'var(--gold)' : isTaken ? 'rgba(11,45,92,0.35)' : 'var(--ink)';
                    return (
                      <button key={d} type="button" disabled={isTaken}
                        onClick={() => { if (!isTaken) { set('preferredDay', d); set('cycleTrack', track); } }}
                        style={{
                          aspectRatio: '1', borderRadius: 8,
                          background: bg, color: color,
                          border: selected ? 'none' : '1px solid rgba(11,45,92,0.15)',
                          fontFamily: 'var(--ff-display)', fontSize: 15,
                          fontWeight: selected ? 700 : 500,
                          cursor: isTaken ? 'not-allowed' : 'pointer', padding: 0,
                          opacity: isTaken ? 0.5 : 1,
                        }}>
                        {d}
                      </button>
                    );
                  })}
                </div>
                <div style={{
                  display: 'flex', gap: 16, marginTop: 12, flexWrap: 'wrap',
                  fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.12em',
                  color: 'var(--ink-soft)', textTransform: 'uppercase',
                }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, border: '1px solid rgba(11,45,92,0.15)', background: 'transparent' }} />
                    {T2('reg.dayAvailable')}
                  </span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 2, background: 'rgba(11,45,92,0.08)', opacity: 0.5 }} />
                    {T2('reg.dayTaken')}
                  </span>
                </div>
                {form.preferredDay > 0 && form.preferredDay < 4 && form.cycleTrack === 'A' && (
                  <p style={{ fontSize: 12, color: 'var(--gold-deep)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.05em', lineHeight: 1.5, marginTop: 8 }}>
                    {T2('reg.earlyDayNote')}
                  </p>
                )}
                {form.preferredDay === 31 && form.cycleTrack === 'A' && (
                  <p style={{ fontSize: 12, color: 'var(--gold-deep)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.05em', lineHeight: 1.5, marginTop: 8 }}>
                    {T2('reg.edgeA31')}
                  </p>
                )}
                {form.preferredDay === 31 && form.cycleTrack === 'B' && (
                  <p style={{ fontSize: 12, color: 'var(--gold-deep)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.05em', lineHeight: 1.5, marginTop: 8 }}>
                    {T2('reg.edgeB31')}
                  </p>
                )}
                {form.preferredDay >= 29 && form.preferredDay <= 30 && form.cycleTrack === 'B' && (
                  <p style={{ fontSize: 12, color: 'var(--gold-deep)', fontFamily: 'var(--ff-mono)', letterSpacing: '0.05em', lineHeight: 1.5, marginTop: 8 }}>
                    {T2('reg.edgeBFeb')}
                  </p>
                )}
                {form.preferredDay === 0 && (
                  <p style={{ fontSize: 12, color: 'var(--ink-soft)', fontStyle: 'italic', lineHeight: 1.5, marginTop: 10 }}>
                    {T2('reg.skipDay')}
                  </p>
                )}
              </div>
              <div style={{ marginBottom: 18, borderTop: '1px dashed rgba(11,45,92,0.15)', paddingTop: 18 }}>
                <label style={labelStyle}>{T2('reg.intercessorTitle')}</label>
                <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, margin: '0 0 12px' }}>
                  {T2('reg.intercessorQuestion')}
                </p>
                <div style={pillRow}>
                  <button type="button" onClick={() => set('hasIntercessor', true)}
                    style={pill(form.hasIntercessor === true)}>{T2('reg.intercessorYes')}</button>
                  <button type="button" onClick={() => {
                    set('hasIntercessor', false);
                    set('intercessorName', '');
                    set('intercessorPhone', '');
                    set('intercessorEmail', '');
                  }} style={pill(form.hasIntercessor === false)}>{T2('reg.intercessorNo')}</button>
                </div>
                {form.hasIntercessor === false && (
                  <p style={{ fontSize: 12, color: 'var(--ink-soft)', fontStyle: 'italic', marginTop: 8 }}>
                    {T2('reg.intercessorNote')}
                  </p>
                )}
              </div>
              {form.hasIntercessor === true && (
                <>
                  <div style={{ marginBottom: 18 }}>
                    <label style={labelStyle}>{T2('reg.intercessorName')}</label>
                    <input type="text" name="intercessorName" autoComplete="off" value={form.intercessorName} onChange={e => set('intercessorName', e.target.value)}
                      placeholder={T2('reg.intercessorNamePh')} style={inputStyle} />
                  </div>
                  <div style={{ marginBottom: 18 }}>
                    <label style={labelStyle}>{T2('reg.intercessorPhone')}</label>
                    <input type="tel" name="intercessorPhone" autoComplete="off" value={form.intercessorPhone} onChange={e => set('intercessorPhone', e.target.value)}
                      placeholder={T2('reg.intercessorPhonePh')} style={inputStyle} />
                  </div>
                  <div style={{ marginBottom: 24 }}>
                    <label style={labelStyle}>{T2('reg.intercessorEmail')}</label>
                    <input type="email" name="intercessorEmail" autoComplete="off" value={form.intercessorEmail} onChange={e => set('intercessorEmail', e.target.value)}
                      placeholder={T2('reg.intercessorEmailPh')} style={inputStyle} />
                  </div>
                </>
              )}
              {err && <p style={{ color: '#c0392b', fontSize: 13, marginBottom: 12 }}>{err}</p>}
              <div style={{ display: 'flex', gap: 12 }}>
                <button className="btn btn-ghost" onClick={() => setStep(2)}>← Back</button>
                <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}
                  disabled={!canAdvance || loading} onClick={submit}>
                  {loading ? 'Sending…' : T2('reg.submit')}
                </button>
              </div>
            </>
            );
          })()}

          {step === 4 && (() => {
            const hasDates = form.preferredDay > 0;
            const trackMonths = form.cycleTrack === 'B' ? [1, 3, 5, 7, 9, 11] : [0, 2, 4, 6, 8, 10];
            const lang = (window.__getLang && window.__getLang()) || 'en';
            const locale = lang === 'es' ? 'es-US' : 'en-US';
            const dates = hasDates ? trackMonths.map(m => {
              const dim = new Date(2027, m + 1, 0).getDate();
              const day = Math.min(form.preferredDay, dim);
              return new Date(2027, m, day).toLocaleDateString(locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
            }) : [];
            return (
            <div style={{ textAlign: 'center', padding: '24px 0' }}>
              <div style={{ fontSize: 48, marginBottom: 16 }}>✦</div>
              <h3 className="h-display" style={{ fontSize: 28, color: 'var(--blue)', margin: '0 0 12px', textTransform: 'uppercase' }}>
                {T2('reg.done.title')}
              </h3>
              <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.7, margin: '0 0 24px', maxWidth: 400, marginLeft: 'auto', marginRight: 'auto' }}>
                {T2('reg.done.body')}
              </p>
              {hasDates ? (
                <>
                  <div style={{
                    background: 'var(--beige)', border: '2px solid var(--blue)', borderRadius: 14,
                    padding: '20px 24px', maxWidth: 340, margin: '0 auto 16px',
                    textAlign: 'left',
                  }}>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--gold-deep)', textTransform: 'uppercase', marginBottom: 12 }}>
                      {T2('reg.done.dates')}
                    </div>
                    {dates.map((d, i) => (
                      <div key={i} style={{
                        padding: '8px 0',
                        borderBottom: i < dates.length - 1 ? '1px solid rgba(11,45,92,0.1)' : 'none',
                        fontFamily: 'var(--ff-display)', fontSize: 15, color: 'var(--blue)',
                        textTransform: 'capitalize',
                      }}>
                        {d}
                      </div>
                    ))}
                  </div>
                  <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--gold-deep)', textTransform: 'uppercase' }}>
                    {T2('reg.done.screenshot')}
                  </p>
                </>
              ) : null}
            </div>
            );
          })()}
        </div>
      </div>
    </section>
  );
};

/* ─── COMPOSE: V2 homepage ─── */
const HomePageV2 = ({ onNavigate }) => (
  <>
    <HomeHeroV2 onNavigate={onNavigate} />
    <ScriptureMarqueeV2 />
    <CoverageClockV2 onNavigate={onNavigate} />
    <ChurchRegisterSection />
    <MissionV2 />
    <VisionV2 />
    <PrayerPointsV2 />
  </>
);

window.HomePageV2 = HomePageV2;
window.PrayerWallV2 = PrayerWallV2;
window.PrayerFormV2 = PrayerFormV2;