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

const NAV_ITEMS = [
  { key: 'services', label: 'Services' },
  { key: 'approach', label: 'Approach' },
  { key: 'contact', label: 'Contact' },
];

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

  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={navClick(setPage, '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: 'baseline', 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
          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>
      </div>
    </nav>
  );
};

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', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
      }}>
        <span style={{ fontFamily: 'var(--ff-body)', fontSize: 11, color: 'rgba(245,245,243,0.35)', letterSpacing: '0.06em' }}>
          © 2025 Trellum Ltd · Registered in England
        </span>
        <span style={{ fontFamily: 'var(--ff-body)', fontSize: 11, color: 'rgba(245,245,243,0.35)' }}>
          v1.0 · Brand April 2025
        </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>
        <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.75)', lineHeight: 1.7,
            maxWidth: 580, margin: 0,
          }}>{body}</p>
        )}
        <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {primaryLabel && (
            <Button variant="primary" onClick={primaryOnClick} ariaLabel={primaryLabel}>{primaryLabel}</Button>
          )}
          {secondaryLabel && (
            <Button variant="ghostDark" onClick={secondaryOnClick} ariaLabel={secondaryLabel}>{secondaryLabel}</Button>
          )}
        </div>
      </InView>
    </div>
  </section>
);

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