const Footer = ({ lang }) => {
  const t = window.DICT[lang].footer;
  return (
    <footer>
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              <div style={{ color: 'var(--violet)' }}><window.Icon name="logo" size={40} /></div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: 'var(--violet)' }}>unbekannte Farbe</span>
                <span style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 8, letterSpacing: '0.32em', color: 'var(--fg-mute)', textTransform: 'uppercase' }}>Design &amp; Trading</span>
              </div>
            </div>
            <p style={{ whiteSpace: 'pre-line' }}>{t.tag}</p>
          </div>
          <div>
            <h4>{t.cPractice}</h4>
            <ul>{t.practice.map((x) => <li key={x}><a href="#services">{x}</a></li>)}</ul>
          </div>
          <div>
            <h4>{t.cFirm}</h4>
            <ul>{t.firm.map((x) => {
              const isLinkedIn = x.toLowerCase() === 'linkedin';
              return (
                <li key={x}>
                  <a
                    href={isLinkedIn ? 'https://www.linkedin.com/company/ufdt' : '#'}
                    target={isLinkedIn ? '_blank' : undefined}
                    rel={isLinkedIn ? 'noopener noreferrer' : undefined}
                  >{x}</a>
                </li>
              );
            })}</ul>
          </div>
          <div>
            <h4>{t.cLegal}</h4>
            <ul>{t.legal.map((x) => <li key={x}><a href="#">{x}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>{t.copy}</span>
          <span>{t.id}</span>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;