/* ═══════════════════════════════════════════════════════════════════════════
   ESBART — Shared <Footer> component
   Props:
     t — merged i18n dict (uses keys: footBrand, footCol1Title..footCol4Title,
         footCol1..footCol4 arrays of {label, href}, footAddrLines, footContact,
         footSupporters, legalRights, legalLinks)

   Exports: window.EsbartFooter
   ═══════════════════════════════════════════════════════════════════════════ */

function EsbartFooter({ t }) {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <img src="assets/logo-ecd.png" alt="ECD" />
            <h3>Esbart Català de Dansaires</h3>
            <p>{t.footBrand}</p>
            <div className="addr">
              {(t.footAddrLines || []).map((l, i) => (
                <React.Fragment key={i}>{l}<br/></React.Fragment>
              ))}
              <span style={{color:'rgba(255,255,255,.7)', fontFamily:'var(--ff-ui)', fontStyle:'normal', fontSize:13}}>
                {t.footContact}
              </span>
            </div>
          </div>

          {[
            { title: t.footCol1Title, items: t.footCol1 },
            { title: t.footCol2Title, items: t.footCol2 },
            { title: t.footCol3Title, items: t.footCol3 },
            { title: t.footCol4Title, items: t.footCol4 },
          ].map((col, i) => (
            <div key={i} className="foot-col">
              <h4>{col.title}</h4>
              {(col.items || []).map((item, j) => (
                <a key={j} href={item.href}>{item.label}</a>
              ))}
            </div>
          ))}
        </div>

        <div className="foot-mid">
          {/* Supporters — uniform monochrome white lockups. Each item shows a
              white logo image when `logo` is provided, otherwise a clean
              wordmark, so the row always stays uniform. */}
          <div className="foot-support">
            <h4 className="foot-support__title">{t.footSupportTitle}</h4>
            <div className="foot-support__grid">
              {(t.footSupporters || []).map((s, i) => {
                const item = typeof s === "string" ? { name: s } : s;
                const inner = item.logo
                  ? <img className="foot-logo" src={item.logo} alt={item.name} />
                  : <span className="foot-wordmark">{item.name}</span>;
                return item.url
                  ? <a key={i} className="foot-support__item" href={item.url} target="_blank" rel="noopener" title={item.name}>{inner}</a>
                  : <span key={i} className="foot-support__item">{inner}</span>;
              })}
            </div>
          </div>
          <div className="foot-social">
            <a href="https://www.facebook.com/esbartcatala/" target="_blank" rel="noopener" aria-label="Facebook">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.5-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46H15.2c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z"/>
              </svg>
            </a>
            <a href="https://www.instagram.com/esbartcatala/" target="_blank" rel="noopener" aria-label="Instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                <rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
              </svg>
            </a>
            <a href="https://twitter.com/EsbartCatala" target="_blank" rel="noopener" aria-label="Twitter">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 3h3l-7.5 8.6L22 21h-6.8l-4.7-6.1L5 21H2l8-9.2L2 3h6.9l4.3 5.7L18 3z"/>
              </svg>
            </a>
            <a href="https://www.youtube.com/channel/UCTPFPLEdODg0SeQwbfP98ZQ" target="_blank" rel="noopener" aria-label="YouTube">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M23 12s0-3.3-.4-4.9a2.6 2.6 0 0 0-1.8-1.8C19.2 5 12 5 12 5s-7.2 0-8.8.3A2.6 2.6 0 0 0 1.4 7.1 28 28 0 0 0 1 12c0 3.3.4 4.9.4 4.9a2.6 2.6 0 0 0 1.8 1.8C4.8 19 12 19 12 19s7.2 0 8.8-.3a2.6 2.6 0 0 0 1.8-1.8c.4-1.6.4-4.9.4-4.9zM10 15.5v-7l6 3.5-6 3.5z"/>
              </svg>
            </a>
            <a href="https://www.tiktok.com/@esbartcatala" target="_blank" rel="noopener" aria-label="TikTok">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
              </svg>
            </a>
          </div>
        </div>

        {/* Colofó editorial: etiqueta+llegenda a l'esquerra, entitats en
            columnes a la dreta, nota històrica com a peu en cursiva. */}
        <div className="foot-affil">
          <div className="foot-affil__aside">
            <h4 className="foot-affil__title">{t.footAffilTitle}</h4>
            {t.footFounderNote ? <p className="foot-affil__legend">{t.footFounderNote}</p> : null}
          </div>
          <div className="foot-affil__main">
            <ul className="foot-affil__list">
              {(t.footAffil || []).map((a, i) => (
                <li key={i} className="foot-affil__item">
                  <a href={a.url} target="_blank" rel="noopener">
                    {a.name}{a.founder ? <sup className="foot-affil__star">*</sup> : null}
                  </a>
                </li>
              ))}
            </ul>
            {t.footAffilNote ? <p className="foot-affil__note">{t.footAffilNote}</p> : null}
          </div>
        </div>

        <div className="foot-bottom">
          <div>{t.legalRights}</div>
          <div className="links">
            {(t.legalLinks || []).map((l, i) => (
              <a key={i} href={l.href}>{l.label}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

window.EsbartFooter = EsbartFooter;