// Trellum — Nav, Footer, CTABand shared across pages

const NAV_ITEMS = [
  { key: 'oi', label: 'Operational Intelligence' },
  { key: 'aie', label: 'AI Engineering' },
  { key: 'pfi', label: 'PFI' },
  { key: 'block', label: 'Block' },
  { key: 'services', label: 'Services' },
  { key: 'approach', label: 'Approach' },
  { key: 'contact', label: 'Contact' },
];

const Nav = ({ page, setPage }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    const onResize = () => { if (window.innerWidth > 860) setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    window.addEventListener('resize', onResize);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      window.removeEventListener('resize', onResize);
      document.body.style.overflow = prevOverflow;
    };
  }, [menuOpen]);

  const closeAndNav = (key) => (e) => {
    setMenuOpen(false);
    navClick(setPage, key)(e);
  };

  return (
    <>
      <nav
        aria-label="Primary"
        style={{
          position: 'sticky', top: 0, zIndex: 50,
          background: 'var(--teal)', height: 64,
          padding: '0 48px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          borderBottom: scrolled ? '1px solid rgba(245,245,243,0.08)' : '1px solid rgba(245,245,243,0)',
          transition: 'border-color 240ms var(--ease-out)',
        }}
      >
        <a
          href={pagePath('home')}
          onClick={closeAndNav('home')}
          aria-label="Trellum — home"
          style={{ display: 'flex', alignItems: 'baseline', gap: 10, textDecoration: 'none', borderBottom: 'none' }}
        >
          <span style={{
            fontFamily: 'var(--ff-display)', fontSize: 22, color: 'var(--paper)',
            letterSpacing: '-0.01em', lineHeight: 1,
          }}>Trellum</span>
          <span className="hide-mob" style={{
            fontFamily: 'var(--ff-body)', fontSize: 9, fontWeight: 400,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--canton)',
          }}>Built Environment Advisory</span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          <div className="hide-mob" style={{ display: 'flex', gap: 32, alignItems: 'baseline' }}>
            {NAV_ITEMS.map((it) => (
              <a
                key={it.key}
                href={pagePath(it.key)}
                onClick={navClick(setPage, it.key)}
                className={`nav-link${page === it.key ? ' active' : ''}`}
                style={{
                  fontFamily: 'var(--ff-body)', fontSize: 13, fontWeight: 400,
                  color: 'var(--paper)', textDecoration: 'none', borderBottom: 'none',
                }}
                aria-current={page === it.key ? 'page' : undefined}
              >{it.label}</a>
            ))}
          </div>
          <a
            className="hide-mob"
            href={pagePath('contact')}
            onClick={navClick(setPage, 'contact')}
            aria-label="Request an assessment"
            style={{
              fontFamily: 'var(--ff-body)', fontSize: 12, fontWeight: 500,
              padding: '9px 16px', background: 'var(--canton)', color: 'var(--paper)',
              borderRadius: 4, textDecoration: 'none', borderBottom: 'none',
              transition: 'background 140ms var(--ease-out)',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = '#4F7771'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'var(--canton)'}
          >Request an assessment</a>
          <button
            type="button"
            className="show-mob nav-burger"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            aria-controls="mobile-nav-panel"
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span className={`burger-icon${menuOpen ? ' is-open' : ''}`} aria-hidden="true">
              <span /><span />
            </span>
          </button>
        </div>
      </nav>
      <div
        id="mobile-nav-panel"
        className={`mobile-nav-panel${menuOpen ? ' is-open' : ''}`}
        role="dialog"
        aria-modal="true"
        aria-label="Site navigation"
        aria-hidden={!menuOpen}
      >
        <div style={{ padding: '8px 24px 32px', display: 'flex', flexDirection: 'column' }}>
          {NAV_ITEMS.map((it) => (
            <a
              key={it.key}
              href={pagePath(it.key)}
              onClick={closeAndNav(it.key)}
              className={`mobile-nav-link${page === it.key ? ' active' : ''}`}
              tabIndex={menuOpen ? 0 : -1}
              aria-current={page === it.key ? 'page' : undefined}
            >{it.label}</a>
          ))}
          <a
            href={pagePath('contact')}
            onClick={closeAndNav('contact')}
            aria-label="Request an assessment"
            tabIndex={menuOpen ? 0 : -1}
            style={{
              fontFamily: 'var(--ff-body)', fontSize: 14, fontWeight: 500,
              padding: '14px 18px', background: 'var(--canton)', color: 'var(--paper)',
              borderRadius: 4, textDecoration: 'none', borderBottom: 'none',
              marginTop: 28, textAlign: 'center', letterSpacing: '0.01em',
            }}
          >Request an assessment</a>
        </div>
      </div>
    </>
  );
};

const Footer = ({ setPage }) => (
  <footer style={{ background: 'var(--teal)', padding: '56px 48px 32px' }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div
        style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 48, alignItems: 'flex-start',
        }}
        className="mob-stack"
      >
        <div>
          <div style={{ fontFamily: 'var(--ff-display)', fontSize: 28, color: 'var(--paper)', letterSpacing: '-0.01em' }}>Trellum</div>
          <div style={{ fontFamily: 'var(--ff-body)', fontSize: 10, fontWeight: 400, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--canton)', marginTop: 4 }}>
            Built Environment Advisory
          </div>
          <p style={{ fontFamily: 'var(--ff-body)', fontSize: 13, fontWeight: 300, color: 'rgba(245,245,243,0.6)', lineHeight: 1.7, marginTop: 20, maxWidth: 320 }}>
            Built for organisations that carry complex built environment obligations — contractual, statutory, or both.
          </p>
        </div>
        <FooterColumn title="Practices" setPage={setPage} items={[
          ['PFI & FM contracts', 'pfi'],
          ['Residential block management', 'block'],
        ]} />
        <FooterColumn title="Company" setPage={setPage} items={[
          ['Services', 'services'],
          ['Approach', 'approach'],
          ['Contact', 'contact'],
        ]} />
        <div>
          <Eyebrow>Direct</Eyebrow>
          <div style={{ fontFamily: 'var(--ff-body)', fontSize: 13, color: 'rgba(245,245,243,0.8)', marginTop: 14 }}>
            hello@trellum.co.uk
          </div>
          <div style={{ fontFamily: 'var(--ff-body)', fontSize: 12, color: 'rgba(245,245,243,0.45)', marginTop: 6 }}>
            Reply within 2 working days
          </div>
        </div>
      </div>
      <div style={{
        marginTop: 48, paddingTop: 20,
        borderTop: '1px solid rgba(245,245,243,0.1)',
        display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'baseline',
      }}>
        <span style={{ fontFamily: 'var(--ff-body)', fontSize: 10, color: 'rgba(245,245,243,0.40)', letterSpacing: '0.04em' }}>
          © 2026 Trellum Ltd
        </span>
        <span style={{ fontFamily: 'var(--ff-body)', fontSize: 10, color: 'rgba(245,245,243,0.40)', letterSpacing: '0.04em' }}>
          Registered in England and Wales · Company No. 7205778
        </span>
        <span style={{ fontFamily: 'var(--ff-body)', fontSize: 10, color: 'rgba(245,245,243,0.40)', letterSpacing: '0.04em' }}>
          Correspondence: <a href="mailto:hello@trellum.co.uk" style={{ color: 'rgba(245,245,243,0.50)', borderBottom: 'none', textDecoration: 'none' }}>hello@trellum.co.uk</a>
        </span>
      </div>
    </div>
  </footer>
);

const FooterColumn = ({ title, items, setPage }) => (
  <div>
    <Eyebrow>{title}</Eyebrow>
    <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map(([label, key]) => (
        <a
          key={label}
          href={pagePath(key)}
          onClick={navClick(setPage, key)}
          className="tr-link"
          style={{
            fontFamily: 'var(--ff-body)', fontSize: 13,
            color: 'rgba(245,245,243,0.65)',
            width: 'fit-content', textDecoration: 'none', borderBottom: 'none',
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--paper)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(245,245,243,0.65)'}
        >{label}</a>
      ))}
    </div>
  </div>
);

const CTABand = ({
  eyebrow, heading, body, primaryLabel, primaryOnClick,
  secondaryLabel, secondaryOnClick,
}) => (
  <section style={{ background: 'var(--teal)', padding: '80px 48px' }} className="mob-pad">
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <InView style={{ maxWidth: 780 }}>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 style={{
          fontFamily: 'var(--ff-display)', fontSize: 36,
          color: 'var(--paper)', letterSpacing: '-0.01em',
          lineHeight: 1.15, margin: '16px 0 20px', fontWeight: 400,
        }}>{heading}</h2>
        {body && (
          <p style={{
            fontFamily: 'var(--ff-body)', fontSize: 15, fontWeight: 300,
            color: 'rgba(245,245,243,0.85)', lineHeight: 1.7,
            maxWidth: 580, margin: 0,
          }}>{body}</p>
        )}
        <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {primaryLabel && (() => {
            const arrow = typeof primaryLabel === 'string' && primaryLabel.endsWith(' →');
            const text = arrow ? primaryLabel.slice(0, -2) : primaryLabel;
            return (
              <Button variant="primary" onClick={primaryOnClick} ariaLabel={typeof text === 'string' ? text : primaryLabel}>
                {text}{arrow && <Arrow />}
              </Button>
            );
          })()}
          {secondaryLabel && (() => {
            const arrow = typeof secondaryLabel === 'string' && secondaryLabel.endsWith(' →');
            const text = arrow ? secondaryLabel.slice(0, -2) : secondaryLabel;
            return (
              <Button variant="ghostDark" onClick={secondaryOnClick} ariaLabel={typeof text === 'string' ? text : secondaryLabel}>
                {text}{arrow && <Arrow />}
              </Button>
            );
          })()}
        </div>
      </InView>
    </div>
  </section>
);

Object.assign(window, { Nav, Footer, CTABand });