const colophonStyles = {
  wrap: { background: 'var(--ink)', color: 'var(--paper)', padding: '64px 0 40px' },
  top: { display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 },
  logo: { height: 50, width: 'auto', display: 'block', marginBottom: 18 },
  tagline: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 15, color: 'rgba(255,255,255,.7)', lineHeight: 1.55, maxWidth: 340 },
  colTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--yellow)', marginBottom: 18 },
  link: { display: 'block', color: 'rgba(255,255,255,.75)', textDecoration: 'none', fontSize: 14, marginBottom: 10, fontFamily: 'Inter, sans-serif', overflowWrap: 'anywhere' },
  bottom: { borderTop: '1px solid rgba(255,255,255,.15)', paddingTop: 28, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20, alignItems: 'center' },
  small: { color: 'rgba(255,255,255,.55)', fontSize: 12, fontFamily: 'Plus Jakarta Sans, sans-serif', letterSpacing: '0.06em' },
  socials: { display: 'flex', gap: 14 },
  socLink: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 13, color: 'var(--paper)', textDecoration: 'none', letterSpacing: '0.06em' },
};

function Colophon() {
  return (
    <footer style={colophonStyles.wrap}>
      <div className="container">
        <div style={colophonStyles.top} className="col-top">
          <div>
            <img src="assets/dream-logo-white.png" alt="Dream" style={colophonStyles.logo} />
            <p style={colophonStyles.tagline}>A group on a mission to help people chase their dream through entrepreneurship.</p>
          </div>
          <div>
            <div style={colophonStyles.colTitle}>The Group</div>
            <a href="#helpbnk" style={colophonStyles.link}>HelpBnk</a>
            <a href="#companies" style={colophonStyles.link}>Simon Squibb</a>
            <a href="#companies" style={colophonStyles.link}>DreamMedia</a>
            <a href="#companies" style={colophonStyles.link}>DreamBrew</a>
            <a href="#companies" style={colophonStyles.link}>DreamVentures</a>
            <a href="#companies" style={colophonStyles.link}>DreamerFund</a>
            <a href="#companies" style={colophonStyles.link}>DreamClothing</a>
            <a href="#companies" style={colophonStyles.link}>DreamBanking</a>
          </div>
          <div>
            <div style={colophonStyles.colTitle}>About</div>
            <a href="#simon" style={colophonStyles.link}>Simon Squibb</a>
            <a href="#manifesto" style={colophonStyles.link}>Mission & vision</a>
            <a href="#stories" style={colophonStyles.link}>Stories</a>
          </div>
          <div>
            <div style={colophonStyles.colTitle}>Contact</div>
            <a href="mailto:jonny@simonsquibb.com" style={colophonStyles.link}>jonny@simonsquibb.com</a>
            <a href="https://www.simonsquibb.com" target="_blank" rel="noopener" style={colophonStyles.link}>simonsquibb.com</a>
            <a href="https://helpbnk.com" target="_blank" rel="noopener" style={colophonStyles.link}>helpbnk.com</a>
          </div>
        </div>

        <div style={colophonStyles.bottom}>
          <div style={colophonStyles.small}>© Dream Inc Ltd · 2026. For dreamers. #GiveWithoutTake</div>
          <div style={colophonStyles.socials}>
            <a href="https://www.instagram.com/simonsquibb/" target="_blank" rel="noopener" style={colophonStyles.socLink}>Instagram</a>
            <span style={{ color: 'rgba(255,255,255,.3)' }}>·</span>
            <a href="https://www.tiktok.com/@simonsquibb" target="_blank" rel="noopener" style={colophonStyles.socLink}>TikTok</a>
            <span style={{ color: 'rgba(255,255,255,.3)' }}>·</span>
            <a href="https://www.youtube.com/c/SimonSquibb" target="_blank" rel="noopener" style={colophonStyles.socLink}>YouTube</a>
            <span style={{ color: 'rgba(255,255,255,.3)' }}>·</span>
            <a href="https://www.linkedin.com/in/simonsquibb/" target="_blank" rel="noopener" style={colophonStyles.socLink}>LinkedIn</a>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) {
        .col-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
      }
      @media (max-width: 520px) {
        .col-top { grid-template-columns: 1fr !important; gap: 28px !important; }
      }`}</style>
    </footer>
  );
}