// site/site-chrome.jsx, Top nav + footer used on every page.

// Ticket-buyer self-serve: resend your tickets with email + last 4 of card.
// Surfaced in the header, mobile drawer, footer, and the contact page so
// ticket buyers self-serve instead of emailing support or the sales form.
const TICKET_LOOKUP_URL = 'https://app.fairs.com/ticket-lookup';

const NAV_ITEMS = [
  { id: 'who-we-are', label: 'Who We Are' },
  { id: 'platform',  label: 'Platform', groups: [
    { heading: 'Grow your fair', items: [
      { id: 'websites',     label: 'Websites' },
      { id: 'ticketing',    label: 'Ticketing' },
      { id: 'social',       label: 'Social' },
      { id: 'marketing',    label: 'Marketing' },
    ] },
    { heading: 'Run your fair', items: [
      { id: 'vendors',      label: 'Vendor Management' },
      { id: 'sponsors',     label: 'Sponsor Management' },
      { id: 'hardware',     label: 'Kiosks + Access Control' },
    ] },
  ] },
  { id: 'solutions', label: 'Solutions', items: [
    { id: 'managers',   label: 'For Fair Managers' },
    { id: 'boards',     label: 'For Fair Boards' },
    { id: 'marketers',  label: 'For Marketing Managers' },
  ] },
  { id: 'resources', label: 'Resources', items: [
    { id: 'blog',          label: 'Blog' },
    { id: 'case-studies',  label: 'Case Studies' },
    { id: 'news',          label: 'In the News' },
    { id: 'rv-tour',       label: 'RV Tour' },
    { id: 'ymtd',          label: 'You Make the Difference' },
    // INTEGRATIONS-DISABLED (2026-07-09): hidden from nav — un-comment to restore. See site-app.jsx / TODO.md.
    // { id: 'integrations',  label: 'Integrations' },
  ] },
  { id: 'about',     label: 'About' },
];

function SiteNav({ current, onNav }) {
  const [openMenu, setOpenMenu] = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobileSub, setMobileSub] = React.useState({}); // { [itemId]: bool }

  // Close drawer whenever the page changes
  React.useEffect(() => { setMobileOpen(false); }, [current]);
  // Lock body scroll while the drawer is open
  React.useEffect(() => {
    if (typeof document === 'undefined') return;
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const link = (active) => ({
    fontSize: 16, fontWeight: 600,
    color: S.ink, textDecoration: 'none',
    opacity: active ? 1 : 0.72,
    position: 'relative', padding: '8px 4px',
    cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4,
  });
  const goTo = (id) => { onNav(id); setMobileOpen(false); setOpenMenu(null); };

  return (
    <>
    {/* Site-wide red announcement strip */}
    <div style={{
      background: S.red, color: S.ink, padding: '8px 18px',
      fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
      letterSpacing: '0.18em', textTransform: 'uppercase', textAlign: 'center',
    }}>
      ★ Over 180 fairs trust Fairs.com — contact us to find out why! ★
    </div>
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(253,249,240,0.94)',
      backdropFilter: 'blur(10px)',
      borderBottom: `1px solid ${S.border}`,
    }}>
      <div style={{
        maxWidth: 1440, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          <a onClick={(e) => { e.preventDefault(); onNav('home'); }} href="#home" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none' }}>
            <img src="assets/logo-color.svg" alt="Fairs.com" style={{ height: 22, display: 'block' }} />
          </a>
          <nav className="site-nav-desktop" style={{ display: 'flex', gap: 22 }}>
            {NAV_ITEMS.map(item => {
              const subItems = item.items || (item.groups ? item.groups.flatMap(g => g.items) : null);
              const active = item.id === current || (subItems && subItems.some(s => s.id === current));
              const hasMenu = !!subItems;
              const renderLink = (sub) => (
                <a key={sub.id} href={`#${sub.id}`}
                  onClick={(e) => { e.preventDefault(); onNav(sub.id); setOpenMenu(null); }}
                  style={{
                    display: 'block', padding: '10px 14px', fontSize: 16, fontWeight: 600,
                    color: S.ink, textDecoration: 'none', borderRadius: 6, whiteSpace: 'nowrap',
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.background = S.cream2}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  {sub.label}
                </a>
              );
              return (
                <div key={item.id}
                  onMouseEnter={() => hasMenu && setOpenMenu(item.id)}
                  onMouseLeave={() => hasMenu && setOpenMenu(null)}
                  style={{ position: 'relative' }}>
                  <a href={`#${item.id}`}
                     onClick={(e) => { e.preventDefault(); onNav(item.id); }}
                     style={link(active)}>
                    {item.label}
                    {hasMenu && <Ico name="chevronDown" size={12} strokeWidth={2} style={{ opacity: 0.6 }} />}
                    {active && (
                      <span style={{
                        position: 'absolute', left: 4, right: 4, bottom: 0,
                        height: 2, background: S.red, borderRadius: 1,
                      }} />
                    )}
                  </a>
                  {hasMenu && openMenu === item.id && (
                    <div style={{
                      position: 'absolute', top: '100%', left: -12,
                      paddingTop: 8, zIndex: 60,
                    }}>
                      {item.groups ? (
                        <div style={{
                          background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 12,
                          padding: 12, boxShadow: `5px 5px 0 0 ${S.red}`, display: 'flex', gap: 8,
                        }}>
                          {item.groups.map((g, gi) => (
                            <div key={g.heading} style={{
                              minWidth: 210, paddingLeft: gi === 0 ? 0 : 16,
                              borderLeft: gi === 0 ? 'none' : `1px solid ${S.border}`,
                            }}>
                              <div style={{
                                fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red,
                                letterSpacing: '0.16em', textTransform: 'uppercase', padding: '6px 14px 8px',
                              }}>{g.heading}</div>
                              {g.items.map(renderLink)}
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div style={{
                          background: S.cream, border: `1.5px solid ${S.ink}`, borderRadius: 12,
                          padding: 8, minWidth: 240, boxShadow: `5px 5px 0 0 ${S.red}`,
                        }}>
                          {item.items.map(renderLink)}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </nav>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <a className="site-nav-findtickets" href={TICKET_LOOKUP_URL} target="_blank" rel="noopener"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, marginRight: 4,
              fontSize: 16, fontWeight: 600, color: S.ink, opacity: 0.8, textDecoration: 'none', whiteSpace: 'nowrap',
            }}>
            <Ico name="ticket" size={16} color={S.red} strokeWidth={1.8} /> Find my tickets
          </a>
          <span className="site-nav-login">
            <StubBtn size="md" variant="cream" href="https://manager.fairs.com/login" target="_blank">Login</StubBtn>
          </span>
          <StubBtn size="md" onClick={() => onNav('contact')}>Book a demo</StubBtn>
          {/* Hamburger, hidden on desktop, shown ≤ 720px via CSS */}
          <button className="site-nav-mobile-btn" onClick={() => setMobileOpen(o => !o)}
            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
            style={{
              display: 'none', // overridden by media query in site.html
              alignItems: 'center', justifyContent: 'center',
              width: 42, height: 42, padding: 0,
              background: 'transparent', border: `1.5px solid ${S.ink}`, borderRadius: 8,
              cursor: 'pointer', color: S.ink,
            }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              {mobileOpen ? (
                <><path d="M6 6l12 12" /><path d="M18 6l-12 12" /></>
              ) : (
                <><path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h16" /></>
              )}
            </svg>
          </button>
        </div>
      </div>
    </header>

    {/* Mobile drawer */}
    {mobileOpen && (
      <div style={{
        position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 80,
        width: '100vw', maxWidth: '100%',
        background: S.cream,
        overflowY: 'auto', overflowX: 'hidden',
        paddingTop: 80,
      }}>
        <button onClick={() => setMobileOpen(false)} aria-label="Close menu" style={{
          position: 'absolute', top: 16, right: 18,
          width: 42, height: 42, padding: 0,
          background: 'transparent', border: `1.5px solid ${S.ink}`, borderRadius: 8,
          cursor: 'pointer', color: S.ink,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
            <path d="M6 6l12 12" /><path d="M18 6l-12 12" />
          </svg>
        </button>
        <div style={{ padding: '8px 24px 48px' }}>
          {NAV_ITEMS.map(item => {
            const subItems = item.items || (item.groups ? item.groups.flatMap(g => g.items) : null);
            const active = item.id === current || (subItems && subItems.some(s => s.id === current));
            const hasMenu = !!subItems;
            const subOpen = mobileSub[item.id];
            return (
              <div key={item.id} style={{ borderBottom: `1px solid ${S.border}` }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <a href={`#${item.id}`}
                    onClick={(e) => { e.preventDefault(); goTo(item.id); }}
                    style={{
                      display: 'block', flex: 1, padding: '18px 4px',
                      fontFamily: 'var(--font-display)', fontWeight: 500,
                      fontSize: 22, color: S.ink, textDecoration: 'none',
                      opacity: active ? 1 : 0.85,
                    }}>
                    {item.label}
                  </a>
                  {hasMenu && (
                    <button onClick={() => setMobileSub(s => ({ ...s, [item.id]: !s[item.id] }))}
                      aria-label={subOpen ? 'Collapse' : 'Expand'}
                      style={{
                        width: 42, height: 42, padding: 0, marginRight: -8,
                        background: 'transparent', border: 0, cursor: 'pointer',
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        color: S.ink, transform: subOpen ? 'rotate(180deg)' : 'rotate(0)',
                        transition: 'transform .15s',
                      }}>
                      <Ico name="chevronDown" size={18} strokeWidth={2.2} />
                    </button>
                  )}
                </div>
                {hasMenu && subOpen && (
                  <div style={{ padding: '0 0 16px 14px' }}>
                    {(item.groups || [{ heading: null, items: item.items }]).map(g => (
                      <div key={g.heading || 'flat'}>
                        {g.heading && (
                          <div style={{
                            fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, color: S.red,
                            letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.9, padding: '12px 0 4px',
                          }}>{g.heading}</div>
                        )}
                        {g.items.map(sub => (
                          <a key={sub.id} href={`#${sub.id}`}
                            onClick={(e) => { e.preventDefault(); goTo(sub.id); }}
                            style={{
                              display: 'block', padding: '10px 0',
                              fontSize: 16, fontWeight: 600, color: S.ink,
                              textDecoration: 'none', opacity: 0.82,
                            }}>
                            {sub.label}
                          </a>
                        ))}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12 }}>
            <StubBtn size="md" onClick={() => goTo('contact')}>Book a demo</StubBtn>
            <StubBtn size="md" variant="cream" href="https://manager.fairs.com/login" target="_blank">Login</StubBtn>
            <a href={TICKET_LOOKUP_URL} target="_blank" rel="noopener"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 4px', fontSize: 16, fontWeight: 700, color: S.ink, textDecoration: 'none' }}>
              <Ico name="ticket" size={18} color={S.red} strokeWidth={1.8} /> Bought tickets to a fair? Find my tickets →
            </a>
          </div>
        </div>
      </div>
    )}
    </>
  );
}

function SiteFooter({ onNav }) {
  const col = (title, items) => (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(([label, id], i) => (
          id && id.startsWith('http') ? (
            <a key={i} href={id} target="_blank" rel="noopener"
              style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textDecoration: 'none', cursor: 'pointer' }}>
              {label}
            </a>
          ) : (
            <a key={i} href={`#${id || ''}`}
              onClick={(e) => { e.preventDefault(); if (id) onNav(id); }}
              style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textDecoration: 'none', cursor: 'pointer' }}>
              {label}
            </a>
          )
        ))}
      </div>
    </div>
  );
  const colGrouped = (title, groups) => (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, color: S.red, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {groups.map(([heading, items]) => (
          <div key={heading}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 10 }}>{heading}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {items.map(([label, id], i) => (
                <a key={i} href={`#${id || ''}`}
                  onClick={(e) => { e.preventDefault(); if (id) onNav(id); }}
                  style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', textDecoration: 'none', cursor: 'pointer' }}>
                  {label}
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
  return (
    <footer style={{ background: '#0C0B0C', color: '#fff', padding: '88px 64px 40px', position: 'relative', overflow: 'hidden' }}>
      {/* Faint cow watermark in footer (hidden on mobile to avoid edge clipping) */}
      <div className="footer-cow-watermark" style={{ position: 'absolute', right: -40, top: 40, opacity: 0.06, pointerEvents: 'none' }}>
        <img src={PHOTOS.cowMascot} style={{ width: 360, height: 'auto', filter: 'invert(1) saturate(0)' }} alt="" />
      </div>
      <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.7fr 1fr 1fr 1fr 1fr', gap: 48 }}>
        <div>
          <img src="assets/logo-red.svg" style={{ height: 24 }} alt="Fairs.com" />
          <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 16, color: 'rgba(255,255,255,0.62)', marginTop: 16, maxWidth: 320, lineHeight: 1.5 }}>
            The nation's only platform built specifically for fairs.<br />Where tradition meets technology.
          </p>
          <div style={{ marginTop: 20, fontSize: 12, color: 'rgba(255,255,255,0.5)', lineHeight: 1.55 }}>
            3737 Easton Market #1043<br />
            Columbus, OH 43219<br />
            <a href="mailto:support@fairs.com" style={{ color: 'rgba(255,255,255,0.75)' }}>support@fairs.com</a>
          </div>
          <a href={TICKET_LOOKUP_URL} target="_blank" rel="noopener"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 14, fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>
            <Ico name="ticket" size={14} color={S.red} strokeWidth={1.8} /> Bought tickets? Find my tickets →
          </a>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            {['linkedin', 'instagram', 'facebook'].map(s => (
              <a key={s} href="#" onClick={(e) => e.preventDefault()} style={{ width: 36, height: 36, borderRadius: 999, border: `1px solid ${S.borderD}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.7)' }}>
                <Ico name={s} size={14} />
              </a>
            ))}
          </div>
        </div>
        {colGrouped('Platform', [
          ['Grow your fair', [
            ['Websites',   'websites'],
            ['Ticketing',  'ticketing'],
            ['Social',     'social'],
            ['Marketing',  'marketing'],
          ]],
          ['Run your fair', [
            ['Vendor Management', 'vendors'],
            ['Sponsor Management', 'sponsors'],
            ['Kiosks + Access Control', 'hardware'],
          ]],
        ])}
        {col('Solutions', [
          ['Fair Managers',      'managers'],
          ['Fair Boards',        'boards'],
          ['Marketing Managers', 'marketers'],
        ])}
        {col('Resources', [
          ['Blog',                       'blog'],
          ['Case studies',               'case-studies'],
          ['In the news',                'news'],
          ['RV tour',                    'rv-tour'],
          ['You Make the Difference',    'ymtd'],
          // INTEGRATIONS-DISABLED (2026-07-09): hidden from footer — un-comment to restore. See site-app.jsx / TODO.md.
          // ['Integrations',               'integrations'],
        ])}
        {col('Company', [
          ['About',     'about'],
          ['Contact',   'contact'],
          ['Find my tickets', TICKET_LOOKUP_URL],
        ])}
      </div>
      <div style={{ position: 'relative', maxWidth: 1320, margin: '64px auto 0', paddingTop: 24, borderTop: `1px dashed ${S.borderD}`, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.04em' }}>
        <div>© 2026 Fairs.com. All rights reserved.</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="#privacy" onClick={(e) => { e.preventDefault(); onNav('privacy'); }} style={{ color: 'inherit' }}>Privacy</a>
          <a href="#terms" onClick={(e) => { e.preventDefault(); onNav('terms'); }} style={{ color: 'inherit' }}>Terms</a>
          {/* Cookies: intentionally inert until a real cookie policy exists (Shane, 2026-07-09).
              Cookie disclosures currently live in the Privacy Policy. */}
          <a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'inherit' }}>Cookies</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteNav, SiteFooter, NAV_ITEMS, TICKET_LOOKUP_URL });