// Footer
const Footer = () => (
  <footer style={{ background: 'var(--navy-900)', color: 'var(--bone-100)', borderTop: '1px solid rgba(242,237,228,0.12)', padding: 'var(--sp-8) 0 var(--sp-6)' }}>
    <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--page-pad-x)' }}>
      <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 64 }}>
        <div>
          <Logo />
          <p style={{ marginTop: 24, fontSize: 14, opacity: 0.65, maxWidth: '34ch', lineHeight: 1.55 }}>
            General contractor specializing exclusively in hospitality construction across the Southeast coastal corridor.
          </p>
        </div>
        <FooterCol title="Services" items={['Ground-Up', 'Renovations & PIP', 'F&B Buildouts', 'Design-Build', 'Coastal Permitting', 'Sustainability']} />
        <FooterCol title="Studio" items={['About', 'Leadership', 'Careers', 'Press', 'Awards']} />
        <FooterCol title="Contact" items={['Savannah HQ', 'Naples Office', 'Hilton Head Office', 'General inquiries']} />
      </div>

      <div className="footer-legal" style={{ paddingTop: 24, borderTop: '1px solid rgba(242,237,228,0.12)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', opacity: 0.55 }}>
        <div>© 2026 Palmetto Build Group, LLC · FL CGC-1508742 · GA RLCO-007329 · SC-GC-5118</div>
        <div>Savannah · Naples · Hilton Head</div>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, items }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, color: 'var(--brass-400)', marginBottom: 20 }}>{title}</div>
    <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map(i => (
        <li key={i} style={{ fontSize: 13, opacity: 0.72 }}>
          <a href="#" style={{ transition: 'opacity 0.2s' }}>{i}</a>
        </li>
      ))}
    </ul>
  </div>
);

window.Footer = Footer;