/* global React */
/* Footer generado desde rules/footer.json — no editar a mano */
const FOOT = window.ACMP_FOOTER || {};

function footLinkProps(link) {
  if (!link) return {};
  const external = link.external || /^https?:\/\//.test(link.href || '') || (link.href || '').startsWith('mailto:');
  return {
    href: link.href,
    target: external && !link.href.startsWith('mailto:') ? '_blank' : undefined,
    rel: external && !link.href.startsWith('mailto:') ? 'noopener noreferrer' : undefined,
  };
}

function SocialIcon({ name }) {
  const paths = {
    instagram: <><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"/></>,
    tiktok:    <><path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5"/><path d="M14 4c.5 2.5 2.5 4 5 4"/></>,
    linkedin:  <><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 17v-7"/></>,
    youtube:   <><rect x="3" y="6" width="18" height="12" rx="3"/><path d="m11 9 4 3-4 3z" fill="currentColor"/></>,
  };
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
}

function FooterColumn({ column }) {
  if (!column) return null;
  return (
    <div className="acmp-footer-col">
      {column.title && <h4>{column.title}</h4>}
      <ul>
        {(column.links || []).map(link => (
          <li key={link.label}>
            <a {...footLinkProps(link)}>{link.label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Footer() {
  const newsletter = FOOT.newsletter || {};
  const columns = FOOT.columns || [];
  const social = FOOT.social || [];
  const secondaryCtas = FOOT.secondary_ctas || [];
  const legal = FOOT.legal || [];
  const cta = FOOT.cta || {};
  const ctaText = FOOT.cta_text || '';
  const email = FOOT.email || 'academia@maipistiner.com';

  return (
    <footer className="acmp-footer acmp-footer--global">
      <div className="acmp-footer-inner acmp-footer-inner--global">
        <div className="acmp-footer-brand">
          <a href={FOOT.logo_href || 'index.html'} className="acmp-footer-logo-link">
            <img
              src={R(FOOT.logo_src || 'assets/logo-primary.webp')}
              width="220"
              alt="Academia Comunica de Mai Pistiner"
              style={{ filter: 'brightness(0) invert(1)' }}
            />
          </a>
          {(cta.before || ctaText) && (
            <p className="acmp-footer-guide tagline">
              {cta.before ? (
                <>{cta.before}<strong>{cta.highlight}</strong>{cta.after}</>
              ) : ctaText}
            </p>
          )}
          <p className="acmp-footer-email">
            Escribinos a{' '}
            <a href={`mailto:${email}`} data-track-guia-cta="email">{email}</a>
          </p>
          {social.length > 0 && (
            <div className="socials">
              {social.map(s => (
                <a key={s.label} aria-label={s.label} {...footLinkProps(s)}>
                  <SocialIcon name={s.icon} />
                </a>
              ))}
            </div>
          )}
        </div>

        {newsletter.form_id && (
          <div className="acmp-footer-newsletter">
            <h2 className="acmp-footer-newsletter-heading">{newsletter.heading || 'Newsletter'}</h2>
            <div id={newsletter.wrapper_id || 'ff-wrapper'}>
              <div id={newsletter.form_id || 'ff-form'} />
            </div>
          </div>
        )}

        <div className="acmp-footer-links-row">
          {columns.map((col, i) => (
            <FooterColumn key={col.title || `col-${i}`} column={col} />
          ))}
        </div>

        {secondaryCtas.length > 0 && (
          <div className="acmp-footer-secondary">
            {secondaryCtas.map(cta => (
              <a
                key={cta.label}
                className={'acmp-footer-secondary-btn' + (cta.variant === 'catalogo' ? ' is-catalogo' : '')}
                {...footLinkProps(cta)}
              >
                {cta.label}
              </a>
            ))}
          </div>
        )}
      </div>

      {legal.length > 0 && (
        <div className="acmp-footer-legal">
          {legal.map((item, i) => (
            <React.Fragment key={item.label}>
              {i > 0 && <span className="acmp-footer-legal-sep"> — </span>}
              <a {...footLinkProps(item)}>{item.label}</a>
            </React.Fragment>
          ))}
        </div>
      )}

      <div className="acmp-footer-bottom">
        <span>{FOOT.copyright || '© Academia Comunica de Mai Pistiner'}</span>
        {FOOT.tagline && <span>{FOOT.tagline}</span>}
      </div>
    </footer>
  );
}

Object.assign(window, { Footer, SocialIcon });