// GetContent — site footer (dark, with faint monogram texture).
function Footer({ onNav }) {
  const cols = [
    { h: 'Voor opdrachtgevers', items: ['Plaats een opdracht', 'Hoe het werkt', 'Prijzen'] },
    { h: 'Voor creators', items: ['Meld je aan', 'Uitbetalingen'] },
    { h: 'Bedrijf', items: ['Over ons', 'Contact', 'Veelgestelde vragen'] },
    { h: 'Juridisch', items: ['Voorwaarden', 'Privacy', 'Cookies', 'Betalingen'] },
  ];
  const route = (label) => {
    const map = {
      'Plaats een opdracht': ['post'],
      'Meld je aan': ['signup'],
      'Hoe het werkt': ['how'],
      'Over ons': ['about'],
      'Contact': ['contact'],
      'Veelgestelde vragen': ['how', 'faq'],
    };
    const t = map[label] || ['home'];
    if (onNav) onNav(t[0], t[1]);
  };
  return (
    <footer className="gc-dark-pattern" style={{
      background: 'var(--surface-dark-deep)', color: 'var(--text-on-dark)',
    }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '72px var(--gutter) 40px' }}>
        <div className="gc-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr)', gap: 32 }}>
          <div className="gc-footer-brand">
            <img src={(window.__resources && window.__resources.wordmarkDark) || '../../assets/logo/wordmark-on-dark.svg'} alt="getcontent" style={{ height: 30, marginBottom: 18 }} />
            <p style={{ fontSize: 15, color: 'var(--text-on-dark-muted)', maxWidth: 280, lineHeight: 1.6 }}>
              Het content-platform van Nederland. Vind de juiste creator voor je project, stijl en prijs. Transparant geregeld, zonder verborgen kosten.
            </p>
          </div>
          {cols.map((c, i) => (
            <div key={i}>
              <div style={{ fontSize: 13, fontWeight: 'var(--fw-bold)', letterSpacing: 'var(--ls-wide)', textTransform: 'uppercase', color: 'var(--text-on-dark-faint)', marginBottom: 14 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.items.map((it, j) => (
                  <li key={j}><a onClick={() => route(it)} style={{ cursor: 'pointer', fontSize: 14, color: 'var(--text-on-dark-muted)', transition: 'color var(--dur-fast) var(--ease-out)' }}
                    onMouseEnter={(e)=>e.currentTarget.style.color='var(--accent)'}
                    onMouseLeave={(e)=>e.currentTarget.style.color='var(--text-on-dark-muted)'}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, paddingTop: 24, borderTop: '1px solid var(--border-on-dark-soft)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontSize: 13, color: 'var(--text-on-dark-faint)' }}>© 2026 GetContent.</span>
          <span style={{ display: 'flex', gap: 16 }}>
            {[
              { icon: 'instagram', href: 'https://www.instagram.com/getcontent.nl/', label: 'GetContent op Instagram' },
              { icon: 'linkedin', href: 'https://www.linkedin.com/company/getconent/about/?viewAsMember=true', label: 'GetContent op LinkedIn' },
            ].map((s) => (
              <a key={s.icon} href={s.href} target={s.href ? '_blank' : undefined} rel={s.href ? 'noopener noreferrer' : undefined} aria-label={s.label}
                style={{ cursor: 'pointer', color: 'var(--text-on-dark-muted)', transition: 'color var(--dur-fast) var(--ease-out)' }}
                onMouseEnter={(e)=>e.currentTarget.style.color='var(--accent)'}
                onMouseLeave={(e)=>e.currentTarget.style.color='var(--text-on-dark-muted)'}>
                <i data-lucide={s.icon} style={{ width: 18, height: 18 }}></i>
              </a>
            ))}
          </span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;