/* global React, Icon */

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <img
                src="assets/setza-logo-white.png"
                alt="Setza"
                style={{ height: 44, width: 'auto', display: 'block' }}
              />
            </div>
            <p className="foot-tagline">
              Consultora Automotriz — un puente al futuro.
            </p>
            <div className="foot-promise mono">
              Seguridad · Tecnología · Confianza
            </div>
          </div>

          <div className="foot-cols">
            <div className="foot-col">
              <div className="foot-col-title mono">GPS</div>
              <a href="#producto">Funcionalidades</a>
              <a href="#alertas">Catálogo de alertas</a>
              <a href="#app">App 24/7</a>
              <a href="#cobertura">Cobertura</a>
            </div>
            <div className="foot-col">
              <div className="foot-col-title mono">Servicios</div>
              <a href="#servicios">Consultoría</a>
              <a href="#servicios">Fleet Planning</a>
              <a href="#servicios">Training</a>
            </div>
            <div className="foot-col">
              <div className="foot-col-title mono">Contacto</div>
              <a href="https://wa.me/525611693553" target="_blank" rel="noreferrer">WhatsApp</a>
              <a href="mailto:ceosetza@gmail.com">ceosetza@gmail.com</a>
              <a href="#contacto">Cotizar</a>
            </div>
          </div>
        </div>

        <div className="foot-bottom">
          <span className="mono">© {new Date().getFullYear()} Setza · Hecho en México</span>
          <div className="foot-legal">
            <a href="#">Aviso de privacidad</a>
            <a href="#">Términos</a>
          </div>
        </div>
      </div>

      <style>{`
        .site-footer {
          background: var(--bg-2);
          border-top: 1px solid var(--line);
          padding: 80px 0 40px;
        }
        .foot-top {
          display: grid;
          grid-template-columns: 1fr 1.5fr;
          gap: 60px;
          padding-bottom: 60px;
          border-bottom: 1px solid var(--line);
        }
        @media (max-width: 900px) {
          .foot-top { grid-template-columns: 1fr; gap: 40px; }
        }
        .foot-brand { display: flex; flex-direction: column; gap: 16px; }
        .foot-tagline {
          color: var(--ink-2);
          margin: 0;
          font-size: 14px;
          max-width: 30ch;
        }
        .foot-promise {
          color: var(--peach-deep);
          font-size: 11px;
          padding-top: 12px;
          border-top: 1px solid var(--line);
          width: max-content;
        }
        .foot-cols {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
        }
        @media (max-width: 700px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
        .foot-col { display: flex; flex-direction: column; gap: 10px; }
        .foot-col-title {
          font-size: 10px;
          color: var(--ink-mute);
          margin-bottom: 4px;
        }
        .foot-col a {
          font-size: 14px;
          color: var(--ink-2);
          text-decoration: none;
          transition: color .2s ease;
        }
        .foot-col a:hover { color: var(--ink); }

        .foot-bottom {
          padding-top: 28px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
        .foot-bottom .mono { color: var(--ink-mute); font-size: 10px; }
        .foot-legal { display: flex; gap: 18px; }
        .foot-legal a {
          color: var(--ink-mute);
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          text-decoration: none;
          transition: color .2s ease;
        }
        .foot-legal a:hover { color: var(--ink); }
      `}</style>
    </footer>
  );
}

function Mark() {
  return (
    <svg width="34" height="34" viewBox="0 0 34 34" fill="none" aria-hidden="true">
      <circle cx="17" cy="17" r="16" stroke="currentColor" strokeWidth="1" opacity="0.18" />
      <circle cx="17" cy="17" r="11" stroke="currentColor" strokeWidth="1" opacity="0.28" />
      <circle cx="17" cy="17" r="3.4" fill="var(--petrol)" />
      <circle cx="17" cy="17" r="6.5" fill="none" stroke="var(--petrol)" strokeWidth="1.4" strokeDasharray="2 3" />
    </svg>
  );
}

window.Footer = Footer;