/* Danex Roofing — footer. */
function Footer() {
  const { Logo } = DS;
  const cols = [
    { head: 'Services', items: ['Flat Roofing', 'Sloped Roofing', 'Cedar Roofing', 'Roof Repair', 'Replacement', 'Commercial'] },
    { head: 'Service Areas', items: ['Vancouver', 'Burnaby', 'Surrey', 'Langley', 'Richmond', 'Maple Ridge'] },
    { head: 'Company', items: ['Why Danex', 'Recent Work', 'Reviews', 'Get a Quote'] },
  ];

  return (
    <footer style={{ background: 'var(--slate-950)', borderTop: '1px solid var(--border-inverse)' }}>
      <div className="dx-container" style={{ paddingTop: '64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }} className="dx-footer-grid">
          <div>
            <Logo size={40} tone="light" />
            <p style={{ color: 'var(--slate-400)', fontSize: 14.5, lineHeight: 1.6, margin: '18px 0 20px', maxWidth: 280 }}>
              Lower Mainland roofing done right. Flat, sloped and cedar. Over 20 years of honest work, residential and commercial.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              <a href="tel:6046908427" style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--paper-100)', fontWeight: 700, fontSize: 15.5 }}>
                <i data-lucide="phone" style={{ width: 16, height: 16, color: 'var(--ember-400)' }}></i>604-690-8427
              </a>
              <span style={{ display: 'flex', alignItems: 'center', gap: 9, color: 'var(--slate-400)', fontSize: 14 }}>
                <i data-lucide="map-pin" style={{ width: 16, height: 16, color: 'var(--ember-400)' }}></i>6288 Cassey Ave, Burnaby BC
              </span>
            </div>
          </div>
          {cols.map((col) => (
            <div key={col.head}>
              <h4 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 12.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--slate-400)', margin: '0 0 16px' }}>{col.head}</h4>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {col.items.map((it) => (
                  <li key={it}><a href="#" style={{ color: 'var(--slate-300)', fontSize: 14.5, transition: 'color var(--dur-fast)' }}
                    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ember-400)'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'var(--slate-300)'}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;