// Footer.jsx — Ink footer, wordmark + nav + fine print
function Footer({ onNavigate = () => {} }) {
  const firmLinks = ['Home', 'Services', 'About', 'Contact'];

  return (
    <footer style={{ background: T.ink, color: T.mute, borderTop: `1px solid ${T.border_d}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '72px 32px 32px' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 48, alignItems: 'start',
        }}>
          <div>
            <WordmarkInline size={28} onDark />
            <p style={{
              fontFamily: F.body, fontSize: 15, lineHeight: 1.6,
              color: T.mute, margin: '20px 0 0', maxWidth: 340,
            }}>
              Fractional CFO leadership for owners running $2M–$20M businesses. Remote-first, primarily Texas.
            </p>
          </div>

          <div>
            <Eyebrow tone="mute">Firm</Eyebrow>
            <FooterLinks items={firmLinks} onNavigate={onNavigate} />
          </div>

          <div>
            <Eyebrow tone="mute">Direct</Eyebrow>
            <div style={{
              fontFamily: F.mono, fontSize: 13, color: T.mute,
              marginTop: 16, lineHeight: 2, letterSpacing: '0.02em',
            }}>
              chris@directcfoadvisory.com<br />
              directcfoadvisory.com
            </div>
          </div>

          <div>
            <Eyebrow tone="mute">Client base</Eyebrow>
            <div style={{
              fontFamily: F.mono, fontSize: 13, color: T.mute,
              marginTop: 16, lineHeight: 2, letterSpacing: '0.02em',
            }}>
              Houston · Austin<br />
              Dallas · San Antonio
            </div>
          </div>
        </div>

        <HairRule dark style={{ margin: '56px 0 24px' }} />

        <div style={{
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 24, flexWrap: 'wrap',
          fontFamily: F.mono, fontSize: 12,
          color: T.slate, letterSpacing: '0.08em',
        }}>
          <span>© 2026 DirectCFO · A service of G² Advisory Group LLC</span>
          <span>directcfoadvisory.com</span>
        </div>
      </div>
    </footer>
  );
}

function FooterLinks({ items, onNavigate }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16,
    }}>
      {items.map(i => (
        <a
          key={i}
          onClick={() => onNavigate(i)}
          style={{
            fontFamily: F.body, fontSize: 15, color: T.mute,
            textDecoration: 'none', cursor: 'pointer',
            width: 'fit-content',
            transition: 'color 120ms',
          }}
          onMouseEnter={e => { e.currentTarget.style.color = T.white; }}
          onMouseLeave={e => { e.currentTarget.style.color = T.mute; }}
        >
          {i}
        </a>
      ))}
    </div>
  );
}

window.Footer = Footer;