/* Reiderstad Invest — site footer */
function Footer({ setView }) {
  const { Eyebrow } = window;
  const col = (title, items) => (
    <div style={{ display: 'grid', gap: 14, alignContent: 'start' }}>
      <Eyebrow>{title}</Eyebrow>
      {items.map((t) => (
        <button key={t.label} onClick={() => setView && setView(t.view)} style={{
          background: 'none', border: 'none', textAlign: 'left', padding: 0, cursor: 'pointer',
          fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--muted-strong)',
        }}>{t.label}</button>
      ))}
    </div>
  );
  return (
    <footer data-theme="dark" style={{ background: 'var(--bg)', color: 'var(--fg)', padding: '80px 96px 56px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 56, paddingBottom: 56, borderBottom: '1px solid var(--hairline)' }}>
          <div style={{ display: 'grid', gap: 24, alignContent: 'start' }}>
            <img src={window.LOGO_DARK} alt="Reiderstad Invest" style={{ height: 56, width: 'auto', justifySelf: 'start' }} />
            <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.45, color: 'var(--muted-strong)', maxWidth: 360, margin: 0 }}>
              From acquisition to ownership — one accountable partner.
            </p>
          </div>
          {col('Services', [
            { label: 'Acquisition', view: 'services' },
            { label: 'Interior design', view: 'services' },
            { label: 'Rental strategy', view: 'services' },
          ])}
          {col('Company', [
            { label: 'About', view: 'about' },
            { label: 'The team', view: 'about' },
            { label: 'A property', view: 'property' },
          ])}
          {col('Contact', [
            { label: 'reiderstadinvest.com', view: 'home' },
            { label: 'Mallorca · Balearics', view: 'home' },
            { label: 'Request the buyer guide', view: 'home' },
          ])}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 28, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>
          <span>© 2026 Reiderstad Invest</span>
          <span>Mallorca · Balearic Islands</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;