// pages/Home.jsx

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

const HomeHero = ({ onNavigate }) => {
  useLangHome();
  return (
  <section style={{
    position: 'relative',
    background: 'var(--beige)',
    padding: 'clamp(50px, 8vw, 100px) 0 clamp(60px, 10vw, 120px)',
    overflow: 'hidden',
  }} className="grain hero-section-pad">
    <div style={{
      position: 'absolute', top: -180, left: -180, width: 600, height: 600, opacity: 0.08,
      background: 'radial-gradient(circle, var(--gold) 0%, transparent 60%)',
    }} />
    <div style={{
      position: 'absolute', bottom: -200, right: -100, width: 500, height: 500, opacity: 0.08,
      background: 'radial-gradient(circle, var(--gold) 0%, transparent 60%)',
    }} />

    <div className="u-container hero-grid" style={{
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'clamp(30px, 5vw, 80px)', alignItems: 'center',
      position: 'relative', zIndex: 2,
    }}>
      <div>
        <div className="u-eyebrow" style={{ marginBottom: 24 }}>
          {T('home.hero.eyebrow')}
        </div>
        <h1 className="h-display h-hero" style={{
          fontSize: 'clamp(36px, 7vw, 88px)',
          color: 'var(--blue)',
          margin: '0 0 12px',
          textTransform: 'uppercase',
        }}>
          {T('home.hero.title1')}<br />
          <span style={{ color: 'var(--gold-deep)' }}>{T('home.hero.title2')}</span><br />
          {T('home.hero.title3')}
        </h1>
        <p className="h-elegant hero-sub" style={{
          fontSize: 24, color: 'var(--ink-soft)', margin: '24px 0 32px',
          maxWidth: 520, lineHeight: 1.4,
        }}>
          {T('home.hero.sub')}
        </p>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 40 }}>
          <button className="btn btn-primary" onClick={() => onNavigate('calendar')}>
            {T('home.hero.ctaJoin')}
          </button>
          <button className="btn btn-ghost" onClick={() => onNavigate('prayer-request')}>
            {T('home.hero.ctaSubmit')}
          </button>
        </div>
        <div className="hero-stats hero-stats-desktop" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          borderTop: '1px solid rgba(11,45,92,0.2)',
          borderBottom: '1px solid rgba(11,45,92,0.2)',
          padding: '20px 0',
        }}>
          {[
            { big: '168', small: T('home.hero.statHours') },
            { big: '47', small: T('home.hero.statChurches') },
            { big: '312', small: T('home.hero.statIntercessors') },
          ].map((s, i) => (
            <div key={i} className="hero-stat" style={{
              textAlign: 'center',
              borderRight: i < 2 ? '1px solid rgba(11,45,92,0.2)' : 'none',
              padding: '0 10px',
            }}>
              <div className="h-display hero-stat-big" style={{ fontSize: 44, color: 'var(--blue)', lineHeight: 1 }}>{s.big}</div>
              <div className="hero-stat-small" style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--gold-deep)', textTransform: 'uppercase', marginTop: 8 }}>{s.small}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="hero-logo-wrap" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
        <div className="hero-logo-glow" style={{
          position: 'absolute', width: 560, height: 560, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,215,90,0.3) 0%, rgba(242,183,5,0.06) 55%, transparent 75%)',
          filter: 'blur(24px)',
          maxWidth: '120%',
        }} />
        <div className="hero-logo-inner" style={{ position: 'relative', zIndex: 2, width: '100%', maxWidth: 440, aspectRatio: '1 / 1' }}>
          <SunburstLogo size="100%" />
        </div>
      </div>
    </div>

    {/* Mobile-only compact stats band — follows the seal so the hero feels complete without bloating it */}
    <div className="u-container hero-stats-mobile" style={{
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 0,
      borderTop: '1px solid rgba(11,45,92,0.2)',
      borderBottom: '1px solid rgba(11,45,92,0.2)',
      padding: '14px 0',
      marginTop: 24,
      position: 'relative',
      zIndex: 2,
    }}>
      {[
        { big: '168', small: T('home.hero.statHours') },
        { big: '47', small: T('home.hero.statChurches') },
        { big: '312', small: T('home.hero.statIntercessors') },
      ].map((s, i) => (
        <div key={i} style={{
          textAlign: 'center',
          borderRight: i < 2 ? '1px solid rgba(11,45,92,0.2)' : 'none',
          padding: '0 6px',
        }}>
          <div className="h-display" style={{ fontSize: 28, color: 'var(--blue)', lineHeight: 1 }}>{s.big}</div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.12em', color: 'var(--gold-deep)', textTransform: 'uppercase', marginTop: 6 }}>{s.small}</div>
        </div>
      ))}
    </div>
  </section>
  );
};

const PillarsSection = () => {
  useLangHome();
  const pillars = [
    {
      word: T('home.pillars.pray.word'),
      scripture: '1 Thess. 5:17',
      body: T('home.pillars.pray.body'),
      icon: (
        <svg viewBox="0 0 60 80" width={40}><path d="M26 8 h8 v20 h16 v8 h-16 v36 h-8 v-36 h-16 v-8 h16 z" fill="currentColor" /></svg>
      ),
    },
    {
      word: T('home.pillars.unite.word'),
      scripture: 'John 17:21',
      body: T('home.pillars.unite.body'),
      icon: (
        <svg viewBox="0 0 80 80" width={44} fill="none" stroke="currentColor" strokeWidth="4">
          <circle cx="28" cy="40" r="18" /><circle cx="52" cy="40" r="18" />
        </svg>
      ),
    },
    {
      word: T('home.pillars.serve.word'),
      scripture: 'Matt. 5:14',
      body: T('home.pillars.serve.body'),
      icon: (
        <svg viewBox="0 0 80 80" width={42} fill="none" stroke="currentColor" strokeWidth="4">
          <path d="M10 50 Q40 10 70 50" />
          <path d="M26 50 Q40 30 54 50" />
          <circle cx="40" cy="60" r="4" fill="currentColor" />
        </svg>
      ),
    },
  ];
  return (
    <section className="section" style={{ background: 'var(--beige)' }}>
      <div className="u-container">
        <div style={{ textAlign: 'center', marginBottom: 60 }}>
          <div className="u-eyebrow" style={{ justifyContent: 'center', marginBottom: 16 }}>
            <span style={{ color: 'var(--gold-deep)' }}>{T('home.pillars.eyebrow')}</span>
          </div>
          <h2 className="h-display h-section" style={{ fontSize: 56, color: 'var(--blue)', margin: 0, textTransform: 'uppercase' }}>
            {T('home.pillars.title')}
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {pillars.map(p => (
            <div key={p.word} className="retro-card" style={{ padding: 40, position: 'relative' }}>
              <div style={{ color: 'var(--gold-deep)', marginBottom: 20 }}>{p.icon}</div>
              <h3 className="h-display h-section" style={{
                fontSize: 40, margin: '0 0 6px', color: 'var(--blue)',
                letterSpacing: '0.04em',
              }}>
                {p.word}
              </h3>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--gold-deep)', textTransform: 'uppercase', marginBottom: 18 }}>
                {p.scripture}
              </div>
              <p style={{ fontSize: 15, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.7 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const VisionSection = () => {
  useLangHome();
  return (
  <section className="section section-dark grain" style={{ padding: '140px 0' }}>
    <div style={{ position: 'absolute', inset: 0, opacity: 0.14, overflow: 'hidden' }}>
      <img
        src={IMG.capitolBuilding}
        alt=""
        style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', filter: 'sepia(0.4) saturate(0.6)' }}
      />
    </div>
    <div className="u-container" style={{ position: 'relative', zIndex: 2 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div className="u-eyebrow" style={{ marginBottom: 24, color: 'var(--gold-soft)' }}>{T('home.vision.eyebrow')}</div>
          <h2 className="h-display h-section" style={{
            fontSize: 64, color: 'var(--gold)', margin: '0 0 32px',
            textTransform: 'uppercase', lineHeight: 1.05,
          }}>
            {T('home.vision.title1')}<br />{T('home.vision.title2')}
          </h2>
          <p className="h-elegant" style={{ fontSize: 24, color: 'var(--gold-soft)', margin: '0 0 24px', lineHeight: 1.5 }}>
            {T('home.vision.lede')}
          </p>
          <p style={{ fontSize: 16, color: 'rgba(251,247,240,0.85)', margin: '0 0 40px', lineHeight: 1.7, maxWidth: 520 }}>
            {T('home.vision.body')}
          </p>
          <button className="btn btn-on-dark">{T('home.vision.cta')}</button>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{
            border: '3px solid var(--gold)',
            borderRadius: 16,
            padding: 14,
            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={T('home.vision.imgLabel')}
              ratio="4/5"
              style={{ borderRadius: 8 }}
            />
          </div>
          <div className="vision-badge" style={{
            position: 'absolute', bottom: -30, right: -30,
            background: 'var(--gold)',
            color: 'var(--blue)',
            padding: '18px 24px',
            borderRadius: 16,
            border: '3px solid var(--blue)',
            transform: 'rotate(4deg)',
            boxShadow: '6px 6px 0 var(--blue-deep)',
            maxWidth: 220,
          }}>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em', marginBottom: 4 }}>
              {T('home.vision.badge.since')}
            </div>
            <div className="h-display" style={{ fontSize: 20, lineHeight: 1.1 }}>
              {T('home.vision.badge.text')}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  );
};

const CoverageClockSection = () => {
  useLangHome();
  const hours = Array.from({ length: 24 });
  const [now] = React.useState(new Date());
  const currentHour = now.getHours();
  const 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 coverageFor = (h) => {
    const seed = (h * 7) % churches.length;
    return [churches[seed], churches[(seed + 3) % churches.length]];
  };

  return (
    <section className="section grain" style={{ background: 'var(--beige)' }}>
      <div className="u-container">
        <div className="coverage-section-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="u-eyebrow" style={{ marginBottom: 20 }}>{T('home.coverage.eyebrow')}</div>
            <h2 className="h-display h-section" style={{
              fontSize: 56, color: 'var(--blue)', margin: '0 0 20px',
              textTransform: 'uppercase', lineHeight: 1.05,
            }}>
              {T('home.coverage.title1')}<br />{T('home.coverage.title2')}<br />
              <span style={{ color: 'var(--gold-deep)' }}>{T('home.coverage.title3')}</span>
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 28 }}>
              {T('home.coverage.body')}
            </p>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 10 }}>
              <div style={{ width: 14, height: 14, borderRadius: 3, background: 'var(--gold)' }} />
              <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{T('home.coverage.legendNow')}</span>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 10 }}>
              <div style={{ width: 14, height: 14, borderRadius: 3, background: 'var(--blue)' }} />
              <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{T('home.coverage.legendCovered')}</span>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 30 }}>
              <div style={{ width: 14, height: 14, borderRadius: 3, background: 'var(--beige-2)', border: '1.5px solid var(--blue)' }} />
              <span style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{T('home.coverage.legendOpen')}</span>
            </div>
            <button className="btn btn-primary">{T('home.coverage.cta')}</button>
          </div>
          <div>
            {/* Desktop / tablet: 24-square grid */}
            <div className="coverage-clock-desktop" style={{
              background: 'var(--cream)', border: '2px solid var(--ink)',
              borderRadius: 20, padding: 32,
              boxShadow: '10px 10px 0 var(--ink)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
                <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--gold-deep)', textTransform: 'uppercase' }}>
                  {T('home.coverage.today')}
                </div>
                <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--blue)' }}>
                  {T('home.coverage.hoursCovered')}
                </div>
              </div>
              <div className="coverage-grid">
                {hours.map((_, h) => {
                  const isNow = h === currentHour;
                  const covered = h !== 3 && h !== 14;
                  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: 24, padding: 16,
                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' }}>
                    {T('home.coverage.prayingNow')} · {String(currentHour).padStart(2, '0')}:00
                  </div>
                  <div style={{ fontFamily: 'var(--ff-display)', fontSize: 20, color: 'var(--blue)', marginTop: 4, letterSpacing: '0.02em' }}>
                    {coverageFor(currentHour)[0]}
                  </div>
                </div>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: 'var(--grad-gold)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: '2px solid var(--blue)',
                }}>
                  <span style={{ color: 'var(--blue)', fontSize: 20 }}>✦</span>
                </div>
              </div>
            </div>

            {/* Mobile: vertical "live timeline" of upcoming prayer hours */}
            <MobileCoverageTimeline currentHour={currentHour} churches={churches} coverageFor={coverageFor} />
          </div>
        </div>
      </div>
    </section>
  );
};

// Mobile-native coverage view: shows NOW + next 5 hours as a vertical timeline,
// then a compact 24-hour day strip at the bottom for context.
const MobileCoverageTimeline = ({ currentHour, churches, coverageFor }) => {
  useLangHome();
  const formatHour = (h) => {
    const hr12 = h % 12 === 0 ? 12 : h % 12;
    const ampm = h < 12 ? 'AM' : 'PM';
    return `${hr12}:00 ${ampm}`;
  };
  // Build 6 cards: NOW, +1, +2, +3, +4, +5
  const upcoming = Array.from({ length: 6 }, (_, i) => (currentHour + i) % 24);
  // Status: 03 and 14 are "open" (matches desktop demo)
  const isOpen = (h) => h === 3 || h === 14;

  return (
    <div className="coverage-clock-mobile">
      {/* Header strip */}
      <div style={{
        background: 'var(--blue)', color: 'var(--cream)',
        borderRadius: '14px 14px 0 0',
        padding: '16px 20px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.2em', color: 'var(--gold-soft)', textTransform: 'uppercase', marginBottom: 2 }}>
            {T('home.coverage.today')}
          </div>
          <div style={{ fontFamily: 'var(--ff-display)', fontSize: 14, color: 'var(--gold)', letterSpacing: '0.04em' }}>
            {T('home.coverage.hoursCovered')}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="pulse-soft" style={{
            width: 8, height: 8, borderRadius: '50%', background: '#21c55d',
            boxShadow: '0 0 8px #21c55d',
          }} />
          <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--cream)', textTransform: 'uppercase' }}>
            Live
          </span>
        </div>
      </div>

      {/* Vertical timeline */}
      <div style={{
        background: 'var(--cream)',
        border: '2px solid var(--ink)',
        borderTop: 'none',
        borderRadius: '0 0 14px 14px',
        padding: '8px 0 0',
        boxShadow: '6px 6px 0 var(--ink)',
        overflow: 'hidden',
      }}>
        {upcoming.map((h, idx) => {
          const isNow = idx === 0;
          const open = isOpen(h);
          const church = coverageFor(h)[0];
          const label = isNow ? T('home.coverage.prayingNow')
                        : idx === 1 ? 'Up next'
                        : `In ${idx}h`;

          return (
            <div key={idx} style={{
              display: 'flex', alignItems: 'stretch',
              borderTop: idx === 0 ? 'none' : '1px solid rgba(11,45,92,0.08)',
              background: isNow ? 'var(--grad-gold)' : 'transparent',
              padding: isNow ? '18px 20px' : '14px 20px',
              position: 'relative',
            }}>
              {/* Time block */}
              <div style={{
                width: 64, flexShrink: 0,
                display: 'flex', flexDirection: 'column', justifyContent: 'center',
              }}>
                <div style={{
                  fontFamily: 'var(--ff-display)',
                  fontSize: isNow ? 22 : 16,
                  fontWeight: 700,
                  color: isNow ? 'var(--blue)' : 'var(--ink)',
                  letterSpacing: '0.02em',
                  lineHeight: 1,
                }}>
                  {formatHour(h)}
                </div>
                <div style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 8.5,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: isNow ? 'var(--blue)' : 'var(--ink-soft)',
                  marginTop: 4, opacity: isNow ? 1 : 0.65,
                }}>
                  {label}
                </div>
              </div>

              {/* Vertical connector dot */}
              <div style={{
                width: 24, flexShrink: 0,
                display: 'flex', justifyContent: 'center', alignItems: 'center',
                position: 'relative',
              }}>
                <div style={{
                  width: isNow ? 14 : 8, height: isNow ? 14 : 8,
                  borderRadius: '50%',
                  background: open ? 'var(--cream)' : isNow ? 'var(--blue)' : 'var(--blue)',
                  border: open ? '2px solid var(--blue)' : isNow ? '3px solid var(--cream)' : 'none',
                  boxShadow: isNow ? '0 0 0 3px var(--gold)' : 'none',
                  zIndex: 1,
                }} />
                {idx < upcoming.length - 1 && (
                  <div style={{
                    position: 'absolute', top: '50%', bottom: -14,
                    width: 1.5, background: 'rgba(11,45,92,0.15)',
                  }} />
                )}
              </div>

              {/* Church / status */}
              <div style={{ flex: 1, minWidth: 0, paddingLeft: 14, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                {open ? (
                  <>
                    <div style={{
                      fontFamily: 'var(--ff-display)',
                      fontSize: isNow ? 18 : 15,
                      color: 'var(--blue)', fontStyle: 'italic',
                      letterSpacing: '0.01em',
                    }}>
                      Open hour
                    </div>
                    <div style={{
                      fontFamily: 'var(--ff-mono)', fontSize: 10,
                      letterSpacing: '0.12em', color: 'var(--gold-deep)',
                      textTransform: 'uppercase', marginTop: 3,
                    }}>
                      Tap to claim →
                    </div>
                  </>
                ) : (
                  <>
                    <div style={{
                      fontFamily: 'var(--ff-display)',
                      fontSize: isNow ? 18 : 15,
                      color: isNow ? 'var(--blue)' : 'var(--ink)',
                      letterSpacing: '0.01em',
                      lineHeight: 1.15,
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }}>
                      {church}
                    </div>
                    <div style={{
                      fontFamily: 'var(--ff-mono)', fontSize: 10,
                      letterSpacing: '0.12em',
                      color: isNow ? 'var(--blue)' : 'var(--ink-soft)',
                      textTransform: 'uppercase', marginTop: 3,
                      opacity: isNow ? 0.9 : 0.7,
                    }}>
                      {isNow ? '✦ Interceding now' : 'Covered'}
                    </div>
                  </>
                )}
              </div>
            </div>
          );
        })}

        {/* Day-glance strip */}
        <div style={{
          padding: '14px 18px 16px',
          borderTop: '1px solid rgba(11,45,92,0.1)',
          background: 'var(--beige-2)',
        }}>
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 9,
            letterSpacing: '0.18em', color: 'var(--ink-soft)',
            textTransform: 'uppercase', marginBottom: 8,
          }}>
            24-hour view
          </div>
          <div style={{ display: 'flex', gap: 2 }}>
            {Array.from({ length: 24 }, (_, h) => {
              const isNow = h === currentHour;
              const open = isOpen(h);
              return (
                <div key={h} style={{
                  flex: 1, height: 22,
                  background: isNow ? 'var(--gold)' : open ? 'transparent' : 'var(--blue)',
                  border: open ? '1.2px solid var(--blue)' : 'none',
                  borderRadius: 2,
                  position: 'relative',
                }}>
                  {isNow && <span style={{
                    position: 'absolute', top: -4, left: '50%', transform: 'translateX(-50%)',
                    width: 4, height: 4, borderRadius: '50%', background: '#21c55d',
                  }} />}
                </div>
              );
            })}
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            fontFamily: 'var(--ff-mono)', fontSize: 9,
            color: 'var(--ink-soft)', marginTop: 6, letterSpacing: '0.1em',
          }}>
            <span>12 AM</span>
            <span>NOON</span>
            <span>12 AM</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const PrayerWallSection = () => {
  useLangHome();
  const walls = [
    { from: T('home.wall.req1.from'), req: T('home.wall.req1.body') },
    { from: T('home.wall.req2.from'), req: T('home.wall.req2.body') },
    { from: T('home.wall.req3.from'), req: T('home.wall.req3.body') },
    { from: T('home.wall.req4.from'), req: T('home.wall.req4.body') },
    { from: T('home.wall.req5.from'), req: T('home.wall.req5.body') },
    { from: T('home.wall.req6.from'), req: T('home.wall.req6.body') },
  ];
  return (
    <section className="section" style={{ background: 'var(--cream)' }}>
      <div className="u-container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 50, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div className="u-eyebrow" style={{ marginBottom: 16 }}>{T('home.wall.eyebrow')}</div>
            <h2 className="h-display h-section" style={{ fontSize: 48, color: 'var(--blue)', margin: 0, textTransform: 'uppercase' }}>
              {T('home.wall.title')}
            </h2>
          </div>
          <button className="btn btn-ghost">{T('home.wall.seeAll')}</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {walls.map((w, i) => {
            const tilts = ['-1.2deg', '0.8deg', '-0.4deg', '1deg', '-0.6deg', '0.4deg'];
            return (
              <div key={i} style={{
                background: i % 2 === 0 ? 'var(--beige-2)' : 'var(--beige)',
                border: '2px solid var(--ink)',
                borderRadius: 14,
                padding: 28,
                transform: `rotate(${tilts[i]})`,
                boxShadow: '5px 5px 0 var(--gold-deep)',
                position: 'relative',
              }}>
                <svg viewBox="0 0 24 24" width={24} 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: 18, color: 'var(--ink)', margin: '0 0 20px', 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>
  );
};

const PrayerFormSection = () => {
  useLangHome();
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', type: 'Personal', request: '' });
  const typeOptions = [
    { id: 'Personal', label: T('home.form.type.personal') },
    { id: 'Family', label: T('home.form.type.family') },
    { id: 'Church', label: T('home.form.type.church') },
    { id: 'City', label: T('home.form.type.city') },
    { id: 'Praise', label: T('home.form.type.praise') },
  ];
  return (
    <section className="section section-dark grain" style={{ padding: '120px 0' }}>
      <div className="u-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="u-eyebrow" style={{ marginBottom: 20, color: 'var(--gold-soft)' }}>{T('home.form.eyebrow')}</div>
            <h2 className="h-display h-section" style={{
              fontSize: 56, color: 'var(--gold)', margin: '0 0 24px',
              textTransform: 'uppercase', lineHeight: 1.05,
            }}>
              {T('home.form.title1')}<br />{T('home.form.title2')}
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(251,247,240,0.85)', lineHeight: 1.7, marginBottom: 24, maxWidth: 420 }}>
              {T('home.form.body')}
            </p>
            <div style={{
              padding: 20,
              border: '1px solid rgba(242,183,5,0.3)',
              borderRadius: 12,
              background: 'rgba(255,215,90,0.05)',
              maxWidth: 420,
            }}>
              <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--gold)', textTransform: 'uppercase', marginBottom: 8 }}>
                {T('home.form.pastors.label')}
              </div>
              <p style={{ margin: 0, fontSize: 14, color: 'var(--gold-soft)', lineHeight: 1.6 }}>
                {T('home.form.pastors.body')}
              </p>
            </div>
          </div>
          <form
            onSubmit={e => { e.preventDefault(); setSubmitted(true); }}
            style={{
              background: 'var(--cream)',
              color: 'var(--ink)',
              padding: 40,
              borderRadius: 18,
              border: '3px solid var(--gold)',
              boxShadow: '12px 12px 0 rgba(242,183,5,0.3)',
            }}
          >
            {submitted ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <div style={{
                  width: 80, height: 80, borderRadius: '50%',
                  background: 'var(--grad-gold)',
                  margin: '0 auto 24px',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: '3px solid var(--blue)',
                }}>
                  <svg viewBox="0 0 24 24" width={36}><path d="M5 12l5 5L20 7" fill="none" stroke="#0B2D5C" strokeWidth="3" /></svg>
                </div>
                <h3 className="h-display" style={{ fontSize: 32, color: 'var(--blue)', margin: '0 0 8px', textTransform: 'uppercase' }}>
                  {T('home.form.success.title')}
                </h3>
                <p className="h-elegant" style={{ fontSize: 18, color: 'var(--ink-soft)', margin: 0 }}>
                  {T('home.form.success.body')}
                </p>
                <button
                  type="button"
                  className="btn btn-ghost"
                  onClick={() => { setSubmitted(false); setForm({ name: '', email: '', type: 'Personal', request: '' }); }}
                  style={{ marginTop: 24 }}
                >
                  {T('home.form.success.again')}
                </button>
              </div>
            ) : (
              <>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
                  <Field label={T('home.form.nameLabel')} value={form.name} onChange={v => setForm({ ...form, name: v })} placeholder={T('home.form.namePlaceholder')} />
                  <Field label={T('home.form.emailLabel')} value={form.email} onChange={v => setForm({ ...form, email: v })} placeholder={T('home.form.emailPlaceholder')} type="email" />
                </div>
                <div style={{ marginBottom: 16 }}>
                  <FieldLabel>{T('home.form.typeLabel')}</FieldLabel>
                  <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 18px',
                          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)'}`,
                          cursor: 'pointer',
                        }}
                      >
                        {opt.label}
                      </button>
                    ))}
                  </div>
                </div>
                <div style={{ marginBottom: 24 }}>
                  <FieldLabel>{T('home.form.requestLabel')}</FieldLabel>
                  <textarea
                    value={form.request}
                    onChange={e => setForm({ ...form, request: e.target.value })}
                    placeholder={T('home.form.requestPlaceholder')}
                    rows={5}
                    required
                    style={{
                      width: '100%', padding: 14,
                      fontFamily: 'var(--ff-body)', fontSize: 15,
                      color: 'var(--ink)', background: 'white',
                      border: '1.5px solid rgba(11,45,92,0.3)',
                      borderRadius: 10, resize: 'vertical',
                    }}
                  />
                </div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <button type="submit" className="btn btn-primary">{T('home.form.submit')}</button>
                  <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-soft)', textTransform: 'uppercase' }}>
                    {T('home.form.confidential')}
                  </span>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

const FieldLabel = ({ children }) => (
  <label style={{
    display: 'block',
    fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.2em',
    textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 8,
  }}>{children}</label>
);

const Field = ({ label, value, onChange, placeholder, type = 'text' }) => (
  <div>
    <FieldLabel>{label}</FieldLabel>
    <input
      type={type}
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      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>
);

const ScriptureMarquee = () => {
  useLangHome();
  const verses = [
    T('marquee.v1'),
    T('marquee.v2'),
    T('marquee.v3'),
    T('marquee.v4'),
    T('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>
  );
};

const HomePage = ({ onNavigate }) => (
  <>
    <HomeHero onNavigate={onNavigate} />
    <ScriptureMarquee />
    <PillarsSection />
    <VisionSection />
    <CoverageClockSection />
    <PrayerWallSection />
    <PrayerFormSection />
  </>
);

window.HomePage = HomePage;