/* global React, GSID, Khanda, Navigation, Footer */
/* Khanda, Navigation, and Footer are defined in shared.jsx and exposed as
 * globals via window.* so this file can reference them as bare identifiers. */
const { useState, useEffect, useRef, useMemo } = React;

// ── Icons ──
const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 5l7 7-7 7"/>
  </svg>
);

const ArrowUpRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 17L17 7M9 7h8v8"/>
  </svg>
);

// ── Hero ──
function Hero({ heroStyle }) {
  const clock = useClock();
  const live = useLiveStatus();
  if (heroStyle === 'quote') return <HeroQuote clock={clock} live={live} />;
  if (heroStyle === 'photo') return <HeroPhoto clock={clock} live={live} />;
  return <HeroLockup clock={clock} live={live} />;
}

function useClock() {
  const [t, setT] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return t;
}

// Polls /api/live-status (60 s on the server, 30 s on the client) so the
// hero flips to the embedded stream as soon as the channel goes live.
// Override for QA: ?testLive=<videoId> forces live state with that video,
// so we can preview the stream layout without going live on YouTube.
//
// YouTube video IDs are exactly 11 chars from [A-Za-z0-9_-]. Anything
// else is rejected so the URL parameter cannot smuggle path traversal
// (`/../evil.com`) or extra query parameters into the iframe src.
const YT_ID_RE = /^[A-Za-z0-9_-]{11}$/;
function useLiveStatus() {
  const [s, setS] = useState({ isLive: false, videoId: null, title: null });
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    const test = params.get('testLive');
    if (test) {
      if (YT_ID_RE.test(test)) {
        setS({ isLive: true, videoId: test, title: 'Live · Test stream' });
      }
      return;
    }
    let cancelled = false;
    const tick = async () => {
      try {
        const r = await fetch('/api/live-status', { cache: 'no-store' });
        if (!r.ok) return;
        const data = await r.json();
        if (cancelled || !data || typeof data.isLive !== 'boolean') return;
        // Trust nothing from the wire either — even though /api/live-status
        // is ours, defence in depth: validate videoId before setting state
        // so a misbehaving cache or hijacked response can't drive the
        // iframe src.
        const safeId = typeof data.videoId === 'string' && YT_ID_RE.test(data.videoId) ? data.videoId : null;
        setS({
          isLive: !!(data.isLive && safeId),
          videoId: safeId,
          title: typeof data.title === 'string' ? data.title.slice(0, 200) : null,
        });
      } catch { /* offline / 404 — keep last state */ }
    };
    tick();
    const id = setInterval(tick, 30000);
    return () => { cancelled = true; clearInterval(id); };
  }, []);
  return s;
}

// Embedded YouTube live player with a "Live now" badge in the corner.
// Autoplay is muted to satisfy browser autoplay policies.
function LiveEmbed({ videoId, title, aspect = '16/9' }) {
  return (
    <div style={{
      position: 'relative', aspectRatio: aspect, borderRadius: 4,
      overflow: 'hidden', background: '#000', boxShadow: 'var(--shadow-md)'
    }}>
      <div style={{
        position: 'absolute', top: 12, left: 12, zIndex: 2,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '6px 12px', borderRadius: 999,
        background: 'rgba(226,62,42,0.95)', color: '#fff',
        fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
        textTransform: 'uppercase', fontFamily: "'JetBrains Mono', monospace"
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999, background: '#fff',
          animation: 'pulseDot 1.6s ease-in-out infinite'
        }}/>
        Live now
      </div>
      <iframe
        src={`https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&playsinline=1&modestbranding=1&rel=0`}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
        allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
        allowFullScreen
        title={title || 'GSID live stream'}
      />
    </div>
  );
}

function HeroLockup({ clock, live }) {
  const hm = clock.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false });
  const isLive = !!(live && live.isLive && live.videoId);
  return (
    <section id="home" style={{ padding: '60px 0 80px', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'end' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
              <span className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>Vicarage Road · West Bromwich · B71 1AQ</span>
              <span style={{ width: 24, height: 1, background: 'var(--line-strong)' }}/>
              <span className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>Charity {GSID.org.charityNo}</span>
            </div>

            <h1 className="fraunces" style={{
              fontSize: 'clamp(48px, 7vw, 104px)', fontWeight: 400, lineHeight: 0.94,
              letterSpacing: '-0.025em', margin: 0, color: 'var(--ink)'
            }}>
              A Gurdwara is<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--saffron)' }}>the Guru's door.</em><br/>
              Everyone is welcome<br/>to walk through it.
            </h1>

            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-soft)', maxWidth: 540, marginTop: 36 }}>
              Gurdwara Sachkhand Isher Darbar at West Bromwich is the UK home of the
              Bhai Daya Singh Ji Samparda — one of thirteen Gurdware across six countries,
              dedicated to the legacy of Sant Baba Isher Singh Ji Maharaj (Rara Sahib Wale)
              and to preserving the Satkaar of Sri Guru Granth Sahib Ji Maharaj.
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <a href="/donate/" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 22px', background: 'var(--saffron)', color: '#fff',
                borderRadius: 999, textDecoration: 'none', fontSize: 14, fontWeight: 600
              }}>
                Donate to the rebuild <Arrow size={14}/>
              </a>
              <a href="#schedule" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 22px', border: '1px solid var(--line-strong)', color: 'var(--ink)',
                borderRadius: 999, textDecoration: 'none', fontSize: 14, fontWeight: 500
              }}>
                This week's programme
              </a>
            </div>
          </div>

          {isLive ? (
            <div>
              <LiveEmbed videoId={live.videoId} title={live.title} aspect="16/9"/>
              {live.title && (
                <div className="fraunces" style={{ fontSize: 16, marginTop: 14, lineHeight: 1.4, color: 'var(--ink-soft)' }}>
                  {live.title}
                </div>
              )}
              <a href={GSID.org.socials.youtube} target="_blank" rel="noopener" style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                marginTop: 8, fontSize: 12, color: 'var(--ink-muted)',
                textDecoration: 'none', fontFamily: "'JetBrains Mono', monospace",
                textTransform: 'uppercase', letterSpacing: '0.12em'
              }}>Watch on YouTube <ArrowUpRight size={11}/></a>
            </div>
          ) : (
            <div style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 4, overflow: 'hidden', background: 'var(--bg-alt)' }}>
              <img src="Gurdwara.png" alt="Gurdwara Sachkhand Isher Darbar, Pehowa"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%' }} />
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function HeroQuote({ clock, live }) {
  const isLive = !!(live && live.isLive && live.videoId);
  if (isLive) {
    // When live, show the stream above the quote so the live darshan leads.
    return (
      <section id="home" style={{ padding: '40px 0 80px', borderBottom: '1px solid var(--line)' }}>
        <div className="container-tight">
          <LiveEmbed videoId={live.videoId} title={live.title} aspect="16/9"/>
          {live.title && (
            <div className="fraunces" style={{ fontSize: 18, marginTop: 18, color: 'var(--ink)', textAlign: 'center' }}>{live.title}</div>
          )}
          <div style={{ marginTop: 48, textAlign: 'center' }}>
            <Khanda size={24} color="var(--saffron)"/>
            <div className="gurmukhi" style={{ fontSize: 'clamp(22px, 2.6vw, 32px)', lineHeight: 1.5, color: 'var(--ink)', marginTop: 24, fontWeight: 500 }}>
              ਗੁਰਦੁਆਰੈ ਲਾਇ ਭਾਵਨੀ
            </div>
            <p className="fraunces" style={{ fontSize: 17, fontStyle: 'italic', color: 'var(--ink-soft)', maxWidth: 560, margin: '14px auto 0' }}>
              "Through the Gurdwara, the Guru's Gate, some are blessed with loving faith."
            </p>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section id="home" style={{ padding: '120px 0 100px', borderBottom: '1px solid var(--line)' }}>
      <div className="container-tight" style={{ textAlign: 'center' }}>
        <Khanda size={28} color="var(--saffron)"/>
        <div className="gurmukhi" style={{
          fontSize: 'clamp(28px, 3.4vw, 48px)', lineHeight: 1.5,
          color: 'var(--ink)', marginTop: 32, fontWeight: 500
        }}>
          ਗੁਰਦੁਆਰੈ ਲਾਇ ਭਾਵਨੀ<br/>ਇਕਨਾ ਦਸਵਾ ਦੁਆਰੁ ਦਿਖਾਇਆ
        </div>
        <p className="fraunces" style={{
          fontSize: 22, fontStyle: 'italic', color: 'var(--ink-soft)',
          maxWidth: 640, margin: '32px auto 0', lineHeight: 1.5
        }}>
          "Through the Gurdwara, the Guru's Gate, some are blessed with loving faith,
          and the Tenth Door is revealed to them."
        </p>
        <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)', marginTop: 20 }}>
          — Sri Guru Granth Sahib Ji · Ang 922
        </div>

        <div style={{ marginTop: 72, display: 'flex', justifyContent: 'center', gap: 12, flexWrap: 'wrap' }}>
          <a href="/donate/" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '14px 22px', background: 'var(--saffron)', color: '#fff',
            borderRadius: 999, textDecoration: 'none', fontSize: 14, fontWeight: 600
          }}>
            Donate to the rebuild
          </a>
          <a href="/samparda/" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '14px 22px', border: '1px solid var(--line-strong)', color: 'var(--ink)',
            borderRadius: 999, textDecoration: 'none', fontSize: 14, fontWeight: 500
          }}>
            Our Samparda
          </a>
        </div>
      </div>
    </section>
  );
}

function HeroPhoto({ clock, live }) {
  const hm = clock.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', hour12: false });
  const isLive = !!(live && live.isLive && live.videoId);
  if (isLive) {
    // Live state: dark backdrop with the YouTube embed front-and-centre.
    return (
      <section id="home" style={{ padding: '40px 0 60px', borderBottom: '1px solid var(--line)', background: '#0e0d0b', color: '#f4eee0' }}>
        <div className="container">
          <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', opacity: 0.7, marginBottom: 18 }}>
            Gurdwara Sachkhand Isher Darbar · West Bromwich, B71 1AQ
          </div>
          <LiveEmbed videoId={live.videoId} title={live.title} aspect="16/9"/>
          {live.title && (
            <h1 className="fraunces" style={{ fontSize: 'clamp(26px, 4vw, 40px)', fontWeight: 400, lineHeight: 1.15, marginTop: 24, marginBottom: 0, maxWidth: 900 }}>
              {live.title}
            </h1>
          )}
        </div>
      </section>
    );
  }
  return (
    <section id="home" style={{
      position: 'relative',
      borderBottom: '1px solid var(--line)',
      background: 'var(--bg-alt)',
      minHeight: 640,
      overflow: 'hidden'
    }}>
      <img src="2026 Banner Left 2nd.jpg" alt="" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', opacity: 0.95
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(14,13,11,0.2) 0%, rgba(14,13,11,0.8) 100%)'
      }}/>
      <div className="container" style={{ position: 'relative', padding: '120px 28px 60px', color: '#f4eee0' }}>
        <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', opacity: 0.7 }}>
          Gurdwara Sachkhand Isher Darbar · West Bromwich, B71 1AQ
        </div>
        <h1 className="fraunces" style={{
          fontSize: 'clamp(44px, 6vw, 88px)', fontWeight: 400, lineHeight: 1, letterSpacing: '-0.02em',
          marginTop: 24, marginBottom: 24, maxWidth: 900
        }}>
          The Guru's door<br/><em style={{ color: '#e89444' }}>is always open.</em>
        </h1>
        <p style={{ fontSize: 18, maxWidth: 560, opacity: 0.85, lineHeight: 1.6 }}>
          Eight Gurdware across India, the UK, the USA and Canada — under the
          Bhai Daya Singh Ji Samparda.
        </p>
        <div style={{ marginTop: 48, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href="/donate/" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '14px 22px', background: '#e89444', color: '#fff',
            borderRadius: 999, textDecoration: 'none', fontSize: 14, fontWeight: 600
          }}>
            Donate to the rebuild
          </a>
          <a href="#schedule" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '14px 22px', border: '1px solid rgba(244,238,224,0.4)',
            color: '#f4eee0', borderRadius: 999, textDecoration: 'none', fontSize: 14, fontWeight: 500
          }}>
            This week's programme
          </a>
        </div>
      </div>
    </section>
  );
}

// ── Live / schedule ──
function LiveBand({ showGurmukhi }) {
  const h = GSID.hukamnama;
  return (
    <section id="live" style={{ padding: '72px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead eyebrow="Hukamnama Sahib · Today" title="Today's Vaak from Sri Harmandir Sahib" right={`Updated ${new Date().toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' })}`}/>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40,
          marginTop: 32, alignItems: 'stretch'
        }}>
          <div style={{
            padding: 40, background: 'var(--accent-bg)',
            border: '1px solid var(--line)', borderRadius: 2,
            position: 'relative', overflow: 'hidden'
          }}>
            <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--saffron)', marginBottom: 24 }}>
              {h.raag} · {h.ang}
            </div>
            {showGurmukhi && (
              <div className="gurmukhi" style={{
                fontSize: 28, lineHeight: 1.5, color: 'var(--ink)', fontWeight: 500,
                marginBottom: 28
              }}>
                {h.gurmukhi}
              </div>
            )}
            <p className="fraunces" style={{
              fontSize: 20, fontStyle: 'italic', lineHeight: 1.5, color: 'var(--ink-soft)', margin: 0
            }}>
              {h.translation}
            </p>
            <div style={{
              marginTop: 32, display: 'flex', justifyContent: 'space-between',
              alignItems: 'center', paddingTop: 20, borderTop: '1px solid var(--line)'
            }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>Sourced from Sri Harmandir Sahib daily Hukamnama</div>
              <span style={{ fontSize: 13, color: 'var(--ink-muted)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                Listen
                <span className="mono" style={{ fontSize: 9, padding: '3px 8px', borderRadius: 999, background: 'var(--accent-bg)', color: 'var(--saffron)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>Soon</span>
              </span>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 2, background: 'var(--surface)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                <span className="live-dot"/>
                <span className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em' }}>Live now · West Bromwich</span>
              </div>
              <div className="fraunces" style={{ fontSize: 22, marginBottom: 4 }}>Aasa Di Vaar</div>
              <div style={{ fontSize: 13, color: 'var(--ink-muted)' }}>Raagi Jatha · Bhai Satnam Singh Ji</div>
              <div style={{ marginTop: 18, height: 3, background: 'var(--line)', borderRadius: 999, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', inset: 0, width: '63%', background: 'var(--saffron)' }}/>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11 }} className="mono">
                <span>47:12</span><span style={{ color: 'var(--ink-muted)' }}>1:15:00</span>
              </div>
            </div>

            <div style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 2, background: 'var(--surface)' }}>
              <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)', marginBottom: 12 }}>
                Up next
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  { t: 'Anand Sahib', at: '08:30' },
                  { t: 'Ardaas & Hukamnama', at: '09:00' },
                  { t: 'Langar', at: '12:00' },
                  { t: 'Rehras Sahib', at: '19:10' },
                ].map(r => (
                  <div key={r.t} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14 }}>
                    <span>{r.t}</span>
                    <span className="mono" style={{ color: 'var(--ink-muted)' }}>{r.at}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, title, right, sub }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20 }}>
      <div>
        <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--saffron)', marginBottom: 14 }}>
          {eyebrow}
        </div>
        <h2 className="fraunces" style={{
          fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 400, letterSpacing: '-0.02em',
          lineHeight: 1.08, margin: 0, maxWidth: 720
        }}>
          {title}
        </h2>
        {sub && <p style={{ marginTop: 14, color: 'var(--ink-muted)', maxWidth: 560 }}>{sub}</p>}
      </div>
      {right && <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--ink-muted)' }}>{right}</div>}
    </div>
  );
}

// ── Schedule ──
// schedule[] order: Sat(0) Sun(1) Mon(2) Tue(3) Wed(4) Thu(5) Fri(6)
// JS getDay():      Sun=0  Mon=1  Tue=2  Wed=3  Thu=4  Fri=5  Sat=6
// Mapping: todayIdx = (getDay() + 1) % 7
function getTodayScheduleIdx() {
  return (new Date().getDay() + 1) % 7;
}

function Schedule() {
  const todayIdx = getTodayScheduleIdx();
  const [day, setDay] = useState(todayIdx);
  const d = GSID.schedule[day];
  return (
    <section id="schedule" style={{ padding: '88px 0', borderBottom: '1px solid var(--line)', background: 'var(--bg-alt)' }}>
      <div className="container">
        <SectionHead eyebrow="This Week · Pehowa" title="The Darbar runs on a quiet, daily rhythm." sub="Diwan begins with Prakash at Amritvela, closes with Sukhasan at night. All welcome."/>

        <div className="schedule-layout" style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 32, marginTop: 40 }}>
          <div className="schedule-days" style={{ display: 'flex', flexDirection: 'column' }}>
            {GSID.schedule.map((s, i) => (
              <button key={s.day} className="schedule-day-btn" onClick={() => setDay(i)} style={{
                textAlign: 'left', padding: '16px 18px',
                borderBottom: '1px solid var(--line)',
                borderLeft: i === day ? '2px solid var(--saffron)' : '2px solid transparent',
                background: i === day ? 'var(--surface)' : 'transparent',
                transition: 'all 0.15s'
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                  <span className="fraunces" style={{ fontSize: 18, fontWeight: i === day ? 500 : 400 }}>
                    {i === todayIdx ? 'Today' : s.day}
                  </span>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{s.date}</span>
                </div>
                {s.special && <div style={{ fontSize: 11, color: 'var(--saffron)', marginTop: 4 }}>{s.special.split('·')[0].trim()}</div>}
              </button>
            ))}
          </div>
          <div className="schedule-card" style={{
            padding: 40, background: 'var(--surface)', border: '1px solid var(--line)'
          }}>
            <div className="schedule-card-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
              <div>
                <div className="fraunces" style={{ fontSize: 32, fontWeight: 400 }}>
                  {day === todayIdx ? 'Today' : d.day}
                </div>
                <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)', marginTop: 4 }}>{d.date} · All times BST</div>
              </div>
              {d.special && (
                <div style={{ padding: '8px 14px', background: 'var(--accent-bg)', borderRadius: 2, border: '1px solid var(--line)' }}>
                  <span className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--saffron)' }}>Special</span>
                  <div style={{ fontSize: 13, marginTop: 2 }}>{d.special}</div>
                </div>
              )}
            </div>
            <div className="schedule-times" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: '1px solid var(--line)' }}>
              {[
                ['Prakash', d.prakash], ['Nitnem', d.nitnem],
                ['Kirtan Divaan', d.kirtan], ['Langar', d.langar],
                ['Rehras Sahib', d.rehras], ['Sukhasan', d.sukhasan || '20:00']
              ].map(([k, v], i) => (
                <div key={k} className={`schedule-time col-${i % 2 === 0 ? 'left' : 'right'}`} style={{
                  padding: '22px 0',
                  borderBottom: '1px solid var(--line)',
                  paddingLeft: i % 2 === 1 ? 24 : 0,
                  paddingRight: i % 2 === 0 ? 24 : 0,
                  borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none'
                }}>
                  <div style={{ fontSize: 12, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{k}</div>
                  <div className="fraunces" style={{ fontSize: 26, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Three Pillars ──
function Pillars() {
  const [active, setActive] = useState(0);
  return (
    <section id="history" style={{ padding: '96px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead eyebrow="The Teachers Who Shaped This Gurdwara" title="Source, Parchar & Seva."
          sub="Three Saints who connected this Sangat with Sri Guru Granth Sahib Ji Maharaj — one who gave the vision, and two who carried it forward through Parchar and Langar Seva."/>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, marginTop: 48, background: 'var(--line)', border: '1px solid var(--line)' }}>
          {GSID.pillars.map((p, i) => (
            <a key={p.slug}
              href={`/history/${p.slug}/`}
              onMouseEnter={() => setActive(i)}
              style={{
                background: active === i ? 'var(--surface)' : 'var(--bg)',
                padding: '48px 36px 40px',
                cursor: 'pointer', transition: 'background 0.2s',
                display: 'flex', flexDirection: 'column', minHeight: 480,
                textDecoration: 'none', color: 'inherit'
              }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--saffron)' }}>0{i + 1}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{p.years}</span>
              </div>

              <div className="fraunces" style={{ fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.02em', fontWeight: 400 }}>
                {p.title}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-muted)', marginTop: 8 }}>
                {p.sub} <span style={{ color: 'var(--saffron)' }}>· {p.place}</span>
              </div>

              <p style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--ink-soft)', marginTop: 24, flex: 1 }}>
                {p.desc}
              </p>

              <div style={{ paddingTop: 24, borderTop: '1px solid var(--line)', marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div>
                  <div className="fraunces" style={{ fontSize: 30, color: 'var(--saffron)', fontWeight: 500, letterSpacing: '-0.02em' }}>
                    {p.stat.value}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }}>{p.stat.label}</div>
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--saffron)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>Read more →</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Samparda lineage ──
function Samparda() {
  const [hover, setHover] = useState(10);
  const s = GSID.lineage[hover] || GSID.lineage[10];
  return (
    <section id="samparda" style={{ padding: '96px 0', borderBottom: '1px solid var(--line)', background: 'var(--bg-alt)' }}>
      <div className="container">
        <SectionHead eyebrow="Darshan Sampardaie · Bhai Daya Singh Ji" title="An eleven-generation lineage, unbroken since 1699."
          sub="From Sri Guru Gobind Singh Ji, through the first of the Panj Pyare, across three centuries of Parchar and Seva, to Sant Baba Isher Singh Ji Maharaj — our spiritual source."/>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginTop: 56, alignItems: 'start' }}>
          <div>
            {GSID.lineage.map((l, i) => (
              <div key={l.slug}
                onMouseEnter={() => setHover(i)}
                style={{
                  display: 'grid', gridTemplateColumns: '32px 1fr auto', gap: 16, alignItems: 'baseline',
                  padding: '14px 0', borderBottom: i === GSID.lineage.length - 1 ? 'none' : '1px solid var(--line)',
                  cursor: 'pointer', opacity: hover === i ? 1 : 0.7, transition: 'opacity 0.15s'
                }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{String(l.n).padStart(2, '0')}</span>
                <div>
                  <div className="fraunces" style={{ fontSize: hover === i ? 20 : 18, fontWeight: 500, letterSpacing: '-0.01em', transition: 'font-size 0.15s' }}>
                    {l.title}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }}>{l.sub}</div>
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{l.years}</span>
              </div>
            ))}
          </div>
          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{
              aspectRatio: '4/5', background: 'var(--surface)', border: '1px solid var(--line)',
              display: 'grid', placeItems: 'center',
              backgroundImage: 'repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 12px)'
            }}>
              <div style={{ textAlign: 'center', padding: 40, background: 'var(--surface)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
                  Generation {s.n}
                </div>
                <div className="fraunces" style={{ fontSize: 32, marginTop: 14, letterSpacing: '-0.02em' }}>{s.title}</div>
                <div style={{ fontSize: 13, color: 'var(--saffron)', marginTop: 6 }}>{s.sub}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)', marginTop: 12 }}>{s.years}</div>
              </div>
            </div>
            <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>Hover the lineage to explore</span>
              <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-muted)', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                Full biographies
                <span className="mono" style={{ fontSize: 9, padding: '3px 8px', borderRadius: 999, background: 'var(--accent-bg)', color: 'var(--saffron)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>Soon</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Worldwide Gurdware + Building project ──
function Worldwide() {
  const [filter, setFilter] = useState('All');
  const countries = ['All', ...Array.from(new Set(GSID.locations.map(l => l.country)))];
  const list = filter === 'All' ? GSID.locations : GSID.locations.filter(l => l.country === filter);

  return (
    <section id="gurdware" style={{ padding: '96px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead eyebrow="Worldwide" title="Thirteen Gurdware. Six countries. One Samparda." sub="From the founding seat at Jurasi, Pehowa to West Bromwich, Sacramento, Brescia and Cranbourne South — every Darbar carries the same Maryada."/>

        <div style={{ display: 'flex', gap: 8, marginTop: 32, flexWrap: 'wrap' }}>
          {countries.map(c => (
            <button key={c} onClick={() => setFilter(c)} style={{
              padding: '8px 16px', borderRadius: 999, fontSize: 12,
              border: '1px solid ' + (filter === c ? 'var(--ink)' : 'var(--line)'),
              background: filter === c ? 'var(--ink)' : 'transparent',
              color: filter === c ? 'var(--bg)' : 'var(--ink-soft)',
              transition: 'all 0.15s'
            }}>{c} {c !== 'All' && <span style={{ opacity: 0.6 }}>· {GSID.locations.filter(l => l.country === c).length}</span>}</button>
          ))}
        </div>

        <div style={{ marginTop: 32, border: '1px solid var(--line)' }}>
          {list.map((l, i) => (
            <div key={l.city} style={{
              display: 'grid', gridTemplateColumns: '100px 1fr 1fr 140px 80px',
              padding: '22px 28px', alignItems: 'center', gap: 24,
              borderBottom: i === list.length - 1 ? 'none' : '1px solid var(--line)',
              background: l.primary ? 'var(--accent-bg)' : 'transparent',
              transition: 'background 0.15s'
            }}>
              <span className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--saffron)' }}>{l.country}</span>
              <div>
                <div className="fraunces" style={{ fontSize: 20, fontWeight: 500 }}>{l.name}</div>
                {l.primary && <span className="mono" style={{ fontSize: 9, marginTop: 4, display: 'inline-block', padding: '2px 6px', background: 'var(--saffron)', color: '#fff', borderRadius: 2, textTransform: 'uppercase', letterSpacing: '0.1em' }}>UK Home</span>}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{l.city}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{l.phone || ''}</div>
              <a href={`tel:${(l.phone || '').replace(/\s+/g, '')}`} style={{ fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 6, justifySelf: 'end' }}>Call <ArrowUpRight size={12}/></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Building project ──
function Building() {
  const b = GSID.building;
  return (
    <section id="building" style={{
      padding: '96px 0', borderBottom: '1px solid var(--line)', background: 'var(--bg-alt)'
    }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--saffron)', marginBottom: 16 }}>
              Kar-Seva · {b.status}
            </div>
            <h2 className="fraunces" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', letterSpacing: '-0.02em', lineHeight: 1.05, margin: 0, fontWeight: 400 }}>
              {b.title}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-soft)', marginTop: 24 }}>
              {b.blurb}
            </p>

            <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--line)', background: 'var(--surface)' }}>
              {b.specs.map((s, i) => (
                <div key={s.label} style={{
                  padding: '20px 22px',
                  borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none',
                  borderBottom: i < 2 ? '1px solid var(--line)' : 'none'
                }}>
                  <div className="fraunces" style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>{s.value}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-muted)', marginTop: 4 }}>{s.label}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 28 }}>
              <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)', marginBottom: 14 }}>Across three floors</div>
              {b.floors.map((f, i) => (
                <div key={f.n} style={{
                  display: 'grid', gridTemplateColumns: '90px 1fr', gap: 16, alignItems: 'baseline',
                  padding: '14px 0', borderTop: '1px solid var(--line)',
                  borderBottom: i === b.floors.length - 1 ? '1px solid var(--line)' : 'none'
                }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--saffron)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{f.n}</span>
                  <div>
                    <div className="fraunces" style={{ fontSize: 18, fontWeight: 500 }}>{f.title}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 2, lineHeight: 1.5 }}>{f.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="/building/" style={{
                padding: '14px 22px', background: 'var(--ink)', color: 'var(--bg)',
                borderRadius: 999, fontSize: 14, fontWeight: 500, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 10
              }}>Read more about the rebuild <Arrow size={14}/></a>
              <a href="GSID-3D-Model.html" style={{
                padding: '14px 22px', border: '1px solid var(--line-strong)', color: 'var(--ink)',
                borderRadius: 999, fontSize: 14, fontWeight: 500, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 10
              }}>Walk through the building — 3D model <Arrow size={14}/></a>
            </div>
          </div>

          <div style={{ position: 'sticky', top: 100 }}>
            <div style={{ aspectRatio: '4/5', background: 'var(--bg)', border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
              <iframe src="GSID-3D-Model.html" style={{ width: '100%', height: '100%', border: 0, display: 'block', pointerEvents: 'none' }} loading="lazy" title="3D model"/>
              <a href="GSID-3D-Model.html" style={{ position: 'absolute', inset: 0, display: 'block' }} aria-label="Open 3D model"/>
              <div style={{ position: 'absolute', top: 20, left: 20, padding: '6px 12px', background: 'var(--surface)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }} className="mono">
                Live 3D · Click to explore
              </div>
            </div>
            <div style={{ marginTop: 20, padding: 24, background: 'var(--surface)', border: '1px solid var(--line)' }}>
              <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)', marginBottom: 12 }}>Why we are building</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {b.why.map(w => (
                  <li key={w} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10, fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
                    <span style={{ color: 'var(--saffron)' }}>·</span><span>{w}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Commitments ──
function Commitments() {
  return (
    <section id="commitments" style={{ padding: '96px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead eyebrow="Our Commitments" title="Six things this Gurdwara puts into practice." sub="Anchored by one question — does this bring people closer to Sri Guru Granth Sahib Ji Maharaj?"/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 48, border: '1px solid var(--line)' }}>
          {GSID.commitments.map((c, i) => (
            <div key={c.n} style={{
              padding: 32,
              borderRight: (i + 1) % 3 === 0 ? 'none' : '1px solid var(--line)',
              borderBottom: i < GSID.commitments.length - 3 ? '1px solid var(--line)' : 'none',
              minHeight: 220, display: 'flex', flexDirection: 'column'
            }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--saffron)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>0{c.n}</div>
              <div className="fraunces" style={{ fontSize: 22, fontWeight: 500, marginTop: 14, letterSpacing: '-0.01em' }}>{c.title}</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-soft)', marginTop: 12 }}>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Visit ──
function Visit() {
  const o = GSID.org;
  return (
    <section id="visit" style={{ padding: '96px 0', borderBottom: '1px solid var(--line)', background: 'var(--bg-alt)' }}>
      <div className="container">
        <SectionHead eyebrow="Visit · West Bromwich" title="The Guru's door is always open." sub="Sangat is welcome at every Diwan. Langar is served daily."/>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 60, marginTop: 48 }}>
          <div style={{ padding: 36, background: 'var(--surface)', border: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>Address</div>
            <div className="fraunces" style={{ fontSize: 26, marginTop: 8, letterSpacing: '-0.01em', lineHeight: 1.3 }}>
              {o.name}<br/>
              {o.address.line1}<br/>
              {o.address.city} · {o.address.postcode}<br/>
              {o.address.country}
            </div>
            <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <div>
                <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>Phone</div>
                <a href={`tel:${o.phone.replace(/\s+/g, '')}`} className="fraunces" style={{ fontSize: 18, marginTop: 6, display: 'block', textDecoration: 'none', color: 'var(--ink)' }}>{o.phone}</a>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>Email</div>
                <a href={`mailto:${o.email}`} className="fraunces" style={{ fontSize: 18, marginTop: 6, display: 'block', textDecoration: 'none', color: 'var(--ink)' }}>{o.email}</a>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>WhatsApp</div>
                <a href={o.whatsapp} target="_blank" rel="noopener" className="fraunces" style={{ fontSize: 18, marginTop: 6, display: 'block', textDecoration: 'none', color: 'var(--ink)' }}>+44 7480 066570</a>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>Charity No.</div>
                <span className="fraunces" style={{ fontSize: 18, marginTop: 6, display: 'block' }}>{o.charityNo}</span>
              </div>
            </div>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(o.address.line1 + ', ' + o.address.city + ', ' + o.address.postcode)}`} target="_blank" rel="noopener" style={{
                padding: '12px 18px', background: 'var(--ink)', color: 'var(--bg)',
                borderRadius: 999, fontSize: 13, fontWeight: 500, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 8
              }}>Get directions <ArrowUpRight size={12}/></a>
              <a href={o.socials.youtube} target="_blank" rel="noopener" style={{
                padding: '12px 18px', border: '1px solid var(--line-strong)', color: 'var(--ink)',
                borderRadius: 999, fontSize: 13, fontWeight: 500, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 8
              }}><span className="live-dot"/> Watch on YouTube</a>
            </div>
          </div>
          <div style={{ padding: 36, background: 'var(--surface)', border: '1px solid var(--line)' }}>
            <div className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-muted)' }}>Plan your visit</div>
            <div className="fraunces" style={{ fontSize: 22, marginTop: 8, letterSpacing: '-0.01em', lineHeight: 1.3 }}>Everyone is welcome &mdash; every day.</div>
            <ul style={{ marginTop: 20, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                ['Open daily', 'Diwan begins with Prakash at Amritvela; Sukhasan at night.'],
                ['Langar', 'Open 24/7 — Guru ka Langar served every day, free for all.'],
                ['Step-free', 'Lift access and ramped entrance throughout the building.'],
                ['Head covering', 'Provided at the entrance; please remove shoes before the Darbar.'],
              ].map(([k, v]) => (
                <li key={k} style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 14, alignItems: 'baseline' }}>
                  <span className="mono" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--saffron)' }}>{k}</span>
                  <span style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{v}</span>
                </li>
              ))}
            </ul>
            <a href="/visit/" style={{
              marginTop: 24, display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '12px 20px', borderRadius: 999, background: 'var(--ink)', color: 'var(--bg)',
              fontSize: 13, fontWeight: 500, textDecoration: 'none'
            }}>
              See the full programme <Arrow size={12}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Panj Pyare band ──
function Pyare() {
  return (
    <section style={{ padding: '96px 0', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHead eyebrow="The Khalsa" title="Five virtues we put into practice every day."/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, marginTop: 48, border: '1px solid var(--line)' }}>
          {GSID.pyare.map((p, i) => (
            <div key={p.name} style={{
              padding: 32, borderRight: i === 4 ? 'none' : '1px solid var(--line)',
              display: 'flex', flexDirection: 'column', minHeight: 240
            }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--saffron)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>0{i + 1} · {p.virtue}</div>
              <div className="fraunces" style={{ fontSize: 20, fontWeight: 500, marginTop: 16, letterSpacing: '-0.01em' }}>{p.name}</div>
              <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--ink-soft)', marginTop: 'auto' }}>{p.note}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Legacy in Numbers — headline impact stats on the home page ──
function Legacy() {
  const stats = GSID.legacy || [];
  if (!stats.length) return null;
  return (
    <section id="legacy" style={{ padding: '96px 0', borderBottom: '1px solid var(--line)', background: 'var(--bg-alt)' }}>
      <div className="container">
        <SectionHead eyebrow="Legacy in Numbers" title="The scale of the Seva."
          sub="A glimpse of what Sant Baba Mann Singh Ji and Sant Baba Mohan Singh Ji have carried across six countries — through Parchar, Amrit and the Guru's Langar."/>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 1, marginTop: 48, background: 'var(--line)', border: '1px solid var(--line)'
        }}>
          {stats.map((s) => (
            <div key={s.label} style={{
              background: 'var(--surface)', padding: '40px 32px 36px',
              display: 'flex', flexDirection: 'column', gap: 10, minHeight: 200
            }}>
              <div className="fraunces" style={{
                fontSize: 'clamp(34px, 4.2vw, 52px)', fontWeight: 500,
                color: 'var(--saffron)', lineHeight: 1, letterSpacing: '-0.02em'
              }}>{s.value}</div>
              <div style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.45, fontWeight: 500 }}>{s.label}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.1em', marginTop: 'auto' }}>{s.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Navigation, Footer, and Khanda are owned by shared.jsx and already on window.
Object.assign(window, {
  Hero, LiveBand, Schedule, Pillars, Commitments, Samparda, Worldwide, Building, Visit, Pyare, Legacy, SectionHead
});