/* global React, Wordmark, SITE */

const Footer = () => {
  const cols = SITE.footer.cols;

  return (
    <footer style={{ background: 'var(--color-canvas)', borderTop: '1px solid var(--color-hairline)' }}>
      <div className="container" style={{ padding: '72px 32px 32px' }}>
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 48,
          paddingBottom: 56,
          borderBottom: '1px solid var(--color-hairline)',
        }}>

          {/* Brand column */}
          <div>
            <Wordmark height={22} />
            <p className="body-sm" style={{ marginTop: 18, maxWidth: 280 }}>
              {SITE.footer.tagline}
            </p>
            <div style={{ marginTop: 24 }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '4px 10px', borderRadius: 100,
                background: 'var(--color-surface-soft)',
                fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
                letterSpacing: '0.08em', textTransform: 'uppercase',
                color: 'var(--color-body)',
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 100, background: 'var(--color-positive)' }} />
                {SITE.footer.status}
              </span>
            </div>
          </div>

          {/* Link columns */}
          {cols.map((c) => (
            <div key={c.title}>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{c.title}</div>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.links.map((l) => (
                  <li key={l.label}>
                    {l.href ? (
                      <a
                        href={l.href}
                        target={l.href.startsWith('http') || l.href.startsWith('mailto') ? '_blank' : undefined}
                        rel={l.href.startsWith('http') ? 'noreferrer' : undefined}
                        style={{
                          fontFamily: 'var(--font-sans)', fontSize: 14,
                          color: 'var(--color-body)',
                          transition: 'color 150ms',
                        }}
                        onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--color-ink)'; }}
                        onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--color-body)'; }}
                      >{l.label}</a>
                    ) : (
                      <span style={{
                        fontFamily: 'var(--font-sans)', fontSize: 14,
                        color: 'var(--color-muted)',
                        cursor: 'default',
                      }}>{l.label}</span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 28, flexWrap: 'wrap', gap: 16,
        }}>
          <div className="caption">{SITE.footer.copyright}</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="#" className="caption" style={{ color: 'var(--color-body)' }}>Privacy</a>
            <a href="#" className="caption" style={{ color: 'var(--color-body)' }}>Terms</a>
            <a href="mailto:counsel.expert.1@gmail.com" className="caption" style={{ color: 'var(--color-body)' }}>Contact us</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
};

window.Footer = Footer;