// Activa Soluciones — Footer

const Footer = () => {
  return (
    <footer className="site-footer">
      <div className="ftr-line"></div>
      <div className="container">
        <div className="ftr-top">
          <div className="ftr-brand">
            <div className="ftr-logo">
              <img src="../../assets/logo-mark.png" alt="" />
              <div>
                <div className="ftr-name">ACTIVA</div>
                <div className="ftr-sub">SOLUCIONES</div>
              </div>
            </div>
            <p className="ftr-tagline">El motor de las grandes marcas.</p>
            <p className="ftr-blurb">
              Consultora B2B enterprise para mid-large companies en Perú, Chile y México.
            </p>
          </div>

          <FooterCol title="Servicios" items={['Transformación comercial','Marketing estratégico','Tecnología comercial','Business Intelligence','Ejecución operativa','M&A & 100 días']} />
          <FooterCol title="Industrias" items={['Retail & e-commerce','Banca & seguros','Industrial & B2B','Salud & farma','Consumo masivo','Energía']} />
          <FooterCol title="Compañía" items={['Nosotros','Casos de éxito','Insights','Carreras','Prensa','Contacto']} />

          <div className="ftr-contact">
            <div className="ftr-col-title">Hablemos</div>
            <a className="ftr-contact-link">contacto@activa.pe</a>
            <a className="ftr-contact-link">+51 (1) 247 4400</a>
            <div className="ftr-cities">
              <div><b>Lima</b> · Av. El Derby 254, Surco</div>
              <div><b>Santiago</b> · Apoquindo 4501, Las Condes</div>
              <div><b>CDMX</b> · Reforma 222, Cuauhtémoc</div>
            </div>
          </div>
        </div>

        <div className="ftr-bottom">
          <span>© 2026 Activa Soluciones S.A.C. · RUC 20507891234</span>
          <div className="ftr-socials">
            <a aria-label="LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24"><path className="li" stroke="currentColor" d="M4 4h4M4 9v11M9 9v11M14 13v7M14 13c0-2 1.5-4 4-4s4 2 4 4v7"/></svg></a>
            <a aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24"><path className="li" stroke="currentColor" d="M5 5h14v14H5zM12 8v8M8 12h8M16 7h.01"/></svg></a>
            <a aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24"><path className="li" stroke="currentColor" d="M3 7c0-1.5 1-2.5 2.5-2.5h13c1.5 0 2.5 1 2.5 2.5v10c0 1.5-1 2.5-2.5 2.5h-13C4 19.5 3 18.5 3 17V7zM10 9l5 3-5 3V9z"/></svg></a>
          </div>
          <a href="#top" className="ftr-top-link">Volver al inicio <span className="arr arrow-rise">→</span></a>
        </div>
      </div>

      <style>{`
        .site-footer { background: var(--activa-blue-900); color: #fff; padding: 80px 0 32px; position: relative; }
        .ftr-line {
          position: absolute; top: 0; left: 0; right: 0;
          height: 1px;
          background: linear-gradient(to right, transparent 0%, var(--color-accent) 20%, var(--color-accent) 80%, transparent 100%);
        }
        .ftr-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 40px; }
        @media (max-width: 1000px) { .ftr-top { grid-template-columns: 1fr 1fr; } }

        .ftr-logo { display: flex; align-items: center; gap: 12px; }
        .ftr-logo img { height: 40px; }
        .ftr-name { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 18px; letter-spacing: 0.04em; }
        .ftr-sub  { font-family: var(--font-body); font-weight: 600; color: var(--color-accent); font-size: 10px; letter-spacing: 0.18em; margin-top: 2px; }
        .ftr-tagline { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 18px; margin: 18px 0 8px; letter-spacing: -0.01em; }
        .ftr-blurb { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.62); line-height: 1.55; margin: 0; max-width: 280px; }

        .ftr-col-title {
          font-family: var(--font-body); font-weight: 700;
          font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--color-accent); margin-bottom: 14px;
          display: flex; align-items: center; gap: 10px;
        }
        .ftr-col-title::before { content: ""; width: 18px; height: 1px; background: var(--color-accent); transform: rotate(-25deg); transform-origin: left; }

        .ftr-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
        .ftr-col a, .ftr-contact-link {
          font-family: var(--font-body); font-size: 13px;
          color: rgba(255,255,255,0.78); text-decoration: none;
          cursor: pointer; transition: color 180ms var(--ease-rise);
          display: block;
        }
        .ftr-col a:hover, .ftr-contact-link:hover { color: var(--color-accent); }

        .ftr-contact-link { margin-bottom: 6px; font-weight: 500; }
        .ftr-contact-link:first-of-type { color: #fff; font-weight: 700; font-size: 15px; font-family: var(--font-display); letter-spacing: -0.005em; }
        .ftr-cities {
          margin-top: 18px; display: flex; flex-direction: column; gap: 8px;
          font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.62);
          line-height: 1.5;
        }
        .ftr-cities b { color: rgba(255,255,255,0.92); font-weight: 700; font-family: var(--font-display); }

        .ftr-bottom {
          margin-top: 56px; padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,0.10);
          display: flex; justify-content: space-between; align-items: center; gap: 24px;
          flex-wrap: wrap;
          font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.5);
        }
        .ftr-socials { display: flex; gap: 14px; }
        .ftr-socials a {
          width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
          display: grid; place-items: center; color: rgba(255,255,255,0.62);
          border: 1px solid rgba(255,255,255,0.12);
          transition: all 220ms var(--ease-rise);
        }
        .ftr-socials a:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); }
        .ftr-top-link {
          font-family: var(--font-display); font-weight: 700; font-size: 13px;
          color: rgba(255,255,255,0.85); cursor: pointer;
          display: inline-flex; align-items: center; gap: 8px;
          transition: color 220ms var(--ease-rise);
        }
        .ftr-top-link:hover { color: var(--color-accent); }
      `}</style>
    </footer>
  );
};

const FooterCol = ({ title, items }) => (
  <div className="ftr-col">
    <div className="ftr-col-title">{title}</div>
    <ul>{items.map((i) => <li key={i}><a>{i}</a></li>)}</ul>
  </div>
);