// Footer - wordmark, tagline, legal.
const Footer = () => (
  <footer style={footStyles.wrap}>
    <div style={footStyles.inner}>
      <div style={footStyles.brandCol}>
        <div style={footStyles.wordmark}>MISSION DRIVEN AI</div>
        <div style={footStyles.tagline}>The AI partner for mission-driven housing.</div>
        <div style={footStyles.address}>19505 Biscayne Blvd, Suite 2350, Aventura, Florida 33180</div>
      </div>
      <div style={footStyles.contactCol}>
        <a href="mailto:hello@mission-driven.ai" style={footStyles.email}>hello@mission-driven.ai</a>
        <div style={footStyles.copyright}>© 2026</div>
      </div>
    </div>
    <div style={footStyles.legal}>
      Mission Driven AI is a joint venture between Shieldstone and Gateway Merchant Banking. We do not provide investment, tax, or legal advice. Our workflows are tooling and process support for licensed financial professionals.
    </div>
  </footer>
);

const footStyles = {
  wrap: {
    borderTop: '1px solid var(--border-gold)',
    padding: '72px 32px 56px', background: 'var(--bg)',
  },
  inner: {
    maxWidth: 1240, margin: '0 auto',
    display: 'flex', justifyContent: 'space-between',
    alignItems: 'flex-end', gap: 32, flexWrap: 'wrap',
    paddingBottom: 32, borderBottom: '1px solid var(--border-soft)',
  },
  brandCol: { display: 'flex', flexDirection: 'column', gap: 12 },
  wordmark: {
    fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.18em',
    color: 'var(--fg-accent)',
  },
  tagline: {
    fontFamily: 'var(--font-display)', fontStyle: 'italic',
    fontSize: 22, color: 'var(--fg-1)',
  },
  address: {
    fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
    color: 'var(--fg-2)', marginTop: 4,
  },
  contactCol: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 },
  email: {
    fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em',
    color: 'var(--fg-accent)', textDecoration: 'none', borderBottom: '1px solid var(--border-gold)',
  },
  copyright: {
    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--fg-2)',
  },
  legal: {
    maxWidth: 1240, margin: '32px auto 0',
    fontSize: 12, lineHeight: 1.6, color: 'var(--fg-2)', maxWidth: 900,
  },
};

Object.assign(window, { Footer });