/* global React */

function Footer() {
  return (
    <footer>
      <div className="top">
        <div className="brand-col" style={{textAlign: 'center', alignItems: 'center'}}>
          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8}}>
            <img src="Bubbly Logo New.png" alt="" style={{height: 36, width: 'auto'}} />
            <img src="assets/bubbly-wordmark.png" alt="Bubbly" />
          </div>
          <p>The friendly streaming overlay app for creators who would rather be live than configuring.</p>
        </div>
      </div>
      <div className="legal">
        <div>© 2026 Bubbly. Local-first. Stream-safe.</div>
        <div className="made">Made with 🫧 for creators</div>
      </div>
    </footer>
  );
}