/* ─────────────────────────────────────────────────────────
   Civik — shared page chrome: mark, lockup, Nav, Footer.
   Kept close to Civik Feed.html so both pages match exactly.
   ───────────────────────────────────────────────────────── */

function proTokenValid() {
  try {
    const raw = localStorage.getItem('gt-pro-token');
    if (!raw) return false;
    const payload = JSON.parse(atob(raw.split('.')[1]));
    return payload.exp && payload.exp * 1000 > Date.now();
  } catch (_) { return false; }
}

/* ── Mobile CSS (nav + footer, shared across all JSX pages) ── */
const CIVIK_NAV_FOOTER_CSS = `
@media (max-width: 768px) {
  .cv-nav-inner { padding: 14px 20px !important; }
  .cv-nav-center { display: none !important; }
  .cv-nav-right { display: none !important; }
  .cv-nav-hamburger { display: flex !important; align-items: center; justify-content: center; }
  .cv-nav-mobile { background: #1a1a1a; border-top: 1px solid rgba(255,255,255,0.08); }
  .cv-nav-mobile a {
    display: block; padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px; font-weight: 500;
    color: rgba(255,255,255,0.85); text-decoration: none;
  }
  .cv-nav-mobile-cta {
    display: block; margin: 16px 20px 20px;
    background: #B52D2D; color: #fff !important; padding: 12px 18px; border-radius: 8px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px; font-weight: 600; text-align: center; text-decoration: none;
    border-bottom: none !important;
  }
  .cv-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cv-footer-inner { padding: 48px 20px 28px !important; }
  .cv-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}`;

/* Civik mark + lockup — real logo image (not a redraw).
   variant: "light" (white C + white wordmark, for dark bg)
          | "dark"  (black C + black wordmark, for light bg) */
function CivikMark({ size = 32, variant = "light", style }) {
  const src = variant === 'dark' ? '/assets/civik-mark-dark.png' : '/assets/civik-mark.png';
  return (
    <img src={src} alt="Civik" width={Math.round(size * 297/322)} height={size}
         style={{ display: 'block', ...style }} />
  );
}

function CivikLockup({ height = 32, variant = "light", style }) {
  const src = variant === 'dark' ? '/assets/civik-lockup-dark.png' : '/assets/civik-lockup.png';
  // Lockup aspect 737:322 ≈ 2.289
  return (
    <img src={src} alt="Civik" width={Math.round(height * 737/322)} height={height}
         style={{ display: 'block', ...style }} />
  );
}

function Nav({ active = 'feed' }) {
  const [authed, setAuthed] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => { if (proTokenValid()) setAuthed(true); }, []);
  const links = [
    { id: 'feed',   label: 'Feed',   href: '/feed' },
    { id: 'cities', label: 'Cities', href: '/cities' },
    { id: 'weekly', label: 'Weekly', href: '/weekly' },
    { id: 'pro',    label: 'Pro',    href: authed ? '/pro/dashboard' : '/pricing' },
    { id: 'about',  label: 'About',  href: '/about' },
  ];
  return (
    <React.Fragment>
    <ChromeMobileStyles />
    <header style={{ background: '#141414', borderBottom: '1px solid rgba(255,255,255,0.06)', position: 'sticky', top: 0, zIndex: 40 }}>
      <style dangerouslySetInnerHTML={{ __html: CIVIK_NAV_FOOTER_CSS }} />
      <div className="cv-nav-inner" style={{ maxWidth: 1280, margin: '0 auto', padding: '18px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="/" style={{ textDecoration: 'none', display: 'inline-flex' }}><CivikLockup height={30} variant="light" /></a>
        <nav className="cv-nav-center" style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
          {links.map((l) => {
            const isActive = active === l.id;
            return (
              <a key={l.id} href={l.href} style={{
                position: 'relative', fontFamily: "'DM Sans',system-ui,sans-serif",
                fontSize: 13.5, fontWeight: 500,
                color: isActive ? '#fff' : 'rgba(255,255,255,0.62)',
                textDecoration: 'none', letterSpacing: '0.01em', padding: '6px 0'
              }}>
                {l.label}
                {isActive && <span style={{ position: 'absolute', left: 0, right: 0, bottom: -6, height: 1.5, background: 'linear-gradient(90deg, #B52D2D 0%, #E35532 55%, #F5982A 100%)' }} />}
              </a>
            );
          })}
        </nav>
        <div className="cv-nav-right">
          {authed ? (
            <a href="/pro/dashboard" className="cv-nav-getpro" style={{display:'inline-flex',alignItems:'center',gap:8,background:'#B52D2D',color:'#fff',fontFamily:"'DM Sans',system-ui,sans-serif",fontSize:13,fontWeight:600,letterSpacing:'0.02em',padding:'10px 18px',borderRadius:8,textDecoration:'none',whiteSpace:'nowrap'}}>Dashboard →</a>
          ) : (
            <div style={{display:'flex',alignItems:'center',gap:12}}>
              <a href="/login" className="cv-nav-signin" style={{fontFamily:"'DM Sans',system-ui,sans-serif", fontSize:13, fontWeight:500, color:'rgba(255,255,255,0.72)', textDecoration:'none', letterSpacing:'0.01em'}} onMouseEnter={e=>e.currentTarget.style.color='#fff'} onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,0.72)'}>Sign in</a>
              <a href="/pricing" className="cv-nav-getpro" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: '#B52D2D', color: '#fff',
                fontFamily: "'DM Sans',system-ui,sans-serif",
                fontSize: 13, fontWeight: 600, letterSpacing: '0.02em',
                padding: '10px 18px', borderRadius: 8, textDecoration: 'none',
                whiteSpace: 'nowrap',
              }}>Get Pro</a>
            </div>
          )}
        </div>
        {/* Hamburger — hidden on desktop via inline style, shown by mobile CSS */}
        <button
          className="cv-nav-hamburger"
          onClick={() => setMenuOpen(m => !m)}
          style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: '6px', color: '#fff', fontSize: 22, lineHeight: 1 }}
          aria-label="Toggle navigation menu"
        >{menuOpen ? '✕' : '☰'}</button>
      </div>
      {/* Mobile dropdown menu */}
      {menuOpen && (
        <nav className="cv-nav-mobile">
          {links.map(l => (
            <a key={l.id} href={l.href}>{l.label}</a>
          ))}
          <a href={authed ? '/pro/dashboard' : '/pricing'} className="cv-nav-mobile-cta">
            {authed ? 'Dashboard →' : 'Get Pro →'}
          </a>
        </nav>
      )}
    </header>
    </React.Fragment>
  );
}

function AdminButton() { return null; }

function Footer() {
  const footerLinks = {
    'Platform': {
      'Feed': '/feed',
      'Cities': '/cities',
      'Civik Pro': '/pricing',
      'API · coming soon': '#',
    },
    'Organization': {
      'About': '/about',
      'Civik': 'https://civik.io',
      'Newsroom': 'mailto:chris@civik.io',
      'Contact': 'mailto:chris@civik.io',
    },
    'Trust + legal': {
      'Sources + methods': '/about',
      'Privacy': '/privacy',
      'Terms': '/terms',
      'Accessibility': '/accessibility',
    },
  };
  return (
    <footer style={{ background: '#141414', color: 'rgba(255,255,255,0.55)' }}>
      <div className="cv-footer-inner" style={{ maxWidth: 1280, margin: '0 auto', padding: '72px 40px 36px' }}>
        <div className="cv-footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
          <div>
            <CivikLockup height={42} variant="light" />
            <p style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontStyle: 'italic', fontWeight: 300, fontSize: 16, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', margin: '22px 0 20px', maxWidth: 360 }}>Civic intelligence for Arizona.</p>
            <p style={{ fontFamily: "'DM Sans',system-ui,sans-serif", fontSize: 13, lineHeight: 1.6, color: 'rgba(255,255,255,0.45)', margin: 0, maxWidth: 340 }}>
              Civik tracks every significant government action across Greater Phoenix — votes, contracts, ordinances, and civic decisions — so professionals always know what happened and what's next.
            </p>
          </div>
          {Object.entries(footerLinks).map(([head, links]) => (
            <div key={head}>
              <div style={{ fontFamily: "'DM Sans',system-ui,sans-serif", fontSize: 10.5, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', marginBottom: 18 }}>{head}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {Object.entries(links).map(([label, href]) => (
                  <li key={label}><a href={href} style={{ fontFamily: "'DM Sans',system-ui,sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.72)', textDecoration: 'none' }}>{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="cv-footer-bottom" style={{ paddingTop: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', fontFamily: "'DM Sans',system-ui,sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
            <span>© 2026 Civik LLC</span>
            <span style={{ width: 1, height: 10, background: 'rgba(255,255,255,0.12)' }} />
            <span>Phoenix, Arizona</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'linear-gradient(135deg, #F5982A, #B52D2D)' }} />
            <span style={{ letterSpacing: '0.14em', textTransform: 'uppercase', fontSize: 10.5, fontWeight: 700, color: 'rgba(255,255,255,0.62)' }}>All sources cited. All votes on the record.</span>
          </div>
        </div>
        {/* Admin — faint, bottom-right */}
        <a href="/admin" style={{
          display:'block', textAlign:'center', marginTop:24,
          fontFamily:"'DM Sans',system-ui,sans-serif",
          fontSize:10, color:'rgba(255,255,255,0.12)',
          textDecoration:'none', letterSpacing:'0.08em',
        }}>admin</a>
        <AdminButton />
      </div>
    </footer>
  );
}

const CHROME_MOBILE_CSS = `
  @media (max-width: 768px) {
    .cv-nav-inner { padding: 18px 20px !important; }
    .cv-nav-center { display: none !important; }
    .cv-nav-signin { display: none !important; }
    .cv-nav-getpro { display: none !important; }
    .cv-nav-hamburger { display: inline-flex !important; }
    .cv-nav-mobile-menu {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200;
      background: #141414; display: flex; flex-direction: column;
      padding: 24px 24px 40px; gap: 0; overflow-y: auto;
    }
    .cv-nav-mobile-menu a {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 22px; font-weight: 600; color: rgba(255,255,255,0.88);
      text-decoration: none; padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: block;
    }
    .cv-footer-inner { padding: 48px 20px 32px !important; }
    .cv-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .cv-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .cv-cities-hero-inner { padding: 48px 20px 56px !important; }
    .cv-cities-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .cv-cities-grid-single { grid-template-columns: 1fr !important; }
    .cv-cities-region-bar { padding: 12px 16px !important; }
    .cv-coverage-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 20px !important; }
    .cv-about-two-col { grid-template-columns: 1fr !important; gap: 40px !important; }
    .cv-about-principles { grid-template-columns: 1fr !important; gap: 24px !important; }
    .cv-about-stats-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    .cv-about-stats-grid > div { border-left: none !important; border-bottom: 1px solid #EAE5DF !important; padding: 20px 16px !important; }
    .cv-about-closing-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 20px 80px !important; }
    .cv-about-closing-inner { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 24px !important; }
    .cv-about-rvp-card { grid-template-columns: 40px 1fr !important; }
    .cv-about-rvp-card > a { display: none !important; }
    .cv-pricing-card { grid-template-columns: 1fr !important; }
    .cv-pricing-card-divider { display: none !important; }
    .cv-pricing-included { grid-template-columns: 1fr !important; }
    .cv-pricing-audiences { grid-template-columns: 1fr !important; }
    .cv-weekly-subscribe-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding: 64px 20px !important; }
    .cv-weekly-numbers-card { grid-template-columns: 1fr !important; gap: 16px !important; }
    .cv-weekly-numbers-card > div:last-child { border-left: none !important; border-top: 1px solid #EAE5DF !important; padding-left: 0 !important; padding-top: 16px !important; }
    .cv-weekly-themes-grid { grid-template-columns: 1fr !important; }
    .cv-weekly-archive-row { grid-template-columns: auto 1fr auto !important; gap: 12px !important; }
    .cv-weekly-archive-row > div:nth-child(2) { display: none !important; }
    .cv-weekly-watchnext { grid-template-columns: 1fr !important; gap: 12px !important; }
    /* entry page — updated class names from two-column redesign */
    .cv-entry-cols { grid-template-columns: 1fr !important; padding: 20px 20px 56px !important; gap: 24px !important; }
    .cv-right-rail { position: static !important; order: -1; }
    .cv-related-grid { grid-template-columns: 1fr !important; }
  }
`;

function ChromeMobileStyles() {
  // Inject both the standalone mobile.css link (persistent, won't be lost by page edits)
  // and the inline CHROME_MOBILE_CSS as a belt-and-suspenders fallback.
  return React.createElement(React.Fragment, null,
    React.createElement('link', { rel: 'stylesheet', href: '/styles/mobile.css' }),
    React.createElement('style', { dangerouslySetInnerHTML: { __html: CHROME_MOBILE_CSS } })
  );
}

(function(){var _s='',_t;document.addEventListener('keydown',function(e){if(e.ctrlKey||e.metaKey||e.altKey)return;clearTimeout(_t);_s+=e.key.toLowerCase();if(_s.length>10)_s=_s.slice(-10);if(_s.endsWith('cocious')){_s='';window.location.href='/admin';}  _t=setTimeout(function(){_s='';},2000);});})();

Object.assign(window, { CivikMark, CivikLockup, Nav, Footer, AdminButton, proTokenValid, ChromeMobileStyles });