/* global React, GSID */
/* Shared chrome used by every page: Khanda icon, Navigation, Footer, PageShell wrapper.
 * Loads before components.jsx so the globals defined here are available site-wide. */
(function () {
  const { useState, useEffect } = React;

  // ── Khanda icon (shared between Navigation + Footer + anywhere else) ──
  const Khanda = ({ size = 24, color = 'currentColor' }) => (
    <svg className="khanda-svg" width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden>
      <path d="M32 4 L32 60" stroke={color} strokeWidth="2.2" />
      <circle cx="32" cy="22" r="9.5" stroke={color} strokeWidth="2.2" fill="none"/>
      <path d="M32 12 L32 32" stroke={color} strokeWidth="3" />
      <path d="M22 48 C 22 34, 14 26, 14 18 C 14 26, 22 34, 32 42" stroke={color} strokeWidth="1.8" fill="none"/>
      <path d="M42 48 C 42 34, 50 26, 50 18 C 50 26, 42 34, 32 42" stroke={color} strokeWidth="1.8" fill="none"/>
    </svg>
  );

  // ── Navigation ──
  function Navigation({ onOpenTweaks }) {
    const [scrolled, setScrolled] = useState(false);
    const [mobileOpen, setMobileOpen] = useState(false);
    useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 12);
      window.addEventListener('scroll', onScroll, { passive: true });
      return () => window.removeEventListener('scroll', onScroll);
    }, []);
    useEffect(() => {
      // Close mobile menu on route change / resize > 720
      const onResize = () => { if (window.innerWidth > 720) setMobileOpen(false); };
      window.addEventListener('resize', onResize);
      return () => window.removeEventListener('resize', onResize);
    }, []);

    return (
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: scrolled || mobileOpen ? 'var(--bg)' : 'transparent',
        borderBottom: scrolled || mobileOpen ? '1px solid var(--line)' : '1px solid transparent',
        transition: 'all 0.25s ease',
        backdropFilter: scrolled ? 'blur(8px)' : 'none',
      }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
          <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', minWidth: 0, flex: '0 1 auto' }}>
            <div style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--ink)', color: 'var(--bg)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <Khanda size={18} />
            </div>
            <div className="nav-title" style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1, minWidth: 0 }}>
              <span className="fraunces" style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>Gurdwara Sachkhand Isher Darbar</span>
              <span className="mono nav-subtitle" style={{ fontSize: 10, color: 'var(--ink-muted)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 2 }}>Bhai Daya Singh Ji Samparda · West Bromwich</span>
            </div>
          </a>

          <nav className="hide-md" style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            {GSID.navItems.map(item => item.cta ? (
              // CTA-styled nav item (saffron pill) — used for primary action
              // like Donate. Distinct from the muted standard nav links so it
              // catches the eye without dominating the bar.
              <a key={item.href} href={item.href} style={{
                fontSize: 13, padding: '8px 16px', borderRadius: 999,
                marginLeft: 4,
                background: 'var(--saffron)', color: '#fff',
                textDecoration: 'none', fontWeight: 600,
                transition: 'all 0.15s'
              }}
                onMouseOver={e => { e.currentTarget.style.filter = 'brightness(1.08)'; }}
                onMouseOut={e => { e.currentTarget.style.filter = 'none'; }}
              >{item.label}</a>
            ) : (
              <a key={item.href} href={item.href} style={{
                fontSize: 13, padding: '8px 14px', borderRadius: 999,
                color: 'var(--ink-soft)', textDecoration: 'none',
                transition: 'all 0.15s'
              }}
                onMouseOver={e => { e.currentTarget.style.background = 'var(--bg-alt)'; e.currentTarget.style.color = 'var(--ink)'; }}
                onMouseOut={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-soft)'; }}
              >{item.label}</a>
            ))}
          </nav>

          {/* Mobile hamburger — shown only below 720px via CSS class .show-mobile */}
          <button
            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
            className="show-mobile"
            onClick={() => setMobileOpen(o => !o)}
            style={{
              display: 'none', width: 40, height: 40, borderRadius: 999,
              alignItems: 'center', justifyContent: 'center',
              background: 'var(--bg-alt)', color: 'var(--ink)', flexShrink: 0
            }}
          >
            {mobileOpen ? (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            )}
          </button>
        </div>

        {/* Mobile menu dropdown */}
        {mobileOpen && (
          <nav className="mobile-nav" style={{
            borderTop: '1px solid var(--line)', background: 'var(--bg)',
            padding: '8px 0 16px',
          }}>
            <div className="container" style={{ display: 'flex', flexDirection: 'column' }}>
              {GSID.navItems.map(item => item.cta ? (
                <a key={item.href} href={item.href} onClick={() => setMobileOpen(false)} style={{
                  marginTop: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  padding: '14px 18px', borderRadius: 999,
                  background: 'var(--saffron)', color: '#fff',
                  fontSize: 15, fontWeight: 600, textDecoration: 'none',
                }}>{item.label}</a>
              ) : (
                <a key={item.href} href={item.href} onClick={() => setMobileOpen(false)} style={{
                  fontSize: 16, padding: '14px 4px', color: 'var(--ink)', textDecoration: 'none',
                  borderBottom: '1px solid var(--line)', fontFamily: 'Fraunces, serif',
                }}>{item.label}</a>
              ))}
            </div>
          </nav>
        )}
      </header>
    );
  }

  // ── Footer ──
  function Footer() {
    return (
      <footer id="about" style={{ padding: '72px 0 32px', background: 'var(--ink)', color: 'var(--bg)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 60, paddingBottom: 56 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
                <Khanda size={22} color="var(--saffron)"/>
                <span className="fraunces" style={{ fontSize: 22, letterSpacing: '-0.01em' }}>Gurdwara Sachkhand Isher Darbar</span>
              </div>
              <p style={{ fontSize: 14, lineHeight: 1.7, opacity: 0.7, maxWidth: 380 }}>
                Bhai Daya Singh Ji Samparda · West Bromwich. Thirteen Gurdware across six countries carrying forward the legacy of Sant Baba Isher Singh Ji Maharaj (Rara Sahib Wale).
              </p>
              <div style={{ fontSize: 13, marginTop: 22, opacity: 0.75, lineHeight: 1.7 }}>
                {GSID.org.address.line1}<br/>
                {GSID.org.address.city} · {GSID.org.address.postcode}<br/>
                <a href={`tel:${GSID.org.phone.replace(/\s+/g, '')}`} style={{ color: 'inherit', textDecoration: 'none' }}>{GSID.org.phone}</a> · <a href={`mailto:${GSID.org.email}`} style={{ color: 'inherit', textDecoration: 'none' }}>{GSID.org.email}</a>
              </div>
              <div className="fraunces" style={{ fontSize: 18, marginTop: 22, fontStyle: 'italic', opacity: 0.75 }}>
                Waheguru Ji Ka Khalsa,<br/>Waheguru Ji Ki Fateh.
              </div>
            </div>
            {[
              { title: 'Explore', items: [
                { label: 'Samparda', href: '/samparda/' },
                { label: 'Building Project', href: '/building/' },
                { label: 'Jaap Counter', href: '/jaap/' },
                { label: '3D Model', href: '/GSID-3D-Model/' },
                { label: 'Modernisation Framework', href: 'modernisation-framework.html' },
              ] },
              { title: 'Worldwide', items: [
                { label: 'West Bromwich · UK', href: '/visit/#gurdware' },
                { label: 'Jurasi, Pehowa · India', href: '/visit/#gurdware' },
                { label: 'Sacramento · USA', href: '/visit/#gurdware' },
                { label: 'Abbotsford · Canada', href: '/visit/#gurdware' },
                { label: 'Brescia · Italy', href: '/visit/#gurdware' },
                { label: 'Cranbourne South · Australia', href: '/visit/#gurdware' },
              ] },
              { title: 'Connect', items: [
                { label: 'Visit · Find us',  href: '/visit/' },
                { label: 'Feedback',  href: '/feedback/' },
                { label: 'Donate', href: '/donate/' },
                { label: 'YouTube',  href: GSID.org.socials.youtube, external: true },
                { label: 'Facebook', href: GSID.org.socials.facebook, external: true },
                { label: 'Instagram',href: GSID.org.socials.instagram, external: true },
                { label: 'WhatsApp', href: GSID.org.whatsapp, external: true },
              ] },
            ].map(col => (
              <div key={col.title}>
                <div className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.18em', marginBottom: 18, opacity: 0.6 }}>{col.title}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {col.items.map(i => <li key={i.label}><a href={i.href} target={i.external ? '_blank' : undefined} rel={i.external ? 'noopener' : undefined} style={{ fontSize: 14, opacity: 0.85, textDecoration: 'none' }}>{i.label}</a></li>)}
                </ul>
              </div>
            ))}
          </div>
          <div style={{ paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', fontSize: 12, opacity: 0.5, gap: 24, flexWrap: 'wrap' }} className="mono">
            <span>© 2026 Gurdwara Sachkhand Isher Darbar · Registered Charity {GSID.org.charityNo}</span>
            <span>Designed in service. Sabh13 — ਸਭਿ ਤੇਰੇ.</span>
          </div>
        </div>
      </footer>
    );
  }

  // ── PageShell: wrapper for non-home pages (articles list, article detail, etc.) ──
  function PageShell({ title, children }) {
    useEffect(() => {
      if (title) document.title = `${title} · Gurdwara Sachkhand Isher Darbar`;
    }, [title]);
    return (
      <>
        <Navigation />
        <main>{children}</main>
        <Footer />
      </>
    );
  }

  window.GSIDShell = window.GSIDShell || {};
  window.GSIDShell.Khanda = Khanda;
  window.GSIDShell.Navigation = Navigation;
  window.GSIDShell.Footer = Footer;
  window.GSIDShell.PageShell = PageShell;

  // Back-compat: the existing components.jsx + app.jsx reference `Khanda`,
  // `Navigation`, and `Footer` as bare identifiers. Expose them as globals
  // so untouched call sites keep working.
  window.Khanda = Khanda;
  window.Navigation = Navigation;
  window.Footer = Footer;
})();