function Footer() {
  const col = { display: 'flex', flexDirection: 'column', gap: 8 };
  const lnk = { color: 'var(--lmc-paper)', opacity: 0.85, textDecoration: 'none', fontSize: 14 };
  const hd = { fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--lmc-yellow)', marginBottom: 6 };
  return (
    <footer style={{ background: 'var(--lmc-black)', color: 'var(--lmc-paper)' }}>
      <div className="caution" />
      <div className="container" style={{ padding: '64px 32px 28px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <img src="../../assets/logo-light.png" alt="LMC" style={{ height: 56, marginBottom: 14 }} />
          <p style={{ fontSize: 13, lineHeight: 1.55, opacity: 0.8, margin: 0, maxWidth: 280 }}>
            Helping people launch cannabiz across California, since launch one.
          </p>
        </div>
        <div style={col}><div style={hd}>Services</div><a href="#" style={lnk}>Permits</a><a href="#" style={lnk}>Storefront</a><a href="#" style={lnk}>Capital</a><a href="#" style={lnk}>Branding</a></div>
        <div style={col}><div style={hd}>Company</div><a href="#" style={lnk}>About</a><a href="#" style={lnk}>Stories</a><a href="#" style={lnk}>Press</a><a href="#" style={lnk}>Careers</a></div>
        <div style={col}><div style={hd}>Get in touch</div><a href="#" style={lnk}>hello@launchmycannabiz.co</a><a href="#" style={lnk}>Sacramento, CA</a><a href="#" style={lnk}>Instagram ↗</a></div>
      </div>
      <div className="container" style={{ padding: '0 32px 32px', display: 'flex', justifyContent: 'space-between', fontSize: 12, opacity: 0.6 }}>
        <span>© 2026 LaunchMyCannabiz™</span>
        <span>Privacy · Terms · License #C10-XXXXXXX</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;