// chrome.jsx — Topbar (editorial masthead) + Footer (colophon-style)
// Shared across all routes. All editorial copy comes from data.jsx.
// Mobile-first: <768px collapses nav to a hamburger; stacks all grids.

const { LAC, F, HorizonGlyph, Mono, Wordmark, LACButton, Rule, Asterism, EmailField, SITE, CURRENT_ISSUE, useIsMobile } = window;

// ── Topbar ──────────────────────────────────────────────────────
function Topbar({ route, onNav }) {
  const isMobile = useIsMobile();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    ['home',      'Home'],
    ['latest',    'The Issue'],
    ['archive',   'Archive'],
    ['about',     'About'],
    ['contact',   'Contact'],
  ];

  // Close mobile menu when route changes.
  React.useEffect(() => { setMenuOpen(false); }, [route]);

  return (
    <React.Fragment>
      <div style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(244,239,226,0.92)',
        backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
        borderBottom: `1px solid ${LAC.line}`,
      }}>
        <div style={{
          maxWidth: 1320, margin: '0 auto',
          padding: isMobile ? '12px 20px' : '14px 32px',
          display: 'grid',
          gridTemplateColumns: isMobile ? 'auto 1fr auto' : '1fr auto 1fr',
          alignItems: 'center', gap: isMobile ? 12 : 24,
        }}>
          {/* Left — date strip on desktop, hamburger on mobile */}
          {isMobile ? (
            <button
              onClick={() => setMenuOpen((m) => !m)}
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
              style={{
                background: 'transparent', border: 0, padding: 6, cursor: 'pointer',
                display: 'flex', flexDirection: 'column', gap: 4, width: 36, justifySelf: 'start',
              }}
            >
              <span style={{ height: 1.5, background: LAC.midnight, width: 22 }} />
              <span style={{ height: 1.5, background: LAC.midnight, width: 22 }} />
              <span style={{ height: 1.5, background: LAC.midnight, width: 22 }} />
            </button>
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, justifySelf: 'start' }}>
              <HorizonGlyph size={20} time="am" />
              <Mono>Iss. {CURRENT_ISSUE.no} · {CURRENT_ISSUE.day.slice(0, 3)} · {CURRENT_ISSUE.date}</Mono>
            </div>
          )}

          {/* Center — wordmark */}
          <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', justifySelf: 'center' }} onClick={() => onNav('home')}>
            <Wordmark height={isMobile ? 22 : 26} />
          </div>

          {/* Right — inline nav (desktop) or Subscribe pill (mobile) */}
          {isMobile ? (
            <button
              onClick={() => onNav('subscribe')}
              style={{
                background: LAC.midnight, color: LAC.paper, border: 0,
                padding: '8px 12px', cursor: 'pointer',
                fontFamily: F.mono, fontWeight: 500, fontSize: 10,
                letterSpacing: '0.14em', textTransform: 'uppercase', justifySelf: 'end',
              }}
            >Sub</button>
          ) : (
            <nav style={{ display: 'flex', gap: 22, alignItems: 'center', justifySelf: 'end' }}>
              {links.map(([key, label]) => (
                <span key={key} onClick={() => onNav(key)} style={{
                  fontFamily: F.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: route === key ? LAC.midnight : LAC.inkSoft, cursor: 'pointer',
                  borderBottom: `1px solid ${route === key ? LAC.amberDeep : 'transparent'}`,
                  paddingBottom: 2, transition: 'border-color .12s, color .12s',
                }}>{label}</span>
              ))}
              <LACButton onClick={() => onNav('subscribe')} style={{ marginLeft: 8 }}>Subscribe</LACButton>
            </nav>
          )}
        </div>
      </div>

      {/* Mobile fullscreen menu overlay */}
      {isMobile && menuOpen && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 100,
          background: LAC.paper, padding: '24px 24px',
          display: 'flex', flexDirection: 'column', gap: 24,
        }}>
          {/* Close row */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Mono color={LAC.dim}>Iss. {CURRENT_ISSUE.no} · {CURRENT_ISSUE.date}</Mono>
            <button onClick={() => setMenuOpen(false)} aria-label="Close menu" style={{
              background: 'transparent', border: 0, fontSize: 28, cursor: 'pointer',
              fontFamily: F.serif, color: LAC.midnight, lineHeight: 1, padding: 0,
            }}>×</button>
          </div>

          {/* Nav links — large italic serif */}
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 24 }}>
            {links.map(([key, label]) => (
              <span key={key} onClick={() => onNav(key)} style={{
                fontFamily: F.serif, fontSize: 44, lineHeight: 1, letterSpacing: '-0.02em',
                color: route === key ? LAC.amberDeep : LAC.midnight,
                fontStyle: route === key ? 'italic' : 'normal',
                cursor: 'pointer', padding: '6px 0',
              }}>{label}.</span>
            ))}
          </nav>

          <div style={{ marginTop: 'auto' }}>
            <LACButton onClick={() => onNav('subscribe')} style={{ width: '100%', justifyContent: 'center' }}>
              Subscribe · free
            </LACButton>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

// ── Footer ──────────────────────────────────────────────────────
function Footer({ onNav }) {
  const isMobile = useIsMobile();
  const year = new Date().getFullYear();
  return (
    <React.Fragment>
      <section style={{ background: LAC.midnight, color: LAC.paper,
        padding: isMobile ? '48px 20px 40px' : '72px 32px 56px' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr',
          gap: isMobile ? 32 : 56,
          alignItems: isMobile ? 'start' : 'end' }}>
          <div>
            <Mono color={LAC.amber} style={{ display: 'inline-block', marginBottom: 18 }}>↳ delivered at sunrise · local time</Mono>
            <div style={{ fontFamily: F.serif, fontWeight: 400,
              fontSize: isMobile ? 52 : 88, lineHeight: 0.92, letterSpacing: '-0.025em' }}>
              A periodical,<br />
              <span style={{ fontStyle: 'italic', color: LAC.amber }}>not a feed.</span>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <p style={{ color: '#B6B0A0', fontSize: 15, lineHeight: 1.55, margin: 0, maxWidth: 420 }}>
              Sundays at {SITE.shipTime}. Six minutes of reading, two hours of weekend. No medical content. No spam. Unsubscribe any time.
            </p>
            <EmailField onSubmit={(em) => { onNav && onNav('subscribe'); }} cta="Subscribe" />
            <Mono color="#7B7460" size={10}>or, <span onClick={() => onNav && onNav('subscribe')} style={{ color: LAC.amber, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3 }}>see the paid tiers →</span></Mono>
          </div>
        </div>

        {/* asterism */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: isMobile ? 40 : 64 }}>
          <Asterism width={isMobile ? 160 : 220} color={LAC.paper} />
        </div>
      </section>

      <footer style={{ background: LAC.paper2, borderTop: `1px solid ${LAC.line}` }}>
        <div style={{ maxWidth: 1320, margin: '0 auto',
          padding: isMobile ? '24px 20px' : '28px 32px',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr 1fr 1fr',
          gap: isMobile ? 24 : 32, alignItems: 'start',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <HorizonGlyph size={18} time="am" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <Mono color={LAC.midnight}>LifeAfterCall · The Horizon Brief</Mono>
              <Mono color={LAC.dim} size={10}>{SITE.issuesRange} · Vol. {SITE.volume} · est. {SITE.estYear}</Mono>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Mono color={LAC.midnight} size={10}>The periodical</Mono>
            <Mono color={LAC.dim} as="a" onClick={() => onNav('latest')} style={{ cursor: 'pointer' }}>This week's issue</Mono>
            <Mono color={LAC.dim} as="a" onClick={() => onNav('archive')} style={{ cursor: 'pointer' }}>Archive · all issues</Mono>
            <Mono color={LAC.dim} as="a" onClick={() => onNav('about')} style={{ cursor: 'pointer' }}>About · colophon</Mono>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Mono color={LAC.midnight} size={10}>Reach the desk</Mono>
            <Mono color={LAC.dim} as="a" onClick={() => onNav('contact')} style={{ cursor: 'pointer' }}>Submit a tip</Mono>
            <Mono color={LAC.dim} as="a" onClick={() => onNav('contact')} style={{ cursor: 'pointer' }}>Press · interview</Mono>
            <Mono color={LAC.dim} as="a" onClick={() => onNav('contact')} style={{ cursor: 'pointer' }}>A correction</Mono>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6,
            alignItems: isMobile ? 'flex-start' : 'flex-end',
            textAlign: isMobile ? 'left' : 'right' }}>
            <Mono color={LAC.dim} size={10}>© {year} · lifeaftercall.com</Mono>
            <Mono color={LAC.dim} size={10}>Set in Instrument Serif &amp; Bricolage Grotesque.</Mono>
            <Mono color={LAC.dim} size={10}>No tracking. No newsletters but ours.</Mono>
          </div>
        </div>
      </footer>
    </React.Fragment>
  );
}

Object.assign(window, { Topbar, Footer });