/* Footer.jsx */
function Footer({ name }) {
  const year = new Date().getFullYear();
  return (
    <footer style={{ background: "var(--dark-2)", color: "var(--on-dark)", paddingBlock: "clamp(44px,5vw,64px)" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 40 }}>
        <div>
          <Logo name={name} onDark size={1.1} />
          <p style={{ marginTop: 16, color: "var(--on-dark-2)", maxWidth: 320, fontSize: ".96rem" }}>
            Movimiento de suelos, pavimentos, adoquinado y mantenimiento vial. Obra pública y privada.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: ".74rem", textTransform: "uppercase", letterSpacing: ".08em", color: "var(--on-dark-2)", marginBottom: 14 }}>Secciones</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            {[["servicios", "Servicios"], ["obras", "Obras"], ["nosotros", "Nosotros"], ["maquinaria", "Maquinaria"]].map(([id, l]) => (
              <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); scrollToId(id); }} style={{ color: "var(--on-dark)", fontSize: ".96rem", opacity: .85 }}>{l}</a>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: ".74rem", textTransform: "uppercase", letterSpacing: ".08em", color: "var(--on-dark-2)", marginBottom: 14 }}>Contacto</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9, fontSize: ".96rem", color: "var(--on-dark)", opacity: .85 }}>
            <span>rsvialcor@gmail.com</span>
            <span>351-6753199</span>
            <span>351-5637672</span>
            <a href="#contacto" onClick={(e) => { e.preventDefault(); scrollToId("contacto"); }} className="btn btn-accent" style={{ marginTop: 8, alignSelf: "flex-start" }}>Pedir presupuesto</a>
          </div>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 44, paddingTop: 22, borderTop: "1px solid var(--line-dark)", display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 12, fontFamily: "var(--font-mono)", fontSize: ".76rem", color: "var(--on-dark-2)" }}>
        <span>© {year} {name}. Todos los derechos reservados.</span>
        <span>Empresa vial · Obra pública y privada</span>
      </div>
      <style>{`
        @media (max-width:720px){ footer .wrap{grid-template-columns:1fr!important} }
      `}</style>
    </footer>
  );
}
Object.assign(window, { Footer });