// Site chrome — sticky nav, footer, big-CTA band.

function Nav({ lang, setLang, route, setRoute, t, accent }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 14);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`site-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <a href="#main-content" className="skip-link">Skip to content</a>
      <div className="nav-inner">
        <a href="#home" className="nav-brand" onClick={(e) => { e.preventDefault(); setRoute('home'); setMobileOpen(false); }}>
          <img
            src={lang === 'ko' ? 'site/img/ATL_logo_Kor.png' : 'site/img/ATL_logo_Eng.png'}
            alt={lang === 'ko' ? '그리심 소망교회' : 'Gerizim Hope Presbyterian Church'}
            className="nav-logo"
          />
          <span className="nav-name">
            {lang === 'ko' ? '그리심소망' : 'GHPC'}
          </span>
        </a>

        <nav className="nav-links" aria-label="Primary">
          {t.nav.map(([id, label]) => (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); setRoute(id); }}
               className={`nav-link ${route === id ? 'is-active' : ''}`}
               style={{ '--accent': accent }}>
              <span>{label}</span>
            </a>
          ))}
        </nav>

        <div className="nav-tail">
          <div className="lang-toggle">
            <button className={lang === 'ko' ? 'on' : ''} onClick={() => setLang('ko')}>KO</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <button className="mobile-toggle" onClick={() => setMobileOpen(o => !o)}
                  aria-label="Menu" aria-expanded={mobileOpen} aria-controls="mobile-menu">
            <span /><span /><span />
          </button>
        </div>
      </div>

      <div id="mobile-menu" className={`mobile-menu ${mobileOpen ? 'is-open' : ''}`}>
        {t.nav.map(([id, label]) => (
          <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); setRoute(id); setMobileOpen(false); }}
             className={`mobile-link ${route === id ? 'is-active' : ''}`}>
            {label}
          </a>
        ))}
      </div>
    </header>
  );
}

function CTABand({ lang, t, setRoute, accent }) {
  return (
    <section className="cta-band">
      <div className="container">
        <Reveal>
          <h2 className="display-xxl" style={{ margin: 0 }}>
            {t.misc.bigCta}
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div className="cta-row">
            <button className="btn btn-primary" onClick={() => setRoute('contact')} style={{ background: accent, borderColor: accent }}>
              {t.cta} →
            </button>
            <button className="btn btn-ghost" onClick={() => setRoute('welcome')}>
              {t.misc.forFirstTime}
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer({ lang, t, setRoute, accent }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="footer-kicker">{t.footer.addr}</div>
            <div className="footer-body">{t.address}</div>
          </div>
          <div className="footer-col">
            <div className="footer-kicker">{t.footer.contact}</div>
            <div className="footer-body">{t.email}</div>
          </div>
          <div className="footer-col">
            <div className="footer-kicker">{t.footer.sermons}</div>
            <div className="footer-list">
              {(lang === 'ko' ? ['주일','수요','새벽','성경공부'] : ['Sunday','Wednesday','Dawn','Bible Study']).map((x, i) => (
                <a key={i} href="#sermons" onClick={(e) => { e.preventDefault(); setRoute('sermons'); }}>{x}</a>
              ))}
            </div>
          </div>
          <div className="footer-col">
            <div className="footer-kicker">{t.footer.links}</div>
            <div className="footer-list">
              <a href="http://www.abrahampark.com/" target="_blank" rel="noreferrer">구속사 시리즈</a>
              <a href="http://champyungan.com/" target="_blank" rel="noreferrer">참평안</a>
              <a href={YT.channelUrl} target="_blank" rel="noreferrer">YouTube</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copy}</span>
          <span style={{ fontFamily: 'var(--mono)', letterSpacing: 2 }}>{t.misc.vol}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, CTABand, Footer });