/* Corsa Privata — footer (dark anchor). Repositioned companion line replaces the
 * old club motto on this institutional surface: "Commission. Drive. Master." */
const { Logo, Divider } = window.CorsaPrivataDesignSystem_94a5c9;

function Footer({ go, t }) {
  const f = t.footer;
  return (
    <footer className="cp-dark" style={{ position: 'relative', background: 'var(--cp-ink-900)', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
      <div style={{ position: 'absolute', top: -1, left: 0, right: 0, height: 1, background: 'rgba(194,161,101,0.35)' }} />
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(56px,7vw,80px) 32px 40px' }}>
        <div className="cp-foot-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }}>
          <div style={{ maxWidth: 300 }}>
            <Logo variant="white" height={40} basePath="assets" />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.6, color: 'var(--cp-ink-300)', margin: '20px 0 0', maxWidth: '34ch' }}>
              {f.tagline}
            </p>
          </div>
          {f.cols.map((c) => (
            <div key={c.h} style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 'var(--fw-medium)', textTransform: 'uppercase', letterSpacing: 'var(--ls-wider)', color: 'var(--cp-gold-400)' }}>{c.h}</span>
              {c.items.map(([label, id]) => (
                <a key={label} href={id ? '#' + id : '#'}
                  onClick={(e) => { e.preventDefault(); if (id) go(id); }}
                  className="cp-foot-link"
                  style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--cp-ink-200)', textDecoration: 'none', transition: 'color var(--dur-fast) var(--ease-standard)' }}>
                  {label}
                </a>
              ))}
            </div>
          ))}
        </div>

        <Divider tone="hairline" style={{ background: 'rgba(255,255,255,0.1)', margin: '44px 0 22px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--cp-ink-400)' }}>{f.copyright}</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-medium)', fontSize: 11, letterSpacing: 'var(--ls-widest)', textTransform: 'uppercase', color: 'var(--cp-gold-400)' }}>
            {f.motto.split(' · ').map((w, i, a) => (
              <React.Fragment key={w}>{w}{i < a.length - 1 ? '\u00A0\u00A0·\u00A0\u00A0' : ''}</React.Fragment>
            ))}
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;