/* FORUM website — Header + Footer chrome. Exports window.ForumHeader, window.ForumFooter. */

function NavItem({ item }) {
  const [open, setOpen] = React.useState(false);
  const hasMenu = item.items && item.items.length > 0;
  return (
    <div
      style={{ position: 'relative' }}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <a href={item.href} style={{
        display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 0',
        fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
        color: open ? '#fff' : 'rgba(234,241,250,0.86)', textDecoration: 'none',
        transition: 'color var(--duration-fast) var(--ease-standard)',
      }}>
        {item.label}
        {hasMenu && (
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
            style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform var(--duration-fast) var(--ease-standard)', opacity: 0.8 }}>
            <polyline points="6 9 12 15 18 9" />
          </svg>
        )}
      </a>
      {hasMenu && (
        <div style={{
          position: 'absolute', top: '100%', left: '50%', transform: open ? 'translate(-50%, 0)' : 'translate(-50%, 8px)',
          paddingTop: 14, minWidth: 380,
          opacity: open ? 1 : 0, visibility: open ? 'visible' : 'hidden', pointerEvents: open ? 'auto' : 'none',
          transition: 'opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard)',
          zIndex: 60,
        }}>
          <div style={{
            display: 'flex', gap: 14,
            background: 'rgba(8,20,46,0.92)', backdropFilter: 'blur(14px) saturate(140%)',
            border: '1px solid rgba(125,186,246,0.18)', borderRadius: 'var(--radius-lg)',
            boxShadow: 'var(--shadow-lg)', padding: 12, overflow: 'hidden',
          }}>
            {/* Dropdown photo */}
            <div style={{ width: 150, height: 188, flex: '0 0 auto', borderRadius: 10, overflow: 'hidden', flexShrink: 0 }}>
              {item.photo
                ? <img src={item.photo} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                : <image-slot id={item.photoId} shape="rounded" radius="10" placeholder={item.photoLabel || 'Drop a photo'} style={{ width: '100%', height: '100%', display: 'block' }}></image-slot>
              }
            </div>
            <div style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', minWidth: 0 }}>
              <div style={{
                padding: '0 10px 8px', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
                letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--forum-sky-300)',
              }}>{item.label}</div>
              {item.items.map((sub) => (
                <a key={sub.l} href={sub.href} style={{
                  display: 'block', padding: '9px 10px', borderRadius: 'var(--radius-sm)',
                  fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 500,
                  color: 'var(--forum-sky-100)', textDecoration: 'none', whiteSpace: 'nowrap',
                  transition: 'background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(125,186,246,0.14)'; e.currentTarget.style.color = '#fff'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--forum-sky-100)'; }}>
                  {sub.l}
                </a>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function ForumHeader({ logoSrc, onCta }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = [
    { label: 'Events', href: '#', photoId: 'nav-photo-events', photo: 'media/gala-ballroom.jpg', items: [
      { l: 'Upcoming events', href: '#' },
      { l: 'Past events', href: '#' },
      { l: 'Event production', href: '#' },
    ] },
    { label: 'Advisory', href: '#', photoId: 'nav-photo-advisory', photo: 'media/advisory-photo.jpg', items: [
      { l: 'Advisory overview', href: '#' },
      { l: 'Brand identity', href: '#' },
      { l: 'Work with us', href: '#' },
    ] },
    { label: 'Platform', href: '#', photoId: 'nav-photo-platform', photo: 'media/platform-photo.jpg', items: [
      { l: 'How it works', href: '#' },
      { l: 'Request a demo', href: '#' },
    ] },
    { label: 'Case Studies', href: '#' },
    { label: 'Resources', href: '#', photoId: 'nav-photo-resources', photo: 'uploads/shutterstock_1968875902.jpg', items: [
      { l: 'All resources', href: '#' },
      { l: 'Blog', href: '#' },
      { l: 'Reports', href: '#' },
    ] },
    { label: 'About', href: '#', photoId: 'nav-photo-about', photo: 'uploads/shutterstock_2604006819.jpg', items: [
      { l: 'Overview', href: '#' },
      { l: 'Mission', href: '#' },
      { l: 'Team', href: '#' },
    ] },
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard)',
      background: scrolled ? 'linear-gradient(90deg, rgba(12,34,80,0.92) 0%, rgba(23,72,166,0.88) 100%)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(125,186,246,0.16)' : '1px solid transparent',
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: '16px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center' }}>
          <img src="media/forum-silver-header.png" alt="FORUM — Events · Advisory · Platform"
            style={{ height: 51, display: 'block' }} />
        </a>
        <nav style={{ display: 'flex', gap: 28 }}>
          {nav.map((n) => (<NavItem key={n.label} item={n} scrolled={scrolled} />))}
        </nav>
        <Button variant="primary" size="sm" onClick={onCta}>Work with us</Button>
      </div>
    </header>
  );
}

function ForumFooter({ logoSrc }) {
  const cols = [
    { h: 'Company', links: [
      { l: 'About', href: '/about' },
      { l: 'Mission', href: '/about/mission' },
      { l: 'Team', href: '/about/team' },
      { l: 'Work With Us', href: '/work-with-us' },
    ] },
    { h: 'Services', links: [
      { l: 'Events', href: '/events' },
      { l: 'Advisory', href: '/services/advisory' },
      { l: 'Platform', href: '/platform' },
      { l: 'Case Studies', href: '/casestudies' },
    ] },
    { h: 'Resources', links: [
      { l: 'Blog', href: '/blog' },
      { l: 'Reports', href: '/resources/reports' },
      { l: 'Podcasts', href: '/resources' },
    ] },
  ];
  return (
    <footer style={{ background: 'linear-gradient(135deg, #0E2A5E 0%, #1E3A8A 40%, #3B1FA0 100%)', color: 'var(--forum-white)' }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px 32px 40px',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40,
      }}>
        <div>
          <img src="media/forum-silver-full.png" alt="FORUM — Events · Advisory · Platform — Connect. Scale. Win."
            style={{ height: 86, marginBottom: 16, display: 'block' }} />
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{
              fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
              letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase',
              color: 'var(--forum-sky-300)', marginBottom: 14,
            }}>{c.h}</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.links.map((item) => (
                <li key={item.l}><a href={item.href} style={{
                  fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--forum-sky-100)', textDecoration: 'none',
                }}>{item.l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--forum-navy-700)' }}>
        <div style={{
          maxWidth: 'var(--container-max)', margin: '0 auto', padding: '20px 32px',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--forum-stone)',
        }}>
          <a href="https://www.linkedin.com/company/govforum/" target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 38, height: 38, borderRadius: 7, background: '#0A66C2', color: '#fff', textDecoration: 'none' }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
            <span>© 2026 FORUM. All rights reserved.</span>
            <span style={{ display: 'flex', gap: 8 }}>
              <a href="/terms" style={{ color: 'var(--forum-stone)', textDecoration: 'none' }}>Terms</a> ·
              <a href="/privacy" style={{ color: 'var(--forum-stone)', textDecoration: 'none' }}>Privacy</a> ·
              <a href="/sitemap.xml" style={{ color: 'var(--forum-stone)', textDecoration: 'none' }}>Sitemap</a>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.ForumHeader = ForumHeader;
window.ForumFooter = ForumFooter;